多端统一框架尝试--Taro

 

参考资料

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———————————————————————————————————-

​