- 小程序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 - 小程序web-view的title问题
微信7.0.0,小程序web-view内嵌html的title会覆盖掉wx.setNavigationBarTitle设置的值。
2019-01-07 - scroll-view如何做到和swiper一样自动滚动且可以衔接滑动?
scroll-view组件要怎么自动滚动,滚动到最后一个时需要和swiper一样衔接滑动,要求滚动时不能卡顿,可以用手势控制滑动,就像scroll-view一样,自动滚动时,动画时长不能太快
2023-03-31 - 小程序的插件页面,可以发起分享吗?
如题,小程序通过[代码]plugin://[代码] 跳转过去的插件页可以发起分享,分享到好友和朋友圈嘛?
04-24 - 小程序继承了插件,插件页面分享给好友之后,打开空白,怎么解决?
1.这个影票页面是集成的小程序插件 [图片] 2.点击左上角分享给好友 [图片] 3.好友打开以后白屏,怎么处理,这个页面不是我们内部的页面,是集成的小程序插件 [图片] [图片]
01-15 - onShareAppMessage可以分享小程序插件页面吗?如果可以,怎么分享?
文档说onShareAppMessage的path必须是以 / 开头的完整路径 但是插件的路由一般在宿主小程序中是类似这样的:'plugin://myPlugin/index' 在插件内部跳转的路由是这样的: 'plugin-private://wxa9bxxxx8cada2b21/pages/index' Page({ onShareAppMessage() { const promise = new Promise(resolve => { setTimeout(() => { resolve({ title: '自定义转发标题' }) }, 2000) }) return { title: '自定义转发标题', path: '/page/user?id=123', promise } } }) 那么我在插件页面进行转发(页面分享)的这个path该怎么写?或者无法实现?
2022-08-26 - 插件开发中如何跳转到宿主小程序的指定页面?
宿主小程序A页面,跳转到插件页面,从插件页面点击按钮后 跳转到宿主小程序B页面,是否能够实现? 尝试了 导出到插件 的方法,仅能获取数据,调用导出方法中封装好的跳转方法无响应。 (导出到插件文档链接) https://developers.weixin.qq.com/miniprogram/dev/framework/plugin/using.html#%E5%AF%BC%E5%87%BA%E5%88%B0%E6%8F%92%E4%BB%B6
01-16 - ios中picker日期组件仍然能看到end后日期
微信小程序ios中使用picker日期选择组件,设置end后,范围外的日期还是能看得到,怎么能不让end后的日期出现
2023-11-24 - picker 时间选择器ios start end无效
ios无法识别-格式
2020-07-22 - picker组件mode = date 设置的start 安卓有效 IOS无效 ?
[图片] [图片][图片]
2022-06-08 - picker组件mode=date 苹果手机IOS和安卓手机start和end兼容问题处理
大家在使用picker组件的date模式时,如果设置了start或者end参数,但是没效果,原因是IOS对日期格式有兼容问题,也算是IOS历史遗留问题。 解决方案: 1、获取系统信息:用 wx.getDeviceInfo().system 或者 __wxConfig.system [图片] 2、判断是否iOS: let isIos = __wxConfig.system.toLowerCase().startsWith('ios'); 3、格式化日期 let separator = isIos ? '/' : '-'; let d = new Date(); let end = d.toJSON().split('T')[0].split('-').join(separator); console.log(end); 效果如下 [图片]
01-26 - 求助:APP分享小程序消息卡片,图片大小限制究竟是多少?是128K吗?
看了官方文档是128K,为什么超过128K也能分享成功哪? APP分享图片大小超过了128k,也能分享成功,而且图片不模糊。有些图片则分享失败。 例如:图片尺寸一样,并且图片大小400K,分享成功了。同理,我分享了图片大小300K分享失败了(尺寸一样)。
2020-08-13 - 小程序app.globalData属性值改变时其它页面的引用响应更新
前提说明 小程序app.js的globalData中定义了userInfo属性,并且在首页和我的tab中引用了,当在其它页面更新userInfo后,在首页和我的中引用的userInfo未更新。 解决思路 利用发布-订阅的设计模式,app.js中的userInfo用Object.defineProperty实现数据劫持,当监听到userInfo值改变时,通知每个订阅者。在首页和我的页面调用app.js中的订阅方法,将更新数据的方法追加到userInfo的订阅者列表中。 实现代码 [代码]// app.js onLaunch: async function () { this.initObserve(); }, // 监听globalData中属性变化 initObserve() { const obj = this.globalData; const keys = ['userInfo']; keys.forEach(key => { let value = obj[key]; obj[`${key}SubscriberList`] = []; Object.defineProperty(obj, key, { configurable: true, enumerable: true, set(newValue) { obj[`${key}SubscriberList`].forEach(watch => { watch(newValue); }); value = newValue; }, get() { return value; } }); }); }, // 订阅globalData中某个属性变化 subscribe(key, watch) { watch(this.globalData[key]); this.globalData[`${key}SubscriberList`].push(watch); }, // 首页和我的page页 onLoad() { app.subscribe('userInfo', (userInfo) => { this.setData({ userInfo, }); }); }, [代码] 遇到的问题 小心Object.defineProperty中的set方法死循环导致栈溢出。在set用obj[key] = value时将会导致死循环,因为给属性赋值后,会再次调用set方法。解决的办法是利用闭包的原理,定义临时变量为obj[key],在set方法中对临时变量赋值。或者在obj中声明一个变量的副本,set中对变量副本赋值,get中返回变量副本。
2021-01-16 - 最新的【手机号快速验证组件】如何避免恶意频繁调用?
官方文档的原文描述和链接如下: https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html 自2023年8月26日起,手机号快速验证组件将需要付费使用。标准单价为:每次组件调用成功,收费0.03元。 扣费节点:开发者获得 [代码]bindgetphonenumber[代码] 事件的 success 回调信息时,进行扣费。 如果有用户恶意频繁(写一个自动化脚本,自动去点击授权手机号的按钮等等)调用该如何规避呢? 手机号快速验证组件是这样的: <button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button> 只能在botton组件上添加open-type属性为getPhoneNumber,且用户点击才能触发。 开发者想在点击按钮前去进行一些校验和逻辑判断是不可行的。小程序能开放手机号授权弹窗的方法吗,让开发者可以用api的方式唤起手机号授权弹。这样开发者才能在此之前做一些校验和逻辑判断。 如果不开放这个功能,现在好像没有其他的可以规避这个问题,官方能给个统一的解决方案吗?
2023-07-04 - “分享监听”能力调整
近期我们收到了很多用户对小程序/小游戏中分享功能的投诉:在某些小程序/小游戏中,分享并非是用户主动自发的行为,而是受到了某类利益的诱惑,或是被迫分享。这样的内容充斥在群里、小程序里,对用户造成了骚扰。 分享功能,旨在帮助用户更流畅地与好友分享内容和服务,应是用户自发的行为。在原来的分享接口中,用户发起分享动作之后,可以通过 [代码]success[代码] 、[代码]fail[代码]、[代码]complete[代码]等回调来判断用户是否完成了最后的分享动作。通过这个能力,开发者可以将产品交互在分享这个能力上做得比较自然和顺畅。现在为鼓励用户自发分享喜爱的内容,减少“强制分享至不同群”等滥用分享能力,破坏用户体验的行为,在我们权衡了分享功能带来的利弊后,分享功能将进行以下调整: 10月10日起新提交发布的版本,不再支持分享回调参数 [代码]success[代码] 、[代码]fail[代码] 、[代码]complete[代码],即用户从小程序/小游戏中分享消息给好友时,开发者将无法获知用户是否分享完成,也无法在分享后立即获得分享成功后的回调参数[代码]shareTicket[代码]。该调整可以在基础库 2.3.0及以上版本体验。 此次调整可能影响到三种分享功能的用法。 第一种:判断用户是否分享成功,进而给予用户奖励。 例如:小程序提示用户“分享到5个群,可以获得一张20元的优惠券”。 这类诱导用户分享的行为是我们平台所不倡导的,后续将没有办法实现。 第二种:分享完成后变更当前的页面状态 例如:赠送礼品场景下,用户点击“赠送”按钮,将礼品分享出去,分享成功后,界面展示“等待领取”。 这类场景,我们建议可以适当调整交互方案。例如在分享后继续保留“赠送”按钮,但在页面上提示用户一个礼品只能被一人领取,重复赠送无效。 第三种:通过用户分享之后的 [代码]shareTicket[代码] 获取群唯一标识 [代码]openGId[代码] ,以显示对应群的相关信息。 例如:通过分享小程序到某个群里,可以查看该群内成员的排行榜。 此次调整后,用户分享完成后无法立刻显示该群的排行榜信息,但仍可在用户从群消息点击进入小程序时显示该群的排行榜信息。 10月10日起新提交发布的版本将会受到此调整的影响。 需要各位开发者注意,10月10日起新提交发布的版本将会受到此策略的影响,请及时调整分享相关能力,考虑兼容上述调整带来的影响。 调整策略在基础库 2.3.0 及以上版本生效,该基础库版本对应微信客户端6.7.2版本。另外,考虑到兼容性等问题,在基础库版本 2.3.0 以下的环境中不受此策略影响,小程序/小游戏可继续获取分享回调事件。
2018-09-13 - onShareAppMessage必须要写path吗?
我记得onShareAppMessage默认是当前页面路径的,刚刚发现刚过审的版本分享页拿不到页面参数。打开上一个版本的分享记录,是可以拿到页面参数并能正常访问。 左图是新通过的版本,打开的分享页,query里没有scene,却多出一个sampshare; 右图是上一个版本,打开分享页后能拿到页面参数scene。 [图片][图片] [代码]onShareAppMessage: [代码][代码]function[代码] [代码]() {[代码][代码] [代码][代码]return[代码] [代码]{[代码][代码] [代码][代码]title: [代码][代码]this[代码][代码].data.productDetail.name,[代码][代码] [代码][代码]imageUrl: [代码][代码]this[代码][代码].data.productDetail.image,[代码][代码] [代码][代码]path: `/mall-detail/mall-detail?scene=${[代码][代码]this[代码][代码].data.current_pid}`[代码][代码] [代码][代码]}[代码][代码] [代码][代码]}[代码]只好在onShareAppMessage里把path写上了,之前是没写的。
2019-07-01 - 微信小程序启动的时候报运行环境加载失败 2,101?
昨天晚上10:30以后,线上小程序有很多用户反馈启动小程序报运行环境加载失败错误? 目前想到的几个方案都无法解决这个问题: 1,退出微信重新登陆,2,手机重启,3微信小程序缓存删除,4,微信缓存清除; 这个用不了小程序影响还是比较大的,麻烦官方尽快解决下啊。
2021-05-12 - swiper 是垂直方向,不会触发 onPullDownRefresh
这是正常逻辑
2020-03-03 - 小程序里面有__wxConfig这个变量吗?
小程序里面有__wxConfig这个变量吗? 可以通过这个变量判断不同的版本,是开发、体验、还是生产, 在群里看到这么一份代码 [图片]
2019-11-20 - 半屏小程序怎么打开目标小程序的分包页面?
怎么使用 wx.openEmbeddedMiniProgram 或者 wx.navigateToMiniProgram 打开目标小程序的分包页面?
2022-03-14 - 半屏小程序关闭时如何向主小程序传参?
如题,小程序A通过wx.openEmbeddedMiniProgram半屏方式打开小程序B,完成相应流程后需要将结果返回给A,请问B通过什么方式传递?
2022-09-22