当前位置:网站首页>Applet framework taro
Applet framework taro
2022-07-05 10:48:00 【Code Bruce Lee】
Taro
1、 Introduce
It's following React Multi terminal development solution of syntax specification
Can write a set of code , Re pass Taro The compiler of , Compile the code separately, which can be on different ends ( Wechat applet 、H5、RN) Running code
2、 characteristic
2.1 React Grammar style
with React Consistent idea of componentization , Life cycle and React bring into correspondence with , Support at the same time JSX grammar
2.2 Quickly develop wechat apps
Support use npm / yarn Third party installation management relies on
Support ES6/7/8 Even newer ES standard
Support CSS Precompiler
Support Redux Conduct status management
Applet API Optimize
2.3 Support multi terminal development and transformation
Can support conversion to Wechat applet as well as H5 End
3、 Environment building
$ cnpm i -g @tarojs/cli
$ taro init myApp01
4、 Compile using the
4.1 Wechat applet
$ npm run dev:weapp
$ npm run build:weapp
4.2 Baidu applet
$ npm run dev:swan
$ npm run build:swan
4.3 Alipay applet
$ 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、 form
https://nervjs.github.io/taro/docs/composition.html
6、 matters needing attention
6.1 Applet development tool settings
You need to set the shutdown ES6 turn ES5 function , Error may be reported when opening
You need to set the style auto completion when uploading code is turned off , Error may be reported when opening
You need to set to turn off code compression uploading , Error may be reported when opening
7、 Project directory structure
├── dist 【 Compile results directory 】
├── config 【 The configuration directory 】
| ├── dev.js 【 Configuration at development time 】
| ├── index.js 【 The default configuration 】
| └── prod.js 【 Configure when packaging 】
├── src 【 Source directory 】
| ├── pages 【 Page file directory 】
| | ├── index 【index Page directory 】
| | | ├── index.js 【index Page logic 】
| | | └── index.css 【index Page style 】
| ├── app.css 【 Project general style 】
| └── app.js 【 Project entry documents 】
└── package.json
7.1 Entrance file app.js
// -> The entry file is also react The style of writing
// -> Reference dependency required @tarojs/taro, This is a Taro The basic framework of the scheme , Here we inherit Component Component base class
import Taro, { Component } from ‘@tarojs/taro’
import Index from ‘./pages/index’
import ‘./app.less’
class App extends Component {
// -> The configuration here mainly refers to the global configuration of wechat applet , When compiling into an applet , This part of the configuration will be separated into app.json, And compiled into other end , It will also have other functions
config = {
pages: [
‘pages/index/index’
],
window: {
backgroundTextStyle: ‘light’,
navigationBarBackgroundColor: ‘#fff’,
navigationBarTitleText: ‘WeChat’,
navigationBarTextStyle: ‘black’
}
}
// -> The entry file is inherited from Component Component base class , It also has a component lifecycle , But because of the particularity of the entry file , His life cycle is not complete
componentWillMount () {
// effect -> The program is loaded
// explain -> In wechat applet, this life cycle method corresponds to app Of onLaunch
}
componentDidMount () {
// effect -> The program is loaded
// explain -> In wechat applet, this life cycle method corresponds to app Of onLaunch, stay componentWillMount After execution
}
componentDidShow () {
// effect -> The program is displayed
// explain -> In wechat applet, this life cycle method corresponds to onShow, stay H5 It is also implemented in
}
componentDidHide () {
// effect -> Program is hidden
// explain -> In wechat applet, this life cycle method corresponds to onHide, stay H5 It is also implemented in
}
componentDidCatchError () {
// effect -> Error listening function
// explain -> In wechat applet, this life cycle method corresponds to onError
}
componentDidNotFound () {
// effect -> There is no listener function on the page
// explain -> In wechat applet, this life cycle method corresponds to onPageNotFound
}
// stay App Class render() Function doesn't work
// Do not modify this function
render () {
return (
)
}
}
Taro.render(, document.getElementById(‘app’))
// Be careful
// 1. Wechat applet onLaunch Usually with a parameter options, stay Taro You can pass in all life cycles and common event methods this.$router.params Access to the , It also applies to other ends
// 2. The entry file needs to contain a render Method , Generally return to the first page of the program , But it is worth noting that it is not in the entry file render Method to write logic and reference other pages 、 Components , Because compile time render The content of the method will be directly replaced , Your logic code won't work .
边栏推荐
- Based on shengteng AI Yisa technology, it launched a full target structured solution for video images, reaching the industry-leading level
- Pseudo class elements -- before and after
- 变量///
- 【tcp】服务器上tcp连接状态json形式输出
- iframe
- [observation] with the rise of the "independent station" model of cross-border e-commerce, how to seize the next dividend explosion era?
- 2022年T电梯修理操作证考试题及答案
- Broyage · fusion | savoir que le site officiel de chuangyu mobile end est en ligne et commencer le voyage de sécurité numérique!
- 字符串、、
- Taro advanced
猜你喜欢
Blockbuster: the domestic IDE is released, developed by Alibaba, and is completely open source!
Learning notes 5 - high precision map solution
Do you really understand the things about "prototype"? [part I]
LSTM应用于MNIST数据集分类(与CNN做对比)
Review the whole process of the 5th Polkadot Hackathon entrepreneurship competition, and uncover the secrets of the winning projects!
[paper reading] ckan: collaborative knowledge aware autonomous network for adviser systems
【js学习笔记五十四】BFC方式
九、磁盘管理
2022年化工自动化控制仪表考试试题及在线模拟考试
2022年危险化学品生产单位安全生产管理人员特种作业证考试题库模拟考试平台操作
随机推荐
Implementation of wechat applet bottom loading and pull-down refresh
Completion report of communication software development and Application
DGL中的消息传递相关内容的讲解
沟通的艺术III:看人之间 之倾听
web安全
中职组网络安全C模块全漏洞脚本讲解包含4个漏洞的脚本
dsPIC33EP 时钟初始化程序
Go-3-the first go program
LDAP overview
非技術部門,如何參與 DevOps?
ModuleNotFoundError: No module named ‘scrapy‘ 终极解决方式
Scaffold development foundation
Go language learning notes - first acquaintance with go language
SAP ui5 objectpagelayout control usage sharing
vite//
In the year of "mutual entanglement" of mobile phone manufacturers, the "machine sea tactics" failed, and the "slow pace" playing method rose
【DNS】“Can‘t resolve host“ as non-root user, but works fine as root
Honing · fusion | know that the official website of Chuangyu mobile terminal is newly launched, and start the journey of digital security!
MFC宠物商店信息管理系统
SAP UI5 ObjectPageLayout 控件使用方法分享