学习视频

https://www.bilibili.com/video/BV1yJ411374r?p=27

安装

下载 移动 WEB 多端脚手架 并安装依赖

  1. git clone https://gitlab-dev.yzone01.com/frontend/taro-template
  2. cd taro-template
  3. npm i

编译并预览

进入项目目录开始开发，可以选择小程序预览模式，或者 H5 预览模式，若使用微信小程序预览模式，则需要自行下载并打开微信开发者工具，选择预览项目根目录下 dist/weapp 目录，AppID使用测试号或者项目已经申请的AppID，如何申请参见第三方平台事务。
image.png

微信小程序编译预览模式

  1. # npm script
  2. $ npm run dev:weapp

支付宝小程序编译预览模式

  1. # npm script
  2. $ npm run dev:alipay

H5 编译预览模式

  1. # npm script
  2. $ npm run dev:h5

项目打包

打包后的目录是dist/{环境}，如：小程序打包的目录是： dist/weapp ，H5打包的目录是：dist/h5

打包小程序代码

  1. # npm script
  2. $ npm run build:weapp

打包 H5 代码

移动 WEB 多端脚手架 已经集成sdp发布，可以直接到sdp上发布本项目

  1. # npm script
  2. $ npm run build:h5

快速开发一个页面

移动 WEB 多端脚手架 已经提供首页（文章列表），文章发布，文章详情，个人四个示例页面，业务可以自身情况进行删减。

修改入口文件

项目入口app.tsx文件新增路由
image.png

如果是要在tabBar上显示的菜单，则需要在pages同级的配置tabBar.list上新增一个节点

image.png

新增业务页面

pages目录下新增容器组件xx.tsx，用于发送请求获取后端数据和路由跳转
components-page目录下新增页面组件xx.tsx，用于存放业务页面UI
actions目录下新增xx.ts，用于存放后端api请求
asserts/css/components-page新增xx.scss，用于存放页面局部样式文件
image.png

移动 WEB 多端脚手架的页面和React基本一样，不同的是引用的库来自Taro以及针对当前页面的配置（基于微信小程序的页面配置进行制定，所有平台进行统一），一个普通的页面文件示例如下：

  1. import Taro, { Component } from '@rtarojstaro'
  2. import { View, Text } from '@rtarojs/components'
  3. import { AtButton } from 'rtaroui'
  4. import './index.scss'
  6. export default class Index extends Component {
  7.   config = {
  8.     navigationBarTitleText: '首页'
  9.   }
  11.   componentWillMount () { }
  13.   componentDidMount () { }
  15.   componentWillUnmount () { }
  17.   componentDidShow () { }
  19.   componentDidHide () { }
  21.   render () {
  22.     return (
  23.       <View className='index'>
  24.         <Text>1</Text>
  25.           <AtButton className='button-login' type='secondary'>
  26.           手机验证登陆
  27.         </AtButton>
  28.       </View>
  29.     )
  30.   }
  31. }

其中

  • @rtarojs/taro是Taro 运行时框架，类似React和ReactDom，另外还包括移动端的特有端能力库和一些公共库，如请求库request，页面跳转navigateTo，消息机制等，详见官方API文档
  • @rtarojs/components 是Taro官方以 微信小程序组件库 为标准，结合 jsx 语法规范开发的多端UI库（基础库），使用方式和ReactUI组件一样，详见官方API文档
  • rtaro-ui 即UI 组件库RTaroUI，是一款基于 Taro 框架开发的多端 UI 组件库，使用方式和基础库一样，和基础库互补，如果出现同样的组件，优先使用rtaro-ui。