小程序踩坑

未分类

• {{}} 不能执行方法，只能处理简单的运算如 “+ - * /”，比如遇到遍历list，每个item的金额需要格式化，只能在js里预先格式化好再setData一遍( ╯□╰ )
  ({{}}不能执行函数方法，只支持基本的简单运算和ES6拓展运算符)
  
  • 解决：
    通过wxs模块解决{{}}中不能执行函数的问题。
• 在使用数据之前，对数据进行计算。

• 如果使用组件，可以使用官方compute扩展

• A页面-->B页面，B页面返回A，如何触发A的刷新，不增加页面层级。 暂时想到的方案：在A页面的onshow事件里写A的初始化数据逻辑。

• 本地资源无法通过 css 获取 可以使用网络图片，或者 base64，或者使用 标签

• 数字键盘用 type="digit"

• 小程序中try...catch语句中catch部分使用throw抛出错误在更外层的try...catch无法捕获到
  

• 坑点： css样式(background-image)不能引用本地图片资源
  解决： 引用线上资源，如果要引用本地图片资源可以用image标签

• 坑点： 使用image标签，图片在模拟器和真机上显示不一致
  解决： image标签有个mode属性，如果遇到图片变形使用aspectFit即可。

• 坑点： 小程序不支持分享链接到朋友圈
  解决： 前端利用canvas来生成一张带有小程序码的图片保存到本地相册，由用户自行发朋友圈转发。建议保存到真机的图片比预览图大一些（用750像素），这样更清晰，更利于二维码识别。

• 坑点： 在某些android机型上1rpx无法显示
  解决： 小程序布局搞了个新的自适应像素单位rpx，对于1rpx显示问题可以使用1px替换1rpx进行显示。

• 坑点： 页面路径的层级，最大不能超过10层
  解决： 通常这个是页面路由设计和跳转的问题，稍微注意一下就可以了。具体看导航api中wx.navigateTo()和wx.redirectTo()的区别。
  我们规定页面路径只能是五层，请尽量避免多层级的交互方式。

• 坑点： 小程序包大小限制最大8M
  解决： 小程序支持分包加载，整个小程序所有分包大小不超过8M，单个分包/主包大小不能超过2M。对于8M以上的需求，可以考虑将部分功能使用H5实现，使用webview进行加载。

• 页面跳转报错：navigateTo:fail url not in app.json

相对路径写法

wx.navigateTo({
    url: "../site/site"
});

绝对路径写法

wx.navigateTo({
    url:"/pages/site/site"
});

url的写法必须是相对路径或绝对路径，并且page要在app.json中注册过，否则会报错

• 小程序跳转外链

  1. 要跳转的链接必须是https的
  2. 需要用web-view组件，web-view组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。（个人类型与海外类型的小程序暂不支持使用。也就是说个人申请的小程序，就别想跳转了）
  3. 需要在小程序后台配置业务域名，也就是你要跳转网页地址的域名。（设置-开发设置 -业务域名）
  4. 配置业务域名时，会要求下载校验文件，该文件需要放置到访问外链地址的根目录下，可能会需要运维协助
  5. 跳转外链后，如果打开的二级页中有新的域名地址，同样需要重复上述步骤