- 小程序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 - 小程序消息订阅全流程介绍
本文将介绍小程序消息订阅的完整流程 一、首先需要配置你的模板消息 1. 登录[微信公众平台](https://mp.weixin.qq.com/),进入“功能”>“订阅消息”。 2. 点击“新建模板”,选择一个模板,然后点击“下一步”。 3. 在模板详情页,可以看到模板的标题和内容。标题下面的小字就是模板内容中的参数,例如:{{thing1.DATA}}。 4. 可以根据需要修改参数的名称,例如将{{thing1.DATA}}改为{{thing1.活动名称}}。 5. 点击“保存”按钮,完成模板的配置。 这样就完成了模板的配置,接着以在小程序中发送订阅消息为例,通过调用wx.requestSubscribeMessage接口获取用户的订阅授权,用户同意授权之后通过调用云函数或者服务端接口来实际推送消息。下面是微信小程序中调用云函数的示例: // main.js wx.requestSubscribeMessage({ tmplIds: ['配置好的模板ID'], // 最多支持3条 success(res) { // 'accept'表示用户同意订阅该条id对应的模板消息 if (res['配置好的模板ID'] === 'accept') { // 用户同意订阅,调用云函数或服务器接口发送订阅消息 wx.cloud.callFunction({ name: 'sendSubscribeMessage', data: { templateId: '配置好的模板ID', openid: '用户的openid', data: { thing1: { value: '活动名称' }, // 其他参数... } }, success(res) { console.log('订阅消息发送成功', res) }, fail(err) { console.error('订阅消息发送失败', err) } }) } } }) 二、如何实现服务器接口发送订阅消息 在上面的示例中演示了小程序端唤起用户订阅授权的方式,接下去会介绍服务端的接口如何推送模板消息。 我们以node.js和express框架来演示: 1. 安装所需的依赖项: npm install express axios 2. 创建一个server.js文件,设置你的微信小程序信息: // server.js const express = require('express'); const axios = require('axios'); const app = express(); app.use(express.json()); const appId = '小程序AppID'; const appSecret = '小程序AppSecret'; 3. 添加一个用于发送订阅消息的接口: // server.js app.post('/sendSubscribeMessage', async (req, res) => { const { templateId, openid, data } = req.body; try { // 获取access_token const tokenResponse = await axios.get(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${appId}&secret=${appSecret}`); const accessToken = tokenResponse.data.access_token; // 发送订阅消息 const messageResponse = await axios.post(`https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=${accessToken}`, { touser: openid, template_id: templateId, data: data }); res.json({ success: true, data: messageResponse.data }); } catch (error) { res.status(500).json({ success: false, error: error.message }); } }); const PORT = process.env.PORT || 3000; app.listen(PORT, () => { console.log(`Server is running on port ${PORT}`); }); 以上就是服务端发送模板消息的代码示例,在小程序端完成用户订阅授权后调用服务端接口即可完成完整的订阅消息推送流程。 三、可能遇到的问题 1. 用户无法收到订阅消息 确保用户已经同意接收订阅消息。在小程序中,需要调用requestSubscribeMessage接口来获取用户的订阅授权。如果用户同意订阅,接口返回的结果中会包含模板ID对应的状态为accept。 2. 订阅消息发送失败 检查服务器接口是否正确调用了微信小程序的API。确保已经获取了正确的access_token,并且在发送订阅消息时使用了正确的模板ID、用户openid和数据。 3. 订阅消息内容显示不正确 确保在微信公众平台上配置的订阅消息模板与在小程序中发送的数据相匹配。例如,如果模板中有一个参数为{{thing1.活动名称}},那么在发送订阅消息时,数据中也应该包含一个名为thing1的对象,其value属性为活动名称。 4. 订阅消息接口调用次数超过限制 微信小程序对订阅消息接口的调用次数有限制。如果小程序调用次数超过限制,可能会导致订阅消息发送失败。可以在[微信公众平台]查看小程序的接口调用情况,并根据需要调整调用频率。 5. 订阅消息模板无法修改 微信小程序订阅消息模板一旦创建,就无法修改。如果需要修改模板内容,可以创建一个新的模板,并在小程序中使用新的模板ID。
2023-05-29