- 小程序app.onLaunch与page.onLoad异步问题的最佳实践
场景: 在小程序中大家应该都有这样的场景,在onLaunch里用wx.login静默登录拿到code,再用code去发送请求获取token、用户信息等,整个过程都是异步的,然后我们在业务页面里onLoad去用的时候异步请求还没回来,导致没拿到想要的数据,以往要么监听是否拿到,要么自己封装一套回调,总之都挺麻烦,每个页面都要写一堆无关当前页面的逻辑。 直接上终极解决方案,公司内部已接入两年很稳定: 1.可完美解决异步问题 2.不污染原生生命周期,与onLoad等钩子共存 3.使用方便 4.可灵活定制异步钩子 5.采用监听模式实现,接入无需修改以前相关逻辑 6.支持各种小程序和vue架构 。。。 //为了简洁明了的展示使用场景,以下有部分是伪代码,请勿直接粘贴使用,具体使用代码看Github文档 //app.js //globalData提出来声明 let globalData = { // 是否已拿到token token: '', // 用户信息 userInfo: { userId: '', head: '' } } //注册自定义钩子 import CustomHook from 'spa-custom-hooks'; CustomHook.install({ 'Login':{ name:'Login', watchKey: 'token', onUpdate(token){ //有token则触发此钩子 return !!token; } }, 'User':{ name:'User', watchKey: 'userInfo', onUpdate(user){ //获取到userinfo里的userId则触发此钩子 return !!user.userId; } } }, globalData) // 正常走初始化逻辑 App({ globalData, onLaunch() { //发起异步登录拿token login((token)=>{ this.globalData.token = token //使用token拿用户信息 getUser((user)=>{ this.globalData.user = user }) }) } }) //关键点来了 //Page.js,业务页面使用 Page({ onLoadLogin() { //拿到token啦,可以使用token发起请求了 const token = getApp().globalData.token }, onLoadUser() { //拿到用户信息啦 const userInfo = getApp().globalData.userInfo }, onReadyUser() { //页面初次渲染完毕 && 拿到用户信息,可以把头像渲染在canvas上面啦 const userInfo = getApp().globalData.userInfo // 获取canvas上下文 const ctx = getCanvasContext2d() ctx.drawImage(userInfo.head,0,0,100,100) }, onShowUser() { //页面每次显示 && 拿到用户信息,我要在页面每次显示的时候根据userInfo走不同的逻辑 const userInfo = getApp().globalData.userInfo switch(userInfo.sex){ case 0: // 走女生逻辑 break case 1: // 走男生逻辑 break } } }) 具体文档和Demo见↓ Github:https://github.com/1977474741/spa-custom-hooks 祝大家用的愉快,记得star哦
2023-04-23 - 服务商账号申请特约商户,为每一个特约商户绑定同一个APPID,请问这个绑定有上限吗?
服务商账号申请特约商户,为每一个特约商户绑定同一个小程序APPID,请问这个绑定有上限吗?一直没有看到官方说明这个绑定是否有上限,业务需求是在同一小程序要付款至各自不同的门店商户号,有100+的门店,所以想知道绑定上限是多少
2022-07-15 - 服务商JSAPI支付appid和mch_id不匹配
下图是特约商户以及他的小程序appid [图片] 下图是特约商户显示的已经关联的appid [图片] 下图是小程序关联的商户(PS:没有待关联服务商号) [图片] 现在调用微信支付提示appid和mch_id不匹配,请问问题在哪里?已经试过重新关联appid了
2021-01-12 - 服务商JSAPI下单 返回:“appid和mch_id不匹配,请检查后再试”
https://api.mch.weixin.qq.com/v3/pay/partner/transactions/jsapi jsapi下单接口 请求的信息如下 "sp_appid":"wxcf2092de99806XXX", "sp_mchid":"16091728XX", "sub_mchid":"16136399XX", 返回信息 {"code":"APPID_MCHID_NOT_MATCH","message":"appid和mch_id不匹配,请检查后再试" 服务商(16091728XX)管理后台 的 “特约商户开发配置” 中已经为特约商户(16136399XX) 配置了 appid wxcf2092de99806XXX [图片]
2022-01-15 - 一个小程序最多能绑定几个商户号,不同主体的?
我这要做个类似于美团这种商家入驻的小程序,不申请服务商模式的情况下,怎么才能实现一对多
2021-12-16 - 微信公众号网页支付可以付款给不同的商家吗?
现有一个商场,商场里面的商品由不同商家提供,购买商品后可以直接给该商品的商户付款吗
2021-11-04 - 一个服务商主体的公众号appid可以绑定多少个这个服务商进件的子商户号呢?
一个服务商主体的公众号appid可以绑定多少个这个服务商进件的子商户号呢?
2022-03-25 - vue中使用wx-open-launch-weapp开放标签按钮不显示问题
先说明下本人不是专业做前端的,出于项目原因来研究一下微信公众号跳转小程序的功能,其中许多的代码运行流程原理及代码解析过程我并不了解,好在经过两天的尝试终于可以跳转了。在此总结一下几个需要注意的事项。 因为我们项目是已经上线的项目,所以微信公号的认证和js域名绑定都是好的,前期的环境准备我并没有操心。 最开始我是照着微信的开发文档搞的,代码都写完了,丢到正式环境真机测试,按钮没有显示。网上查了很多信息都说是微信签名握手那块有问题,查阅了很多资料,看了很多的帖子大家说的都差不多,最后还是在微信的官方文档上找到了按钮不显示的答案。 微信官方开放标签使用文档地址 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html。下面总结下使用步骤及注意事项。 一、环境准备 1、微信版本手机版本要求(这个估计大家都满足)。 1)微信版本要求为:7.0.12及以上。 2)系统版本要求为:iOS 10.3及以上、Android 5.0及以上。 2、微信公众号绑定域名并在界面中引入微信的jssdk(注意jssdk要用1.6.0版本的)。 1)微信开放标签使用步骤与微信JS-SDK类似,也需要引入JS文件等步骤。如果是公众号身份的网页,需要绑定安全域名,如果是使用小程序云开发静态网站托管的小程序 网页,则不需绑定安全域名即可直接使用(这个地方因为我用的是公司已经上线的公众号所以安全域名都是配置好的,没有配置的可以在微信后台->公众号设置->功能设置)。 [图片] 2)在需要调用JS接口的页面引入如下JS文件:http://res.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)如需进一步提升服务稳定性,当上述资源不可访问时,可改访问:http://res2.wx.qq.com/open/js/jweixin-1.6.0.js (支持https)。(这里因为也是公司上线的项目,都是脚手架引用好的,我只是升级了一下js的版本,再次提醒版本要是1.6.0的,这里如果说是自己来试水来测试这个功能的话注意一下用的jssdk的版本就好) [图片] 3、可以使用标签使用对象 1)已认证的服务号,服务号绑定“JS接口安全域名”下的网页可使用此标签跳转任意合法合规的小程序。 2)已认证的非个人主体的小程序,使用小程序云开发的静态网站托管绑定的域名下的网页,可以使用此标签跳转任意合法合规的小程序。 经过上面的检查如果条件都符合说明基本的开发环境和条件已经具备了,就可以开始试水开发了。 二、开发。 1)通过config接口注入权限验证配置并申请所需开放标签(这里具体代码运行流程的我就不知道了反正这一步是必须要成功的才行,相信做前端的程序猿们应该很清楚了,记住一定要成功!不然按钮肯定没有)。这个地方还有人说appid必须是小程序的,我感觉有点误导了,这个地方你在哪个地方跳就是哪个的,和你要跳到的小程序并没有太大关系。比如你在公众号跳小程序,那这个地方就是公众号的appid wxSdk.config({ debug: false, // 这个设置成true签名成功会返回弹出config ok的框框,建议测试的时候还是把这个打开,确保这一步是成功的。 appId: "", // 必填,公众号的唯一标识后台配置的 timestamp: "", // 必填,生成签名的时间戳后台配置的 nonceStr: "", // 必填,生成签名的随机串后台配置的 signature: "",// 必填,签名后台配置的 jsApiList: ['updateTimelineShareData'],// 必填,需要使用的JS接口列表,这个地方必须至少写一个,即使你一个都不想用 openTagList:['wx-open-launch-weapp']// 可选,需要使用的开放标签列表 }); 2)上面的config权限验证成功,标签也开放了就可以开始使用开放标签了(这个地方就照着微信官网的文档写就行,这里介绍几种写法)。 1)使用的前端框架和template标签不冲突的(username是小程序原始的id,gh开头的,path是小程序的页面路径,其他东西可以不动)。 <wx-open-launch-weapp id="launch-btn" :username="gh_xxxxx" :path="pages/index.html" @launch="handleLaunchFn" @error="handleErrorFn" > <template> <style>.btn { display: flex;align-items: center;width: 100px;height: 100px }</style> <button class="btn">跳转小程序</button> </template> </wx-open-launch-weapp> 2)使用的前端框架和template标签冲突的,例如VUE框架(就是把标签换一种写法,避免冲突)。 <wx-open-launch-weapp id="launch-btn" :username="gh_xxxxx" :path="pages/index.html" @launch="handleLaunchFn" @error="handleErrorFn" > <script type="text/wxtag-template"> <style>.btn { display: flex;align-items: center;width: 100px;height: 100px }</style> <button class="btn">跳转小程序</button> </script> </wx-open-launch-weapp> 3)不管冲突不冲突都能用的(就是动态的生成标签内容,下面的例子是在vue中用v-html实现的,也可以用docment对象来动态的生成节点在加到页面)。 <template> <div v-html="html"></div> </template> <script> export default { data () { return { html:'<wx-open-launch-weapp id="launch-btn" username="gh_xxxx" path="/pages/index.html" @launch="handleLaunchFn" @error="handleErrorFn"><template><style>.btn { display: flex;align-items: center; }</style><button class="btn">跳转小程序</button></template></wx-open-launch-weapp>' } }, created() { }, mounted() { }, methods: { handleLaunchFn (e) { console.log(e) }, handleErrorFn(e){ console.log('fail', e.detail); }, } } </script> 4)对于有CSP要求的页面,需要添加白名单[代码]frame-src https://*.qq.com webcompt:[代码],才能在页面中正常使用开放标签(这点重中之中,因为我看了两天的帖子都没人提到这个点,虽然到现在我也不清楚什么是有CSP要求的界面,我不显示按钮的原因也是因为这个)。 单页面的项目就在index.html中的head标签下面添加。 [图片] <meta http-equiv="Content-Security-Policy" content="script-src * 'self' 'unsafe-inline' 'unsafe-eval' https://img.yzcdn.cn https://ssl.google-analytics.com https://assets.zendesk.com https://connect.facebook.net;default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src * data: content:; connect-src *; font-src * data: content:;frame-src https://*.qq.com webcompt:;"> 上面四个步骤完成基本上就算开发完成了可以测试了。 三、测试(测试一定要真机测试就是要在手机上测试,其他测试环境目前都不会有按钮显示不管环境正不正确,代码正不正确)。 测试没啥说的祝大家好运吧! 四、总结 微信官方文档上面给的说明其实比较详细了,该提的点也都提了,希望各位开发者认真看下文档,检查自己的环境是否具备,代码写的是否正确。下面从环境和开发方面总结几个重要的点。 环境: 1)微信和手机系统的版本。 2)使用的jssdk必须是1.6.0的。 3)微信的服务号公众号必须是已经认证的服务号、且绑定了JS接口安全域名。 开发: 1)通过config接口注入权限验证配置并申请所需开放标签,这步骤必须成功。 2)避免template冲突。 3)对于有CSP要求的页面,需要添加白名单[代码]frame-src https://*.qq.com webcompt:[代码] 4)测试必须真机测试。
2021-03-29