小程序框架Taro

Taro
1、介绍
是遵循React语法规范的多端开发解决方案
可以书写一套代码,再通过Taro的编译工具,将代码分别编译出可以在不同端(微信小程序、H5、RN)运行的代码
2、特性
2.1 React语法风格
采用与React一致的组件化思想,生命周期与React保持一致,同时支持JSX语法
2.2 快速开发微信小程序
支持使用npm / yarn安装管理第三方依赖
支持ES6/7/8甚至更新的ES规范
支持CSS预编译器
支持Redux进行状态管理
小程序API优化
2.3 支持多端开发转化
可以支持转换到 微信小程序 以及 H5 端
3、环境搭建

$ cnpm i -g @tarojs/cli

$ taro init myApp01
4、编译使用
4.1 微信小程序

$ npm run dev:weapp

$ npm run build:weapp
4.2 百度小程序

$ npm run dev:swan

$ npm run build:swan
4.3 支付宝小程序

$ npm run dev:alipay

$ npm run build:alipay
4.4 H5

$ npm run dev:h5

$ npm run build:h5
4.5 React Native

$ npm run dev:rn
5、组成
https://nervjs.github.io/taro/docs/composition.html
6、注意事项
6.1 小程序开发工具设置
需要设置关闭 ES6 转 ES5 功能，开启可能报错
需要设置关闭上传代码时样式自动补全，开启可能报错
需要设置关闭代码压缩上传，开启可能报错
7、项目目录结构

├── dist 【编译结果目录】

├── config 【配置目录】

| ├── dev.js 【开发时配置】

| ├── index.js 【默认配置】

| └── prod.js 【打包时配置】

├── src 【源码目录】

| ├── pages 【页面文件目录】

| | ├── index 【index 页面目录】

| | | ├── index.js 【index 页面逻辑】

| | | └── index.css 【index 页面样式】

| ├── app.css 【项目总通用样式】

| └── app.js 【项目入口文件】

└── package.json
7.1 入口文件 app.js

// -> 入口文件也是react风格的写法

// -> 需要引用依赖 @tarojs/taro，这是 Taro 方案的基础框架，在这里我们继承了 Component 组件基类

import Taro, { Component } from ‘@tarojs/taro’

import Index from ‘./pages/index’

import ‘./app.less’

class App extends Component {

// -> 这里的配置主要参考微信小程序的全局配置而来，在编译成小程序时，这一部分配置将会被抽离成 app.json，而编译成其他端，亦会有其他作用

config = {

pages: [

‘pages/index/index’

],

window: {

backgroundTextStyle: ‘light’,

navigationBarBackgroundColor: ‘#fff’,

navigationBarTitleText: ‘WeChat’,

navigationBarTextStyle: ‘black’

}

}

// -> 入口文件继承自 Component 组件基类，它同样拥有组件生命周期，但因为入口文件的特殊性，他的生命周期并不完整

componentWillMount () {

// 作用 -> 程序被载入

// 说明 -> 在微信小程序中这一生命周期方法对应 app 的 onLaunch

}

componentDidMount () {

// 作用 -> 程序被载入

// 说明 -> 在微信小程序中这一生命周期方法对应 app 的 onLaunch，在 componentWillMount 后执行

}

componentDidShow () {

// 作用 -> 程序展示出来

// 说明 -> 在微信小程序中这一生命周期方法对应 onShow，在 H5 中同样实现

}

componentDidHide () {

// 作用 -> 程序被隐藏

// 说明 -> 在微信小程序中这一生命周期方法对应 onHide，在 H5 中同样实现

}

componentDidCatchError () {

// 作用 -> 错误监听函数

// 说明 -> 在微信小程序中这一生命周期方法对应 onError

}

componentDidNotFound () {

// 作用 -> 页面不存在监听函数

// 说明 -> 在微信小程序中这一生命周期方法对应 onPageNotFound

}

​

// 在 App 类中的 render() 函数没有实际作用

// 请勿修改此函数

render () {

return (



)

}

}

Taro.render(, document.getElementById(‘app’))

​

// 注意

// 1.微信小程序中 onLaunch 通常带有一个参数 options，在 Taro 中你可以在所有生命周期和普通事件方法中通过 this.$router.params 访问到，在其他端也适用

// 2.入口文件需要包含一个 render 方法，一般返回程序的第一个页面，但值得注意的是不要在入口文件中的 render 方法里写逻辑及引用其他页面、组件，因为编译时 render 方法的内容会被直接替换掉，你的逻辑代码不会起作用。