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

2021-04-06 224 1 编辑:深正互联 来源:互联网

很多时候,我们陷入了一种误区,觉得 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 白名单以及测试号的配置等等,这里就不再罗列了,如果有不懂的可以留言或者私信我都行。

深正互联


本站文章均为深正网站建设摘自权威资料,书籍,或网络原创文章,如有版权纠纷或者违规问题,请即刻联系我们删除,我们欢迎您分享,引用和转载,但谢绝直接搬砖和抄袭!感谢...
关注深正互联
我们猜你喜欢
多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

2
5