当前位置:网站首页>小程序框架Taro
小程序框架Taro
2022-07-05 10:21:00 【码小龙.】
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 方法的内容会被直接替换掉,你的逻辑代码不会起作用。
边栏推荐
- WorkManager学习一
- Have the bosses ever encountered such problems in the implementation of flinksql by Flink CDC mongdb?
- 字节跳动面试官:一张图片占据的内存大小是如何计算
- [vite] 1371 - develop vite plug-ins by hand
- Activity jump encapsulation
- 非技术部门,如何参与 DevOps?
- 分享.NET 轻量级的ORM
- pytorch输出tensor张量时有省略号的解决方案(将tensor完整输出)
- SLAM 01.人类识别环境&路径的模型建立
- Customize the left sliding button in the line in the applet, which is similar to the QQ and Wx message interface
猜你喜欢
SAP ui5 objectpagelayout control usage sharing
AD20 制作 Logo
@SerializedName注解使用
学习笔记6--卫星定位技术(上)
Universal double button or single button pop-up
微信核酸检测预约小程序系统毕业设计毕设(8)毕业设计论文模板
【js学习笔记五十四】BFC方式
微信核酸检测预约小程序系统毕业设计毕设(7)中期检查报告
How does redis implement multiple zones?
Learning Note 6 - satellite positioning technology (Part 1)
随机推荐
Constraintlayout officially provides rounded imagefilterview
[paper reading] ckan: collaborative knowledge aware autonomous network for adviser systems
Constrained layout flow
Excerpt from "sword comes" (VII)
想请教一下,十大券商有哪些?在线开户是安全么?
How did automated specification inspection software develop?
官网给的这个依赖是不是应该为flink-sql-connector-mysql-cdc啊,加了依赖调
Write double click event
【JS】数组降维
@SerializedName注解使用
Usage differences between isempty and isblank
面试:List 如何根据对象的属性去重?
Apple 5g chip research and development failure? It's too early to get rid of Qualcomm
Today in history: the first e-book came out; The inventor of magnetic stripe card was born; The pioneer of handheld computer was born
StaticLayout的使用详解
SqlServer定时备份数据库和定时杀死数据库死锁解决
vscode的快捷键
WorkManager學習一
括号匹配问题(STL)
2022鹏城杯web