小程序框架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 方法的内容会被直接替换掉,你的逻辑代码不会起作用。
相关文章
- 小程序web开发框架-weweb介绍
- 最全三大框架整合(使用映射)——struts.xml和web.xml配置
- 《shiro框架》
- 第三百二十一节,Django框架,发送邮件
- 第三百一十六节,Django框架,中间件
- web框架本质
- RPC框架Thrift例子-PHP调用C++后端程序
- gecko框架概述
- Spring框架开发实践--视频
- RPC框架Thrift例子-PHP调用C++后端程序
- .NET框架
- 微信小程序UI框架有哪些?
- 【SpringBoot笔记06】SpringBoot集成log4j2日志框架
- 【项目实战】并发编程之Java集合框架中的一个线程安全的队列实现 ——BlockingQueue入门介绍
- 【Canal】数据同步的终极解决方案,阿里巴巴开源的Canal框架当之无愧!!
- CodeIgniter框架开发的统计程序源代码开放
- .NET 程序如何获取图片的宽高(框架自带多种方法的不同性能)
- 全面解析C语言多媒体开源框架GStreamer
- Pytest自动化测试框架-权威教程09-捕获标准输出及标准错误输出
- TensorFlow:实战Google深度学习框架(二)实现简单神经网络
- Hadoop(13):MapReduce框架原理之MapReduce工作流程