谈谈 uni-App 开发微信公众号的那点事

文 | 大宏

写在前面

先把微信官方文档放在这，如果有需要，可直接进入微信公众号开发文档。

很多时候，我们陷入了一种误区，觉得 uni-App 不是挺能干的么，各种平台的内置功能，都帮你在框架内部封装好了，开发人员只需要找到对应的 API 去调用就是了。

是的，确实是这样，我们开发微信小程序的时候，会发现那什么登录授权、分享、支付等功能，简直就是信手拈来，用起来如春风拂面般令人舒畅啊。

可是，有一天公司领导说，这框架既然什么都能搞，干脆把公众号也打个包上线吧。

这个时候，你屁颠屁颠的跑去适配，会发现上述的那些基础功能，框架根本就没有提供啊！！！然后，你又跑去官方搜索，根本就找不到手把手教大家去适配的文档，而且问答区很多也只是顺手带过而已，这对于新手小白来说，确实会感到很无助，甚至抓狂，心想：不是说好了都已经封装好的么，骗我！

其实，并不是官方不封装，只是有些功能是需要自行特殊处理的，官方以为是常识的东西，所以没有过多的介绍，可在小白眼里，就是一条鸿沟啊。

好了，废话有点多，不过也是为了更好的服务后续的正题，接下来我们就看看大家比较关心的在 uni-App 中，到底如何进行公众号的登录授权，分享以及支付。

公众号授权

看了官方的文档，我们都知道，公众号授权有两种方式，一种是静默授权，用户无感知，但无法获取用户的基础信息，如果要想拉取到用户信息，则需要使用另一种授权方式，由于这种方式涉及到隐私，所以需要用户同意才行。

如果我们熟悉了其他方式的开发，或许就知道该怎么做，但这个时候，我们的思维被局限在 uni-App 当中，总以为框架会给我们提供对应的方式，可遗憾的是根本就没有，在这套框架里，我们依然需要使用传统的方式去处理，即：

let appid = 'xxx';
let uri = encodeURIComponent(window.location.href); // 这里务必编码
let scope = 'snsapi_userinfo'; // 获取用户信息
// let scope = 'snsapi_base'; // 静默授权，仅可获取openid
window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=${scope}&state=123#wechat_redirect`;

地址回调会带回来一个 code，通过这个 code 去获取用户的信息和 openid，具体可参见官方文档。

或许有很多人还是不知道要怎么操作，特别是在 uni-App 中，到底应该怎么走这套流程呢？

莫慌，既然是手把手，那么这里，还是必须要啰嗦一下，给一个小小的处理方案，供大家参考：

// 在App.vue中的启动方法中，去开启授权
onLaunch: function() {
    console.log('App Launch');
    util.wxAuthorize();
}

// util.js
// 微信公众号授权
wxAuthorize() {
    let link = window.location.href;
    let params = this._getUrlParams(link);  // 地址解析

       // 已经授权登录过的就不用再授权了
    if (store.state.token) return;

    // 如果拿到code，调用授权接口，没有拿到就跳转微信授权链接获取
    if (params.code) {
        api.wxAuth(params.code); // 调用后台接口，授权
    } else {
        let appid = 'xxx';
        let uri = encodeURIComponent(link);
        let authURL = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${uri}&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect`;
        window.location.href = authURL;
    }
}

这是在程序进入的时候，就授权的情况，如果场景不同，自行变换即可。

JSSDK配置

关于 JSSDK 是干嘛的，就不详细解释了，不了解的，就去看官方文档吧。

JSSDK 的使用方式，这是社区问答里面提供的方案，很简单，使用 npm 来安装 JSSDK ，然后就能在项目中使用了。

但是，具体怎么使用呢？

如果不提供细节的话，对于开发公众号的新手来说，还是挺难受的，所以这里无论如何，也得给出一个详细的使用方案，当然如果是老油条的话，那么可以跳过了。

// 安装
npm install jweixin-module --save  

注意，根据官方的规则，所有需要使用 JSSDK 的页面必须先注入配置信息，即每一个页面，如果想要使用 JSSDK 中的能力的话，都需要对该页面进行权限签名，获取对应的配置数据，该步骤由后台处理即可。

// jwx.js
let jweixin = require('jweixin-module')  

async function configWeiXin(callback) {
    let [errConfig, resConfig] = await api.wxConfig(window.location.href);
    if (resConfig) {
        let apiList = [ // 可能需要用到的能力
            'onMenuShareAppMessage',
            'onMenuShareTimeline',
            'hideOptionMenu',
            'showOptionMenu',
            'chooseWXPay'
        ];

        let info = {
            debug: true, // 调试，发布的时候改为false
            appId: 'appid',
            nonceStr: resConfig.noncestr,
            timestamp: resConfig.timestamp,
            signature: resConfig.sign,
            jsApiList: apiList
        };
        jweixin.config(info);
        jweixin.error(err => {
            console.log('config fail:', err);
        });

        jweixin.ready(res => {
            if (callback) callback(jweixin); // 配置成功
        });
    }
}

注意，uni-App 中是没有路由钩子的，所以如果每个页面都要配置的话，该怎么办呢？

一种方法，就是在每个页面里面都去调用一下呗！！！

但是，如果你是一个有强迫症的童鞋，或许一定不能忍受这样骚气的操作吧！！！

这里，我提供一种方案，仅供参考。可以使用 Vue 的全局 mixin ，对每个页面的方法 onShow 进行处理，因为这个生命周期的方法，在页面的使用过程中，基本上很少用到，如果有页面用到的话，那么则需要在对应的页面重新做相应的处理。

Vue.mixin({
  onShow() {
    jwx.configWeiXin(jweixin => {
      jweixin.hideOptionMenu();
    });
  }
});

或许不是最好的，但可能是一个比较合适的解决方案，如果大家有更好的处理方式，欢迎留言，大家一起学习。

完成了这一步，后面的操作，基本上也就如鱼得水了。

公众号分享

在需要分享的页面中，单独处理。

onShow() {
  jwx.configWeiXin(jweixin => {
    jweixin.showOptionMenu();
    let params = {xxx};
    let shareParams = jwx.getShareInfo(params);
    jweixin.onMenuShareAppMessage(shareParams);
    jweixin.onMenuShareTimeline(shareParams);
  });
}

当然，并不一定要在 onShow 中处理，也可以在页面获取到具体数据后再配置，不同的场景，有不一样的需求，自行把控即可。

公众号支付

代码很简单：

async startPay(params) {
    // 后台通过订单信息生成微信付款相关签名数据
    let [payErr, payRes] = await api.wxPay(params); 
    if (payRes) {
        jwx.configWechat(jweixin => {
            jweixin.chooseWXPay({
                nonceStr: payRes.nonceStr,
                timestamp: payRes.timeStamp,
                package: payRes.package,
                signType: payRes.signType,
                paySign: payRes.paySign,
                success: () => {
                    // 支付成功后
                },
                fail: err => {
                    // 支付失败
                },
                cancel: err => {
                    // 支付取消
                }
            });
        });
    } else {
       // 获取签名失败
    }
}

以上就是通过 JSSDK 进行支付的方法，还有另一种支付方式，即通过微信浏览器的内置对象 WeixinJSBridge 进行支付，这里的不做赘述了，下面罗列几个支付需要注意的事项：

1、公众号下绑定的 微信商户 需配置支付授权目录，务必配置到支付页面的上一层。假设你的url地址为 https://www.xxx.com/abc/paypage，那么你配置的页面支付地址为 https://www.xxx.com/abc/，一定要记得以 / 结尾。

2、iOS 进入页面以后，总是以进入的地址为根地址，无论内部如何切换，根地址都不会改变，所以如果首次进入的地址不是支付配置页面的话，则是无法掉起支付的。

这个时候，我们可以在支付页面通过强制刷新的方式改变根地址来解决此问题，如下：

// pay.js
created() {
  let platform = sys.platform;
  let params = util._getUrlParams(window.location.href);
  if (!params.refresh && platform === 'ios') {
    window.location.href = window.location.href + '&refresh=true';
  }
}

写在最后

uni-App 适配微信公众号，没啥特别的，其实就是按照官方的文档一步步走就行了，关键是思维要切换回来，不要被框架所局限了。

公众号中还有很多需要配置的地方，比如域名啊，IP 白名单以及测试号的配置等等，这里就不再罗列了，如果有不懂的可以留言或者私信我都行。