当前位置:网站首页>小程序框架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 方法的内容会被直接替换掉,你的逻辑代码不会起作用。
边栏推荐
- What are the top ten securities companies? Is it safe to open an account online?
- 2022鹏城杯web
- 想请教一下,十大券商有哪些?在线开户是安全么?
- 学习笔记6--卫星定位技术(上)
- ConstraintLayout的流式布局Flow
- 非技術部門,如何參與 DevOps?
- uniapp + uniCloud+unipay 实现微信小程序支付功能
- Livedata interview question bank and answers -- 7 consecutive questions in livedata interview~
- pytorch输出tensor张量时有省略号的解决方案(将tensor完整输出)
- Comparative learning in the period of "arms race"
猜你喜欢
Redis如何实现多可用区?
非技术部门,如何参与 DevOps?
Events and bubbles in the applet of "wechat applet - Basics"
In the year of "mutual entanglement" of mobile phone manufacturers, the "machine sea tactics" failed, and the "slow pace" playing method rose
pytorch输出tensor张量时有省略号的解决方案(将tensor完整输出)
Learning note 4 -- Key Technologies of high-precision map (Part 2)
【Vite】1371- 手把手开发 Vite 插件
学习笔记5--高精地图解决方案
Atcoder beginer contest 254 "e BFS" f st table maintenance differential array GCD "
Learning notes 5 - high precision map solution
随机推荐
Interview: how does the list duplicate according to the attributes of the object?
StaticLayout的使用详解
Events and bubbles in the applet of "wechat applet - Basics"
ModuleNotFoundError: No module named ‘scrapy‘ 终极解决方式
[paper reading] ckan: collaborative knowledge aware autonomous network for adviser systems
Workmanager Learning one
【js学习笔记五十四】BFC方式
Completion report of communication software development and Application
The Alipay in place function can't be found, and the Alipay in place function is offline
[paper reading] kgat: knowledge graph attention network for recommendation
【SWT组件】内容滚动组件 ScrolledComposite
数据库中的范式:第一范式,第二范式,第三范式
非技術部門,如何參與 DevOps?
报错:Module not found: Error: Can‘t resolve ‘XXX‘ in ‘XXXX‘
[论文阅读] KGAT: Knowledge Graph Attention Network for Recommendation
Pseudo class elements -- before and after
【DNS】“Can‘t resolve host“ as non-root user, but works fine as root
flink cdc不能监听mysql日志,大家遇到过这个问题吧?
NAS与SAN
Constrained layout flow