- app.onLaunch与page.onLoad异步问题
问题:相信很多人都遇到过这个问题,通常我们会在应用启动app.onLaunch() 去发起静默登录,同时我们需要在加载页面的时候,去调用一个需要登录态的后端 API 。由于两者都是异步,往往page.onload()调用API的时候,app.onLaunch() 内调用的静态登录过程还没有完成,从而导致请求失败。 解决方案:1. 通过回调函数// on app.js App({ onLaunch() { login() // 把hasLogin设置为 true .then(() => { this.globalData.hasLogin = true; if (this.checkLoginReadyCallback) { this.checkLoginReadyCallback(); } }) // 把hasLogin设置为 false .catch(() => { this.globalData.hasLogin = false; }); }, }); // on page.js Page({ onLoad() { if (getApp().globalData.hasLogin) { // 登录已完成 fn() // do something } else { getApp().checkLoginReadyCallback = () => { fn() } } }, }); ⚠️注意:这个方法有一定的缺陷(如果启动页中有多个组件需要判断登录情况,就会产生多个异步回调,过程冗余),不建议采用。 2. 通过Object.defineProperty监听globalData中的hasLogin值 // on app.js App({ onLaunch() { login() // 把hasLogin设置为 true .then(() => { this.globalData.hasLogin = true; }) // 把hasLogin设置为 false .catch(() => { this.globalData.hasLogin = false; }); }, // 监听hasLogin属性 watch: function (fn) { var obj = this.globalData Object.defineProperty(obj, 'hasLogin', { configurable: true, enumerable: true, set: function (value) { this._hasLogin = value; fn(value); }, get: function () { return this._hasLogin } }) }, }); // on page.js Page({ onLoad() { if (getApp().globalData.hasLogin) { // 登录已完成 fn() // do something } else { getApp().watch(() => fn()) } }, }); 3. 通过beautywe的状态机插件(项目中使用该方法) // on app.js import { BtApp } from '@beautywe/core/index.js'; import status from '@beautywe/plugin-status/index.js'; import event from '@beautywe/plugin-event/index.js'; const app = new BtApp({ onLaunch() { // 发起静默登录调用 login() // 把状态机设置为 success .then(() => this.status.get('login').success()) // 把状态机设置为 fail .catch(() => this.status.get('login').fail()); }, }); // status 插件依赖于 beautywe-plugin-event app.use(event()); // 使用 status 插件 app.use(status({ statuses: [ 'login' ], })); // 使用原生的 App 方法 App(app); // on page.js Page({ onLoad() { // must 里面会进行状态的判断,例如登录中就等待,登录成功就直接返回,登录失败抛出等。 getApp().status.get('login').must().then(() => { // 进行一些需要登录态的操作... }) }, }); 具体实现 具体实现可以参考我的商城小程序项目 项目体验地址:体验 代码:代码
2021-05-20 - #小程序 小程序和公众号内长按识别哪些码是有效的
Tip:2021-05-21 测试了小程序图片长按识别个人微信码、群聊码、企业微信码可以直接添加。 须知:以下结果均在微信IOS最新版(8.0.2)测试所得!!! 视频号二维码 公众号内长按识别结果:可以 小程序内长按识别结果:不可以 小程序内webview(公众号文章):不可以 小程序内webview(自定义H5):不可以 小程序客服消息长按识别:可以 [图片] 个人赞赏码 公众号内长按识别结果:可以 小程序内长按识别结果:不可以 小程序内webview(公众号文章):不可以 小程序内webview(自定义H5):不可以 小程序客服消息长按识别:可以 官方回复小程序因策略调整不能识别:https://developers.weixin.qq.com/community/develop/doc/0008ea7edb8f4845c39be413456c00?highLine=%25E8%25B5%259E%25E8%25B5%258F%25E7%25A0%2581%25E8%25AF%2586%25E5%2588%25AB [图片] 个人微信号二维码 公众号内长按识别结果:可以 小程序内长按识别结果:不可以 小程序内webview(公众号文章):不可以 小程序内webview(自定义H5):不可以 小程序客服消息长按识别:可以 [图片] 个人收款二维码 公众号内长按识别结果:可以 小程序内长按识别结果:不可以 小程序内webview(公众号文章):不可以 小程序内webview(自定义H5):不可以 小程序客服消息长按识别:可以 [图片] 公众号(订阅号)二维码 公众号内长按识别结果:可以 小程序内长按识别结果:不可以 小程序内webview(公众号文章):可以 小程序内webview(自定义H5):不可以 小程序客服消息长按识别:可以 [图片] 小程序码 公众号内长按识别结果:可以 小程序内长按识别结果:可以 小程序内webview(公众号文章):可以 小程序内webview(自定义H5):可以 小程序客服消息长按识别:可以 [图片] 小商店码 公众号内长按识别结果:可以 小程序内长按识别结果:可以 小程序内webview(公众号文章):可以 小程序内webview(自定义H5):可以 小程序客服消息长按识别:可以 [图片] 企业微信码 公众号内长按识别结果:可以 小程序内长按识别结果:不可以 小程序内webview(公众号文章):不可以 小程序内webview(自定义H5):不可以 小程序客服消息长按识别:可以 [图片] 普通网址二维码 公众号内长按识别结果:可以 小程序内长按识别结果:不可以 小程序内webview(公众号文章):不可以 小程序内webview(自定义H5):不可以 小程序客服消息长按识别:可以 [图片]
2021-05-21 - 重磅!微信更新版本,小程序内支持长按识别二维码!
上周,微信更新了iOS 8.0.6版本和安卓 8.0.3版本,虽然更新日志没有说明任何改变,但其实隐藏着影响全行业的巨大能力!那就是:“小程序内居然支持长按识别二维码啦!”这个“小小”的更新,体现了两大重要能力: 第一点,小程序内可以直接扫码添加好友。 第二点,小程序支持生成URL链接,直接在微信外唤起。 比如我们在移动端浏览器打开网站,以及在短信内打开链接,都可以直接唤起小程序,将外部好友加进来。引流推广上又能解锁新的玩法了。 1.缩短引流路径,快速沉淀私域流量原先用户进入小程序页面,无法直接长按识别二维码添加。要想将小程序的用户引流到私域中,必须是这两种方式: ①用户进入小程序客服会话中发送小程序,用户收到二维码,才能识别添加员工; ②通过文字引导用户,将二维码截图保存下来,用微信识别图片来添加; 现在可以直接长按二维码添加员工了。 2.减少广告投放的获客成本做百度移动端投放时,以前我们无法直接让点进百度投放链接的用户,添加员工的企业微信。通常我们的做法是,引导用户填写表单,电销部门根据收集的手机号线索,再一一打电话引导,将客户添加到我们的企业微信进行转化。 现在用户进入投放落地页,点击咨询按钮,即可在百度中唤起小程序,客户长按识别二维码就能直接添加我们。 同样在做短信营销时,用户收到企业的短信通知,可以直接点链接进小程序,添加我们的企业微信。 运用此能力这样一来,大大简化用户的操作步骤,还减少操作过程中用户的流失,更有利于我们将用户沉淀到私域中,赶紧用起来!
2021-05-27