文 | 大宏
写在前面
先把微信官方文档放在这，如果有需要，可直接进入微信公众号开发文档。
很多时候，我们陷入了一种误区，觉得 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 白名单以及测试号的配置等等，这里就不再罗列了，如果有不懂的可以留言或者私信我都行。
网友评论