您好,欢迎访问代码之道!登录后台查看权限
  • 欢迎大神光临
  • 有朋自远方来 不亦悦乎

taro+vue快速上手微信小程序

码叔博客 dz2015 2021-06-12 90 次浏览 0个评论

截图-TaroVueDemo.png

致设计

设计稿尺寸建议:1334*750,也就是建议用iPhone6为标准,其他手机会做自适应。
设计资源:  Sketch/Axure,iconfont

致开发:

IDE:VSCode或者其他web项目IDE都可以,建议装ESLINT插件以强制代码风格。
vue:种种原因,尽量还是用vue2的语法(选项风格)来写,参考文档 vue

基础组件:标签和微信基础组件同名,没有html的标签,可以把view标签等价div标签 ,参考文档:Taro组件, 微信组件

快速开始

demo放在aro-ui-vue3-demo的mini分支,注意是mini分支哦,将代码用git克隆下来。

安装依赖:

yarn install

微信开发工具+node+yarn的环境是必备的,node版本v12 LTS或者V14 LTS。改用yarn而不是npm,主要是利用yarn.lock锁定版本,如果你习惯npm, 也可以用npm install试试,但是不确保能直接用;WIN10理论上也可以直接安装依赖,如果不行建议使用WSL,因为很多脚本都是在linux下测试验证的。

进入开发:

yarn dev:weapp

同时微信开发工具打开dist/weapp,这时候修改代码会自动重新编译刷新微信开发工具预览。

编译release版本:

yarn build:weapp

编译release版本,我默认配置是开启对所有页面进行优化,taro-ui-vue少量组件可能用了一些特性会导致编译失败, 如果非得用这样的组件,可以在config/prod.js修改mini: {prerender: {exclude}},以排除无法通过优化编译的页面。


已有 90 位网友参与,快来吐槽:

发表评论