微信的一些相关功能实现

发表于 | 分类于 |

TL;DR

和微信的交互主要分为三种情况：

  • 微信里打开的网页
  • pc端的网页需要微信登录
  • app里需要调起微信的相关功能
  • 网页里调用微信接口，注意在微信公众平台点击账号-> 功能设置加上响应的域名，否则接口会调用错误

微信的各种神坑

设置分享参数的坑

设置分享参数的时候，一般这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var shareOptions = {
  title: '我刚刚领取了一度用车北马补给包！', // 分享标题
  desc: '又到一年一度北马节，一度用车“北马补给站”为跑友全程助力加油！北马期间，跑友可获得用车优惠及比赛日终点免费摆渡服务。助力跑友，一度是认真的。', // 分享描述
  imgUrl: 'http://www.yiduyongche.com/240.png', // 分享图标
  // link必须带http
  link: result.data.link+'?source='+result.data.source, // 分享链接
}
var wxInfo = result.data.signPackage;
wx.config({
  debug: false,
  appId: wxInfo.appId,
  timestamp: wxInfo.timestamp,
  nonceStr: wxInfo.nonceStr,
  signature: wxInfo.signature,
  jsApiList: [
    // 所有要调用的 API 都要加到这个列表中
    'checkJsApi',
    'onMenuShareTimeline',
    'onMenuShareAppMessage'
  ]
});
wx.ready(function() {
  wx.onMenuShareTimeline(shareOptions);
  wx.onMenuShareAppMessage(shareOptions);
});

特别注意shareOptions的link参数，这里必须一定肯定是绝对路径！！！！
年少无知，写成相对路径，即使开了debug模式，也根本不会报错，分享出去的页面不带设置的标题和描述，最蛋疼的是安卓部分手机连发送到朋友都调不起来。。。

上传图片的坑

开始用的是微信生成的serverId，但是服务器那边有时候下载会发现图片失效，于是为了改变这个bug，决定把图片变成base64上传到服务器，就用到wx.getLocalImgData这个接口。但是，紧接着就有坑了:

  1. 第一项localId传的参数在ios上可以直接用数组，但是安卓不行，所以解决方案是localIds[0].
  2. ios生成的图片是自带data:image/jpeg;base64,而且后缀是’.jgp’,对，你没看错，所以判断是果子之后替换
  3. android生成的图片不带前缀，所以手动加
  4. 最坑的是，目前知道的是魅族手机，因为base64太长，可能其做限制了，所以发送不了请求。我觉得可能有些手机处理不了字符串过长的问题吧。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {
    var picId;
    if (res.errMsg == "chooseImage:ok") {
      picId = res.localIds[0];
      RenZhengActions.changeUrl(this.props.data.name, res.localIds[0]);
      RenZhengActions.saveId(this.props.data.name, "picId", res.localIds[0]);
      RenZhengActions.changeBtnStyle();
      wx.uploadImage({
        localId: res.localIds.toString(), // 需要上传的图片的本地ID，由chooseImage接口获得
        isShowProgressTips: 0, // 默认为1，显示进度提示
        success: function (res) {
          // RenZhengActions.saveId(this.props.data.name, "serverId", res.serverId);
          // TODO DEL START
                wx.getLocalImgData({
                    localId: picId, // 图片的localID
                    success: function (res) {
                        var pre = IsAndriod() ? "data:image/jpeg;base64," :"";
                        var base64 = pre + res.localData; // localData是图片的base64数据，可以用img标签显示
                        isIos()? base64.replace('jgp','jpg');
                        RenZhengActions.saveId(_this.props.data.name, "serverId", base64);
                    },
                    fail:function(res){
                      alert("resfail2"+JSON.stringify(res));
                    }
                });
          // TODO DEL END
        }.bind(this)
      });
    }
  }.bind(this),
  fail:function(res){
    alert("resfail"+JSON.stringify(res));
  }
});

微信里的分享网页

在微信里打开页面，分享给朋友或者其他，显示相应的标题，描述等。

官网文档

官网demo
右击查看源代码

目前已经实现在网页里可以实现很多功能。

大约步骤是：

  • wx.config
  • wx.ready(function(){ 某些功能接口 })

微信里的网页需要授权登录

在微信里打开页面，需要用户授权微信登录，从而获得用户微信的某些信息。

官网文档

1
window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=' + wxInfo.appId + '&redirect_uri=' + wxInfo.redirect_uri + '&response_type=code&scope=snsapi_userinfo&state='+ wxInfo.state +'#wechat_redirect'

用户授权之后，url变成 redirect_uri/?code=CODE&state=STATE。

pc网站，需要微信扫二维码登录

官方文档

在自己的app里调起微信的相关功能

在app调起微信，是需要下载sdk的。
app里面的网页需要调起微信相关功能的话，需要app接入sdk之后，再提供给前端接口去调用。换言之，app里的网页用到微信功能必须要app实现功能，才能提供接口让网页调用实现。
说一句，如果参数传错，能调起来朋友圈的icon，但是调不起来微信，所以一旦出现这种情况，需要和app对下是否参数传错的问题。

官方文档