官方最佳实践

官方物料市场

一些补充

跳过编译的坑

  • Node版本不能太低：node8.7.0&npm5.4.2安装cli失败，使用node9.8.0&npm5.6.0后正常安装。
  • npm镜像源使用taobao或者公司内网镜像，官方给的cnpm建议不用
  • run dev之前保证@tarojs的依赖包全部安装，少了会触发taro-cli的自动安装程序，一直提示你开始安装，停不下来了。
  • 图片的引用必须使用import导入，构建的时候才能复制
  • 不能在 JSX 参数中使用匿名函数
  • 第三方ui库在h5下使用必须增加配置：esnextModules
  • 小程序无法使用html元素，代码检查插件会检查到，可以使用/ eslint-disable react/forbid-elements /禁用掉
  • 箭头函数不使用解构参数

  • 不使用Mix函数

    编码注意事项

  • 自定义组件的Class里都加上参数：addGlobalClass: true

  • 小程序微信登录能力调整，参见公告
  • 微信小程序修改node_modules里的依赖样式，必须重启dev:weapp或者去修改下全局的样式
  • 小程序会缓存页面数据，每次显示都初始化数据，可以使用componentDidShow钩子

  • 开发时首先用基础组件，基础组件不满足的地方，再通过扩展组件补充

    工具

  • mock：使用公司内部搭建的easy-mock来模拟数据，官方站点经常挂。

    1. 创建团队
    2. 创建项目，归属选自己创建的团队
    3. 创建API，可以参考taro-template，详见官方文档或者内网文档
  • nvm：node 版本管理工具，很方便地切换 node 版本
  • nrm：切换npm镜像源
  • VS Code：一款免费开源的现代化轻量级代码编辑器，生态活跃，插件丰富，详见参考资料。值得一提的是【文件-首选项-按键映射】可以映射其他IDE的快捷方式，列出一些常用插件：
    • Prettier：VSCode代码格式化插件，可以识别项目下代码格式化配置.prettierrc，保证团队成员代码格式一致。
    • Chinese (Simplified) Language Pack for Visual Studio Code：适用于 VS Code 的中文（简体）语言包
    • GitLens：增强Visual Studio代码中内置的Git功能。它帮助您通过Git blame注解和代码镜头直观地显示代码作者，无缝地导航和探索Git存储库，通过强大的比较命令获得有价值的见解。
  • 公众号的线上调试对域名有要求，可以使用下面的方式来调试
    • nginx配置域名反代，如果需要和服务端保持一致
  1. server {
  2.         listen       80;
  3.         server_name  wxpay.zmei.me;
  4.         location /client {
  5.             proxy_set_header host $host;
  6.             proxy_pass   http://127.0.0.1:10086;
  7.         }
  8.         location /server {
  9.             proxy_set_header host $host;
  10.             proxy_pass   http://127.0.0.1:3000;
  11.         }
  12.     }

修改后的host：image.png

  • 安装微信并访问前端域名