标签 微信开发 下的文章

ThinkPHP实现微信分享好友转发朋友圈自定义图片和文字的方法,在开始之前呢,我们需要准备好一些东西:

前期准备

  • 认证的公众号,订阅号或者服务号都可以,只要是认证过的就可以。
  • 公众号的AppID和AppSecret,登录微信公众平台,开发—基本配置,就可以看到啦。
  • 设置JSJS接口安全域名,登录微信公众平台,设置—公众号设置—功能设置里,填写就可以了。
  • 官方SDK,我们直接下载案例就可以,下载地址:http://demo.open.weixin.qq.com/jssdk/sample.zip里面包含php、java、nodejs以及python的示例代码。

服务端准备(ThinkPHP)

  • 将刚刚下载的jssdk.php文件重命名为Jssdk.php,然后和access_token.php、jsapi_ticket.php一起放入到ThinkPHP框架的第三方接口扩展目录下(extend/org/wechat/)。
  • 修改Jssdk.php文件

    1. 首先我们需要在构造函数中设置 $this->path = __DIR__ . DS; 即:

      namespace wechat;
      class Jssdk  {
       private $appId;
       private $appSecret;
       private $path;
       public function __construct($appId, $appSecret) {
       $this->appId = $appId;
       $this->appSecret = $appSecret;
       $this->path = __DIR__ . DS;
       }
       ...
      }
    2. get_php_file函数返回值中的$filename改为 $this->path.$filename ,即:

      private function get_php_file($filename) {
        return trim(substr(file_get_contents($this->path.$filename), 15));
      }
    3. 设置token的缓存,修改getAccessToken,加入cache

      private function getAccessToken() {
        // access_token 应该全局存储与更新,以下代码以写入到文件中做示例
        // cache('at', ['access_token'=>'sss', 'expire_time' => '123']);
        // $data = json_decode($this->get_php_file("access_token.php"));
        $data = cache('at');
        if ($data['expire_time'] < time()) {
       // 如果是企业号用以下URL获取access_token
       // $url = "https://qyapi.weixin.qq.com/cgi-bin/gettoken?corpid=$this->appId&corpsecret=$this->appSecret";
       $url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=$this->appId&secret=$this->appSecret";
       $res = json_decode($this->httpGet($url));
       $access_token = $res->access_token;
       if ($access_token) {
         // $data->expire_time = time() + 7000;
         // $data->access_token = $access_token;
         cache('at', ['access_token'=>$access_token, 'expire_time' => time() + 7000]);
         // $this->set_php_file("access_token.php", json_encode($data));
       }
        } else {
       $access_token = $data['access_token'];
        }
        return $access_token;
      }
  • 在控制器里面调用

    1. 导入jssdk, use wechat\Jssdk;
    2. 传给前端

      $jssdk = new Jssdk($AppID, $AppSecret);
      $res = $jssdk->getSignPackage();
      $appId = $res['appId'];
      $timestamp = $res['timestamp'];
      $nonceStr = $res['nonceStr'];
      $signature = $res['signature'];
      $this->assign(
       array(
           'appId'=>$appId,
           'timestamp'=>$timestamp,
           'nonceStr'=>$nonceStr,
           'signature'=>$signature,
       )
      );

      网页端

  • 导入jssdk

    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    
  • 设置分享内容

    <script type="text/javascript">
      var title = '分享标题';
      var imgUrl = '分享图片';
      var link = '分享地址';
      var desc = '分享描述';
     
      wx.config({
          debug: false,//开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
          appId: '{$appId}', // 必填,公众号的唯一标识
          timestamp: '{$timestamp}', // 必填,生成签名的时间戳
          nonceStr: '{$nonceStr}', //必填, 生成签名的随机串
          signature: '{$signature}', //必填,签名
          jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareQZone'] //必填, JS接口列表,这里只填写了分享需要的接口
      })
      wx.ready(function () {
          wx.onMenuShareTimeline({
              title: title,
              link: link,
              desc:desc,
              imgUrl: imgUrl,
              success: function() {
                  // 用户确认分享后执行的回调函数
              },
              cancel: function() {
                  // 用户取消分享后执行的回调函数
              }
          });
          wx.onMenuShareAppMessage({
              title: title, // 分享标题
              desc: desc, // 分享描述
              link: link, // 分享链接
              imgUrl: imgUrl, // 分享图标
              type: 'link', // 分享类型,music、video或link,不填默认为link
              dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
              success: function() {
                  // 用户确认分享后执行的回调函数
              },
              cancel: function() {
                  // 用户取消分享后执行的回调函数
              }
          });
      })
    </script>

我们在使用微信小程序开发工具进行测试的时候发现使用chooseVideo或者是chooseMedia的时候,会出现"chooseVideo:fail DEMUXER_ERROR_NO_SUPPORTED_STREAMS: FFmpegDemuxer: no supported streams"这样的错误,看大家在社区已经反映过了,官方给出的答复是正在修复,所以现在也没有比较好的解决方案。我们可以使用老版本进行测试,下面小编就给大家提供下小编使用的版本,这个版本的缺陷就是,在MacOS Big Sur出现频繁崩溃的问题,也不是十分好用。

系统:MacOS Big Sur
工具版本: 微信开发者工具1.03.2011120
问题: chooseVideo或者是chooseMedia,出现"chooseVideo:fail DEMUXER_ERROR_NO_SUPPORTED_STREAMS: FFmpegDemuxer: no supported streams"

下载地址: https://developers.weixin.qq.com/community/develop/doc/0000c4f9440410caa11ab51cd5b801

这个问题好像已经存在了很多年了,好像是通过浏览器先访问腾讯地图,然后再访问位置支付的时候就会触发,网上很多解决办法就是清除浏览器缓存,这样就可以解决问题了,小编觉得用无痕模式也是可以的。再不行就换个浏览器呗,解决办法不止一个,但是都有相应的弊端,不想清除数据,也不想这么麻烦,还有一种解决方案:

  1. 先扫码登录
  2. 肯定会提醒你“登录超时,请重新登录”。不然就是成功了。
  3. 提示之后不要紧,只要访问下以下地址就可以了,把以下代码粘贴进地址栏,访问即可。

    javascript: void((function(){function delecookie(a){var b=new Date;b.setTime(b.getTime()-1e5),document.cookie=a+"=v;expires="+b.toGMTString()+";path=/;domain=.qq.com"}delecookie("session_id");window.location.href = $(".page-error p a").attr("href")})())
  4. 你就登录成功了

小编建议大家把这个作为书签保存起来,以后使用起来比较方便
登录超时,请重新登录.png

小编今天升级了微信小程序开发工具,发现小程序里面出来了一个警告,显示无效的 appJSON["navigateToMiniProgramAppIdList"]。之前一直没有这个问题的。后来通过查资料发现。

从2020年4月24日起,使用跳转其他小程序功能将无需在全局配置中声明跳转名单,调用此接口时将不再校验所跳转的 AppID 是否在 navigateToMiniProgramAppIdList 中。
从2020年4月24日起,跳转其他小程序将不再受数量限制,使用此功能时请注意遵守运营规范。

所以说现在不需要这个配置项了,直接从app.json里面删除就可以了。

微信小程序swiper组件中当数据少于display-multiple-items设置的数,就会出现这个不显示这个问题在社区看到在2019年的8月份已经有人提出了,官方说的是:目前可以通过追加空的swiper-item解决,我们也在想办法优化这块能力。这显然不是我们想要的结果,空的swiper-item,就会显示空白。
首先我们来分析下问题:当swiper组件中当数据少于display-multiple-items设置的数量的时候才会出现这样的问题,我们假设我们要显示3个。

display-multiple-items设置的数swiper组件中当数据显示个数是否正常
343
333
222
111
000

通过这个表格我们就可以很清楚的发现,当swiper组件中当数据数大于或则等于display-multiple-items设置的数的时候,就会显示正常。那么我们就可以动态的设计display-multiple-items的数量,如果swiper组件中当数据数大于或则等于display-multiple-items设置的数的时候,我们就显示我们要限定的数,否则就显示display-multiple-items的数量。这样我们就可以完美的绕开这个问题了。同时宽度(或者高度)我们也采用这种的方式来进行动态的设置就可以了。
示例代码:

<swiper style="width: 90%; height: {{datas.length>2?'330':datas.length*110}}rpx; vertical="true" autoplay="true" circular="true" interval="2000" display-multiple-items="{{datas.length>2?3:datas.length}}">
    <block wx:for="{{datas}}">
        <swiper-item>
                <image src="{{item.avatar}}" style="width: 70rpx; height: 70rpx;min-width: 70rpx;min-height: 70rpx;" />
        </swiper-item>
    </block>
</swiper>

微信小程序中swiper组件禁止用户上下滑动这个实现起来比较的简单,我们通过手册会发现,该组件的swiper-item里面上下滑动会执行函数catchtouchmove,所以我们可以通过控制这个函数来实现

< swiper-item catchtouchmove=“stopTouchMove” >< swiper-item >
stopTouchMove: function() {
    return false;
}

这种方法可以阻止手动滑动,但是带来的影响是:页面不能滑动了。这是由于在你上下滑动的时候,仍然会执行滑动的这个动作,但是触发的函数没有进行任何的操作,如果我们想让页面也滑动,我们采用下面的方法。

给这个区域一个模板压在上面,但是该组件本身就应用了定位,那么我们可以采用,前置方法:

<swiper class="swiper-disabled">
    ......               
</swiper>
.swiper-disabled {
    position: relative;
}

.swiper-disabled::after {
    position: absolute;
    content: '';
    top: 0;
    left: 0;
    width: 100%;
}

这样我们就解决了这个问题了。

微信小程序现在可以开通直播功能,只要符合资质的都可以开通直播。开通该功能后,我们只需要按照文档里面说明的方式开发就好了。
首先我们引入【直播组件】 live-player-plugin
分为两种方式引入,一种是在主包中引入,另一种是在分包中引入。因为直播组件不计入代码包体积,所以小编建议大家在主包引入,而且还有些功能只能在主包中使用,这个也是看大家的需求。
引入方式,在app.json里面引入,json文件里面不能写注释,大家在引入的时候记得把注释删除掉:

  • 主包引入

    "plugins": {
          "live-player-plugin": {
              "version": "1.0.5", // 注意填写该直播组件最新版本号,微信开发者工具调试时可获取最新版本号(复制时请去掉注释)小编在开发的时候版本是1.0.5
              "provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid,该示例值即为直播组件appid(复制时请去掉注释)
          }
      }
  • 分包引入

    "subpackages": [
          {
              "plugins": {
                  "live-player-plugin": {
                      "version": "1.0.5", // 注意该直播组件最新版本号,微信开发者工具调试时可获取最新版本号(复制时请去掉注释)
                      "provider": "wx2b03c6e691cd7370" // 必须填该直播组件appid,该示例值即为直播组件appid(复制时请去掉注释)
                  }
              }
          }
      ]

接下来我们就要进入直播间了,不需要我们写直播的界面,只需要跳转到直播组件就可以了。分享官方也给封装好了,只需要拿来使用就可以了,跳转方式也有两种,房间号在你创建完直播间的时候就有了。

  • 直接通过navigator进行跳转

    let roomId = [直播房间id] // 房间号
      let customParams = { path: 'pages/index/index', pid: 1 } // 开发者在直播间页面路径上携带自定义参数(如示例中的path和pid参数),后续可以在分享卡片链接和跳转至商详页时获取,详见【获取自定义参数】、【直播间到商详页面携带参数】章节
      this.setData({
          roomId,
          customParams: encodeURIComponent(JSON.stringify(customParams))
      })
      <navigator url="plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id={{roomId}}&custom_params={{customParams}}"></navigator>
      // 其中wx2b03c6e691cd7370是直播组件appid不能修改
  • js中跳转

    let roomId = [直播房间id] // 房间号
      let customParams = { path: 'pages/index/index', pid: 1 } // 开发者在直播间页面路径上携带自定义参数(如示例中的path和pid参数),后续可以在分享卡片链接和跳转至商详页时获取,详见【获取自定义参数】、【直播间到商详页面携带参数】章节
      wx.navigateTo({
          url: `plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=${roomId}&custom_params=${encodeURIComponent(JSON.stringify(customParams))}`
      })
      // 其中wx2b03c6e691cd7370是直播组件appid不能修改

另外在说一下获取直播间列表的方法、

【获取直播房间列表】接口,仅供后台调用
接口规则:该接口仅供商家后台调用,调用限额 500 次/天,建议开发者自己做缓存(此接口与下面【获取回放视频】接口共用 500 次/天限制,请合理分配调用频次)。

请求URL: http://api.weixin.qq.com/wxa/business/getliveinfo?access_token=

请求方式: POST

请求示例:

  • Request
    {
        "start": 0, // 起始拉取房间,start = 0 表示从第 1 个房间开始拉取
        "limit": 10 // 每次拉取的个数上限,不要设置过大,建议 100 以内
    }

Response(官方文档可能有问题,anchor_img这个没返回,返回的是share_img)

    {
        "errcode": 0, // errcode = 0 代表成功;errcode = 1 代表未创建直播房间
        "errmsg": "ok",
        "room_info": [{
        "name": "直播房间名",
        "roomid": 1,
        "cover_img": "http:\/\/mmbiz.qpic.cn\/mmbiz_jpg\/Rl1RuuhdstSfZa8EEljedAYcbtX3Ejpdl2et1tPAQ37bdicnxoVialDLCKKDcPBy8Iic0kCiaiaalXg3EbpNKoicrweQ\/0?wx_fmt=jpeg",
        "live_status": 101,
        "start_time": 1568128900,
        "end_time": 1568131200,
        "anchor_name": "李四",
        "anchor_img": "http:\/\/mmbiz.qpic.cn\/mmbiz_jpg\/Rl1RuuhdstSfZa8EEljedAYcbtX3Ejpdlp0sf9YTorOzUbGF9Eib6ic54k9fX0xreAIt35HCeiakO04yCwymoKTjw\/0?wx_fmt=jpeg",
        "goods": [          
            {
                "cover_img": "http://mmbiz.qpic.cn/mmbiz_png/FVribAGdErI2PmyST9ZM0JLbNM48I7TH2FlrwYOlnYqGaej8qKubG1EvK0QIkkwqvicrYTzVtjKmSZSeY5ianc3mw/0?wx_fmt=png",
                "url": "pages/index/index.html",
                "price": 1100,
                "name": "fdgfgf"
            }
        ],
        "total": 1
    }

常用的就这些了,要是有需要小编说明的,欢迎在下方留言。
微信小程序开通直播功能.jpeg

微信小程序获取用户收货地址,这个功能在我们开发商城的时候,经常会用到,所以微信小程序专门提供了API,我们只需要直接调用就可以了。
实现代码:

getAddress: function() {
        let that = this;
        wx.chooseAddress({
            success(res) {
                console.error(res)
                console.log(res.userName)//收货人姓名
                console.log(res.postalCode)//邮编
                console.log(res.provinceName)//国标收货地址第一级地址
                console.log(res.cityName)//国标收货地址第二级地址
                console.log(res.countyName)//国标收货地址第三级地址
                console.log(res.detailInfo)//详细收货地址信息
                console.log(res.nationalCode)//收货地址国家码
                console.log(res.telNumber)//收货人手机号码
            }
        })
    },

实现效果:
收货地址.png
你只要对你自己的内容进行赋值就可以了。

微信小程序获取用户收货地址.jpeg

在微信小程序里面,页面基本上都是一个栈的数据结构,当我们使用wx.navigateto,打开一个新的页面的时候,这时候就会在栈顶显示这个页面,当我们使用wx.navigateBack() 返回上个页面的时候,就是把当前的页面pop出去。小编之前用过RN,当时采用的是回调函数来实现的,其实在小程序里面不需要这么麻烦,我们可以直接拿到页面栈,然后给上个页面直接赋值就行。
操作方法:

  1. 在当前页面执行:

    let pages = getCurrentPages(); // 拿到页面栈
    let prevPage = pages[pages.length - 2]; // 拿到上个页面,-1是当前页面
    prevPage.setData({ // 赋值
     addressid: e.currentTarget.dataset.addressid
    })
    wx.navigateBack({ // 返回
     delta: 1
    })
  2. 上一个页面:

    // 获取值并进行赋值(一般小编是写在onShow里面)
    this.setData({
    addressid: currPage.__data__.addressid || null
    })

    微信小程序wx.navigateBack() 携带参数返回.png