多端统一框架尝试--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———————————————————————————————————-

​