- 小程序开发过程中遇到的那些事儿
一、使用wx.getLaunchOptionsSync()这个Api时的注意事项1.该Api获取的是小程序 冷 启动时的参数,与App.onLaunch的回调参数一致。 2.要再更仔细的强调的话,就是说,如果在小程序冷启动后,业务逻辑牵扯到新的启动参数的话,不能用这个Api获取,得拿App.onShow的回调参数。 二、小程序setData给一个数组中的某一对象的一个属性赋值 data: { list: [ { spu_name: "欧莱雅小蜜罐金致臻颜花蜜奢侈痒女补", is_check: true }, { spu_name: "水保湿滋润抗皱面妆欧莱", is_check: false } ] }, let index = 1 let = 'list[' + index + '].is_check' this.setData({ [s]: true }) 三、小程序canvas层级太高,业务逻辑可选的处理方式:方案一、如果要在canvas之上写模块(eg: 弹框,页面顶部的自定义导航栏),该模块所有的view标签换成cover-view标签,这种方法能解决简单的模块兼容,具体cover-view的使用以及坑点可参考微信官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html。 方案二、在canvas之上显示一个弹框时,可以使用wx:if暂时隐藏该canvas,弹框再次隐藏时重新显示canvas。 四、业务逻辑中遇到授权button要阻止冒泡,如何处理授权button是有特定的属性获取授权信息,我们一般阻止冒泡一般用catchtap方法,那么授权类型的button在这种情况下是用不了catchtap的,因此,这个需要一个新的解决方案: [图片] 方案一、用一个view标签将这个button包起来,在这个view标签上写上catchtap,对应的方法写成空的即可。 class="cart-box" catchtap="preventBubble"> if="{{!isAuth}}" class="cart" open-type="getUserInfo" bindgetuserinfo="goAuth"> class="iconfont icon-jiagouwuche font-25 icon"> else class="cart" bindtap="addCart"> class="iconfont icon-jiagouwuche font-25 icon"> 五、使用wx.showTabBarRedDot、wx.hideTabBarRedDot这两个Api时的注意事项 1.开发时得注意,要在tab页面使用这些Api,不要在非tab页面使用,否则console会报错。 六、好玩的小程序开发调试利器之一-AppDataAppData panel 用于显示当前项目运行时小程序 AppData 具体数据,实时地反映项目数据情况,可以在此处编辑数据,并及时地反馈到界面上。 话不多说,体验效果如下: [图片] [图片] [图片] 七、好玩的小程序开发调试利器-自动预览自动预览可以实现编写小程序时快速预览,免去了每次查看小程序效果时都要扫码或者使用小程序助手的麻烦。开发者只需按下快捷键,保持前台运行的微信即可自动唤出或刷新小程序。 要使用自动预览功能,需要配合 6.6.7 及以上的微信客户端版本。 [图片] 八、好玩的小程序开发调试利器-多账号调试通过 菜单 - 工具 - 多帐号调试 可以使用多帐号调试功能,这是做助力活动(需要多人助力)的开发者的福音。 [图片]
2020-08-25 - 分享扫码打开小程序操作实战
这是我们工作过程中的经验总结,现在分享给大家 说明:生成能打开小程序的二维码分为两种:1. 服务端调用接口生成;2. 前端生成二维码 一、服务端调用接口生成 https://api.weixin.qq.com/wxa/getwxacode?access_token=ACCESS_TOKEN 适用于需要的码数量较少的业务场景 生成小程序码,可接受 path 参数较长。 永久有效,可生成的码数量限制为 100,000 https://api.weixin.qq.com/wxa/getwxacodeunlimit?access_token=ACCESS_TOKEN 适用于需要的码数量极多的业务场景。 可接受页面参数较短,生成个数不受限。 永久有效,数量暂无限制 调用分钟频率受限(5000次/分钟) ,如需大量小程序码,预生成 https://api.weixin.qq.com/cgi-bin/wxaapp/createwxaqrcode?access_token=ACCESS_TOKEN 适用于需要的码数量较少的业务场景。 生成二维码,可接受 path 参数较长。 生成个数受限,可生成的码数量限制为 100,000 在小程序中接受参数方式:page onLoad函数中接受 [代码]Page({ onLoad(query) { // 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene const scene = decodeURIComponent(query.scene) } }) [代码] 二、前端生成二维码 操作步骤: 1. 在小程序后台(mp.weixin.qq.com)配置链接 https://mp.weixin.qq.com/wxopen/devprofile?action=get_profile&token=1318106189&lang=zh_CN [图片] 2. 点击添加: [图片] 3. 添加完成后点击上线 4. 在JS中用第三方库将拼接好的URL(比如: https://xxxxx/homeindex?orderId=123)生成二维码 小程序获取二维码中携带的参数: app.js的 onshow/onLoad函数中获取参数,options.query.q是生成二维码的完成URL,后截取URL获取相应参数 [代码]if (!!options.query && !!options.query.q) { let url = decodeURIComponent(options.query.q) if (url.indexOf('orderId') > -1) { let index = url.slice(url.indexOf('orderId')) if (index.indexOf('&') > -1) { let orderObj = index.slice(0, index.indexOf('&')) this.globalData.orderId = orderObj.split('=')[1] } else { this.globalData.orderId = index.split('=')[1] } } } [代码]
2019-08-16 - 小程序分包加载
背景音: - 随着开发功能越来越多, 小程序初次加载速度实在是吃力. 万般煎熬之迹, 只听晴天霹雳一声巨响, 腾讯放了一个大招, 针对小程序做了文件大小限制做了升级. 分包也就此诞生 环境要求: - 微信 6.6 客户端,1.7.3 及以上基础库开始支持,请更新至最新客户端版本,开发者工具请使用 1.01.1712150 及以上版本 在下左木子, 接下来给大家讲解如何运用分包. 废话不多说, 咱看图! 保你看完明明白白: [图片] [图片] [图片]
2019-07-25 - 好物圈导入物品接口src_wxapp_path参数值错误
我通过微信好物圈的“更新或导入物品信息”接口导入物品信息时,一直提示: [代码]{[代码][代码]"errcode"[代码][代码]:9009098,[代码][代码]"errmsg"[代码][代码]:[代码][代码]"product_list[0]src_wxapp_path或src_h5_path路径错误,两者必须包含一个"[代码][代码]}[代码]但是我接口请求数据里面已经有“src_wxapp_path”这个参数了,附上接口请求参数截图: [图片] 其中“src_wxapp_path”参数我试过很多种,"pages/detail/weMall/detail?id=2414"或者"/pages/detail/weMall/detail?id=2414"或者"/detail?id=2414"等,都是返回一样的错误信息。 求解,是什么原因导致的?我应该如何排查这类问题?
2019-04-17