微信小程序避坑指南 小鱼儿 2022-01-20 06:23 749阅读 0赞 ## 1. 基础库和微信版本对应关系 ## 详见官方文档:[developers.weixin.qq.com/miniprogram…][developers.weixin.qq.com_miniprogram] ## 2. 视频上覆盖文字和图片 ## 用cover-view 和 cover-image <video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" controls="{ {false}}" event-model="bubble"> <cover-view class="controls"> <cover-view class="play" bindtap="play"> <cover-image class="img" src="/path/to/icon_play" /> </cover-view> <cover-view class="pause" bindtap="pause"> <cover-image class="img" src="/path/to/icon_pause" /> </cover-view> <cover-view class="time">00:00</cover-view> </cover-view> </video>复制代码 [官方API][API] ## 3. live-player 渲染失败 access denied ## live-pusher目前只对部分品类的应用开放 申请了服务类目之后,在接口权限中选择对应功能: 设置完如果还不行,尝试下重启开发展工具,重新编译,重启真机上的微信。 ## 4. 直播视频全屏方法 ## <live-player id="myVideo" src="rtmp://xxxxxxx" controls="{ {false}}" autoplay bindstatechange="statechange" binderror="error"> <cover-view class="controls"> <cover-view class="play" bindtap="play"> <cover-image class="img" src="/path/to/icon_play" /> </cover-view> <cover-view class="pause" bindtap="pause"> <cover-image class="img" src="/path/to/icon_pause" /> </cover-view> <cover-view class="time">00:00</cover-view> </cover-view> </live-player>复制代码 wxss中设置: position: fixed; height: 100%; width: 100%;复制代码 app.json文件配置导航样式自定义: { "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "navigationStyle": "custom" } }复制代码 ## 5. 小程序包的大小限制 ## 目前小程序分包大小有以下限制: * 整个小程序所有分包大小不超过 8M * 单个分包/主包大小不能超过 2M ## 6. wafer2-clien-sdk的wxTunnel.js中void(0) ## /\* undefined 为window下一个属性,在某些浏览器下比如IE7,可以被赋值改变 void() 用于计算一个表达式,永远返回undefined;用来代替undefined亦可减少字符数 \*/ const noop = () => void(0); ## 7. 用小程序内嵌webview做支付package值丢失 ## 在webview内跳转到小程序传递支付参数时,注意package字段 var data = [ 'timeStamp=' + data.timeStamp, 'nonceStr='+data.nonceStr, 'package='+ encodeURIComponent(data.package), 'signType='+data.signType, 'paySign='+data.sign, ] wx.miniProgram.navigateTo({ url: '/pRoom/wxpay/wxpay?' + data.join('&') })复制代码 package字段官方文档如下: package String 是 统一下单接口返回的 prepay_id 参数值,提交格式如:prepay_id=*复制代码 此时package值为prepay\_id=djasdy2xxxxxx, 带一个等于号 需要对此值进行编码,到小程序端再进行解码,不然传到小程序端package字段值只有prepay\_id=, 后面的id值会丢失 onLoad(data) { wx.requestPayment({ 'timeStamp': data.timeStamp, 'nonceStr': data.nonceStr, 'package': decodeURIComponent(data.package), 'signType': data.signType, 'paySign': data.paySign, 'success':function(res){} }) }复制代码 ## 8. 怎么合理使用微信登录能力 ## 平台分别提供多种方式实现微信登录: **1. 调用**[**wx.login**][wx.login]**接口,静默获取openid** 适用场景:无需使用用户头像、昵称、Unionid信息 **2. 使用**[ **open-data** ][_open-data_]**(小程序)或者**[**开放数据域**][Link 1]**(小游戏)的方式展示用户信息(无需用户授权)** 适用场景:需要在前端“展示”用户头像、昵称信息,但不需要获取Unionid **3.使用**[**button**][button]**(小程序)或**[**UserInfoButton**][UserInfoButton]**(小游戏)组件,用户点击后弹窗请求用户授权** 适用场景:需要获取用户头像、昵称、Unionid等基本信息 开发建议 **第一步:获取openID** 当用户访问小程序时,先通过wx.login,获取用户openID 。这时无需弹框授权,开发者拿到 openID 可以建立自身的帐号 ID。 **第二步: 使用open-data方式或开放数据域方式展示头像昵称** 如需要在前端展示用户头像、昵称信息, 使用open-data 方式或者开放数据域的方式展示用户信息 **第三步:根据实际使用场景,使用组件,引导用户登录** 在关键操作中,如必须获取用户头像、昵称、UnionID信息,可根据第一步获取的openID判断是新用户还是旧用户: 如果是旧用户,可以直接登录,也可定期使用wx.getUserInfo更新用户的信息; 如果是新用户,使用button(小程序)或UserInfoButton(小游戏)组件,在用户点击后弹窗请求获取用户基本信息。 [Unionid机制详见这里][Unionid] ### 会话密钥 session\_key 有效性 ### 开发者如果遇到因为 session\_key 不正确而校验签名失败或解密失败,请关注下面几个与 session\_key 有关的注意事项。 1. [wx.login][wx.login 1] 调用时,用户的 session\_key 可能会被更新而致使旧 session\_key 失效(刷新机制存在最短周期,如果同一个用户短时间内多次调用 [wx.login][wx.login 1],并非每次调用都导致 session\_key 刷新)。开发者应该在明确需要重新登录时才调用 [wx.login][wx.login 1],及时通过 [code2Session][] 接口更新服务器存储的 session\_key。 2. 微信不会把 session\_key 的有效期告知开发者。我们会根据用户使用小程序的行为对 session\_key 进行续期。用户越频繁使用小程序,session\_key 有效期越长。 3. 开发者在 session\_key 失效时,可以通过重新执行登录流程获取有效的 session\_key。使用接口 [wx.checkSession][]可以校验 session\_key 是否有效,从而避免小程序反复执行登录流程。 4. 当开发者在实现自定义登录态时,可以考虑以 session\_key 有效期作为自身登录态有效期,也可以实现自定义的时效性策略。 如果使用自己服务器定义的登录态失效时间,则不需要wx.checkSession ## 9. launchMiniProgram 暂不能用 ## 微信jssdk jweixin.js中有 launchMiniProgram 接口,用来调起小程序指定页面,但目前暂未开放 ## 10. wxss 不支持嵌套选择器 ## ## 11. 小程序navbar高度 ## ## 12. cover-view的fixed定位支持 ## 基础组件1.9.9起支持,对应安卓和ios的微信客户端是6.6.1版本 ## 13. 聊天区域如何滚动到最底部 ## 设置属性 scroll-top: 999999即可 但在ios中有bug,动态设置scroll-top时,cover-view滚动区域会消失不见。目前官方正在修复。[developers.weixin.qq.com/community/d…][developers.weixin.qq.com_community_d] ## 14. cover-view内嵌button放在live-player上但button不显示? ## button标签内必须有内容,不能为空标签,不能内容空的cover-view标签,否则button都不显示! 可以内嵌cover-image标签,如下: <!--分享按钮--> <cover-view class="share_wrap" hover-class="active"> <!--button内必须有内容,不能为空标签,否则不显示--> <button open-type="share" class="share_btn"> <cover-image class="share" src="../../static/img/room/share_icon.png"></cover-image> </button> </cover-view>复制代码 .share_btn{ background: rgba(0,0,0,0); border: none; }复制代码 目前:2018-10-24 官方已修复,正在等待微信版本更新[developers.weixin.qq.com/community/d…][developers.weixin.qq.com_community_d 1] # 15. webview跳转问题 # **场景:** 小程序A页面--webview X页面--小程序B页面--webviewX页面 **问题:** 如果让从小程序B 页面跳转回webview页面时,保证: 1. webview刷新 2. webview的回退按钮,点击一次即跳转回小程序A页面,而不是点击两次 webview页面: onShow(){ let session = qcloud.Session.get() this.setData({ url: `https://m.xxxx.com/recharge?platform=mp&skey=${session.skey}` }) } 小程序B页面: var pages = getCurrentPages() var prevPage = pages[pages.length - 2] // 必须跳转到一个和之前页面不一样的url,这样navigateBack后才会刷新页面 prevPage.setData({ url: `https://m.xxxx.com/recharge` }) wx.navigateBack()复制代码 之所以在webview中用onshow,是因为每次进入webview页面都会执行,这样就保证webview前后访问的是同一个URL,保证点击左上角返回时,只需点击一次就返回到最初的小程序A页面。 如果webview前后的URL不一致,则从小程序B跳转到webview,点击左上角会先返回最初的webview,然后再返回小程序A页面 ## Q&A:webview登录态问题 ## 传小程序的skey到webview,由webview后台进行判断登录态并主动种植登录态 ## 16. onTabItemTap不能触发? ## 这个官方文档描述不清晰,第一次切换tab时,并不会触发此接口,再一次点击自身tab才会触发 ## 17. button去掉边框 ## button::after{ border: none; }复制代码 ## 18. 背景渐变 ## cover-view不支持背景渐变,其他非原生标签支持 ## 19. wx:key的值不需要大括号 ## wx:key的值比较特殊,不需要用Mustache 语法 用唯一的id可以提高渲染速度,并不是所有情况index都适用 ## 20. js和wxs内的正则 ## wxs内的语法不是js语法,所以对于生成正则对象,需要用到小程序自带的函数getRegExp var regExp = getRegExp("^http:", "i")复制代码 而次函数在js中是不存在的,js文件中需要重新使用js语法: var regExp = new RegExp("^http:", "i")复制代码 ## 21. wxs中的语法注意项 ## 不支持let ## 22. cover-view的scroll-topbug ## ios动态改变cover-view的scroll-top值,会导致cover-view滚动区域消失不见 详见:[developers.weixin.qq.com/community/d…][developers.weixin.qq.com_community_d] ## 23. setData也要认真看文档 ## 可以直接修改对象或者数组内的某个字段的值,甚至可以直接设置尚未在data中定义的值! 甚至可以在setData的键值内增加变量: this.setData({ [`imgs[${key}]`]: img })复制代码 注意:此时\`\`需要用\[\]扩起才行 这样可以做到数据的部分更新和渲染,无疑是对性能提升有帮助的 ### ### ## setData优化: ## ### 对于cover-view卡顿的,终极优化指南是:不用cover-view!!!想办法分离原生组件和非原生组件 ### ## 24. 防止源码泄露 ## ## 25. cover-image不支持高度自适应、懒加载和高斯模糊 ## 所以需要在js中动态计算高度渲染到页面 懒加载可以自己写,但要注意setData的坑 高斯模糊没办法,想办法用非原生组件image代替 ## 26. cover-view环形文字不同颜色的实现 ## ## Demo: ## ## 实现文字环绕 ## **代码片段: wechatide://minicode/YMbuaqmR7c3Q** 代码实现: 预期效果: 实际效果: 正确实现方式: 参考论坛:[developers.weixin.qq.com/community/d…][developers.weixin.qq.com_community_d 2] ### 但对于有图片也需要环绕的,不适合这种情况: ### 预期效果: 实际效果: # 27. websocket问题 # **体验版支持ws协议,需要打开调试模式** 如果websocket是连接的域名非IP地址,则不能通过连接代理更改电脑的host来指定socket域名的解析地址 如果有测试环境,建议: 1. 建一个专有的测试环境websocket域名 2. 直接使用测试环境的IP地址访问websocket > 转载:https://cloud.tencent.com/developer/article/1367130 [developers.weixin.qq.com_miniprogram]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fframework%2Fclient-lib%2Fclient.html [API]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fcomponent%2Fcover-view.html%3Fsearch-key%3Dcover [wx.login]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fapi%2Fapi-login.html [_open-data_]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fcomponent%2Fopen-data.html [Link 1]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminigame%2Fdev%2Fdocument%2Fopen-api%2Fdata%2Fwx.getUserInfo.html [button]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fcomponent%2Fbutton.html [UserInfoButton]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminigame%2Fdev%2Fdocument%2Fopen-api%2Fuser-info%2Fwx.createUserInfoButton.html [Unionid]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fframework%2Fopen-ability%2Funion-id.html [wx.login 1]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fapi%2Fopen-api%2Flogin%2Fwx.login.html [code2Session]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fapi%2Fopen-api%2Flogin%2Fcode2Session.html [wx.checkSession]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fapi%2Fopen-api%2Flogin%2Fwx.checkSession.html [developers.weixin.qq.com_community_d]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fcommunity%2Fdevelop%2Fdoc%2F00068c7b5e0790b96387400585b800 [developers.weixin.qq.com_community_d 1]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fcommunity%2Fdevelop%2Fbuglist [developers.weixin.qq.com_community_d 2]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fcommunity%2Fdevelop%2Fdoc%2F000a402c99849820f2470d50551000
还没有评论,来说两句吧...