calamus
calamus
冬天从这里夺去的,春天会交还与你。

 

参考资料

Taro官网
Taro GitHub
Taro资源汇总 Taro-UI

我的demo代码

github地址

Taro介绍和尝试心得

  • Taro是基于React语法规范开发的多端统一的框架,一套代码可以生成微信/百度/支付宝等小程序、H5、RN等。
  • 主要是用于生成小程序,官方的很多组件库也是和微信小程序类似,生成H5有很多组件不支持很多API有限制,
    我还用了Taro-UI组件库,几本需求还是能满足的,其他的功能和坑还在填,会陆续更新

demo搭建

# 安装
$ npm install -g @tarojs/cli 
$ yarn global add @tarojs/cli
$ taro init myApp
# npm 5.2+ 也可在不全局安装的情况下使用 npx 创建模板项目
$ npx @tarojs/cli init myApp
# 微信小程序
$ npm run dev:weapp 
$ npm run build:weapp 
# 仅限全局安装 
$ taro build --type weapp --watch 
$ taro build --type weapp 
# npx 用户也可以使用 
$ npx taro build --type weapp --watch 
$ npx taro build --type weapp
# 百度小程序
$ npm run dev:swan 
$ npm run build:swan 
# 仅限全局安装 
$ taro build --type swan --watch 
$ taro build --type swan 
# npx 用户也可以使用 
$ npx taro build --type swan --watch 
$ npx taro build --type swan
# 支付宝小程序
$ npm run dev:alipay 
$ npm run build:alipay 
# 仅限全局安装 
$ taro build --type alipay --watch 
$ taro build --type alipay 
# npx 用户也可以使用 
$ npx taro build --type alipay --watch 
$ npx taro build --type alipay
# 字节跳动小程序
$ npm run dev:tt 
$ npm run build:tt
 # 仅限全局安装 
$ taro build --type tt --watch 
$ taro build --type tt 
# npx 用户也可以使用 
$ npx taro build --type tt --watch 
$ npx taro build --type tt
# H5
$ npm run dev:h5 
# 仅限全局安装 
$ taro build --type h5 --watch 
# npx 用户也可以使用 
$ npx taro build --type h5 --watch
# build
$ npm run build:h5 
# 仅限全局安装 
$ taro build --type h5 
# npx 用户也可以使用 
$ npx taro build --type h5
# React Native
$ npm run dev:rn 
# 仅限全局安装 
$ taro build --type rn --watch 
# npx 用户也可以使用 
$ npx taro build --type rn --watch

Taro-UI

# 安装
$ npm install taro-ui
# 或者使用自定义主题版本
$ npm install taro-ui@next

踩坑记录

1.生成的H5文件打开后空白,地址报错

修改config中index.js文件中H5配置的地址 ‘/’ 为 ‘./’

2.修改端口

启动H5的时候报错,发现是端口被占用,修改默认端口
在config ==》 index.js ==》h5配置

  devServer: {port: 10011,host: "0.0.0.0"}

—————————————————————————To Be Continue———————————————————————————————————-

 

posted on 2019-01-15 09:57  calamus  阅读(536)  评论(0编辑  收藏  举报