使用Taro开发总结

688 阅读3分钟

Taro和Taro UI的安装及使用直接看官方文档就好

微信开发者工具下载

Taro安装及使用

Taro UI安装及使用

项目进阶与优化

开发总结

  • 运行时使用yarn dev:weapp,当生成的包大小大于2048kb时真机无法预览或者调试,建议运行命令为NODE_ENV=production taro build --type weapp --watch ( NODE_ENV 为 production 可以开启压缩)
  • 如果你的设计稿不是750、640、828三种尺寸之一(假如设计稿尺寸为375),config/index.js文件下的designWidth要配置为375,同时要在DEVICE_RATIO中添加换算规则,官方文档提供的是2/1(亲测taro 3.x 1/2正常)
  • 如果你的设计稿尺寸不是750、640、828三种尺寸之一(假如设计稿尺寸为375),但是组件库taro-ui的使用的尺寸是750,此时使用taro-ui里的组件,显示的效果是不对的,解决办法安装postcss-px-scale插件,并在config/index.js中配置

{ mini: { postcss: { "postcss-px-scale": { "enable": true, "config": { "scale": 0.5, // 缩放为 375/750 "units": "rpx", "includes": ["taro-ui"] } }, ......

  • 如果你希望部分px单位不被转换成rpx或者rem,最简单的做法就是在px单位中增加一个大写字母,例如Px或者PX这样,则会被转换插件忽略注意:安装的格式化插件会将Px或者PX转化回px
  • 小程序要求tabbar最少2个、最多5个tab,小程序中页面栈最多10层
  • 安全区域适配,苹果官方推出的css函数env()、constant()
  • padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 /
  • padding-bottom: env(safe-area-inset-bottom); / 兼容 iOS >= 11.2 */
  • 注意:env() 跟 constant() 需要同时存在,而且顺序不能换
  • Taro.atMessage的bug(使用时需注意下):假如Page1上用了AtMessage,点击某个按钮进入Page2,Page2里也用了AtMessage,然后从Page2里返回Page1,这时候因为Page2销毁了,所以Page1里的AtMessage也不会工作,建议少用
  • Taro.showToast添加image属性时,图片不显示bug,原因是Taro.showToast中引用了图片,但该图片无法被打包到微信小程序中,解决方法是在文件config/index.js里进行下面处理

copy: { patterns: [ { from: 'src/imgs/', to: 'dist/imgs' } // 指定需要copy的文件 ] } // 使用时image路径 Taro.showToast({ title: '上传成功', image: '/imgs/success.png', duration: 2000 })

  • taro2.x,3.x不支持commonJS写法(测试3.0.5不支持,3.0.16支持),类似于下面这种写法,渲染不出图片

<Image src={require('./assets/delivery.png')} />

  • 通过getCurrentInstance().router.params 获取上个页面传入的参数
  • webview网页跳小程序传值不建议使用.postMessage(向小程序发送消息,会在特定时机(小程序后退、组件销毁、分享)触发组件的message事件)具体使用见 developers.weixin.qq.com/miniprogram…
  • 已经发布的小程序调试打开方法:体验版或者开发版打开调试,再进入发布版小程序就好,或者通过代码打开关闭调试开关

// 打开调试 Taro.setEnableDebug({ enableDebug: true }) // 关闭调试 Taro.setEnableDebug({ enableDebug: false })

  • 开发者工具编译时设置了场景值,要在真机上看到效果,真机调试时选择“扫描二维码真机调试”
  • 升级taro使用yarn global add @tarojs/cli命令,使用npm install -g @tarojs/cli或者taro update self没有效果

公众号

  • 公众号的模板消息跳转小程序,并携带页面参数时,公众号配置页面路径要用pagepath:
    1. 如果小程序未上线,使用pagepath会报错,使用path不报错
    2. 如果小程序已上线,则pagepath和path都不报错,也都能正确跳转到小程序。但使用path的话,路径中携带的参数会失效,所以一定要使用pagepath,微信官方文档中现在也是pagepath
    3. 公众号模板消息

附:

微信小程序平台审核常见被拒情形小程序内用户帐号登录规范调整和优化建议