The outline of this paper is as follows:
- Introduction to the
- Development environment construction: small program, Android, iOS operating environment construction
- Considerations for its own development
- Small program development considerations
- Considerations for RN side development
- Suggestions developed by Taro
- The end of the
Introduction to the
Taro is a multi-terminal development solution that follows the React syntax specification and is developed and maintained by JINGdong Cave Lab. The goal is to write a set of code that can be compiled using Taro’s compilation tool into code that can run on multiple ends. At present, there are six kinds of adaptation: wechat small program, RN, Alipay small program, Baidu small program, fast application and H5.
Taro is currently available in version 1.3.5.
What we need to know about Taro development are:
✅ 1. Taro uses React and has the same component life cycle. It can write JSX and also supports TSX
✅ 2. NPM/YARN can be used to install and manage third-party dependencies
✅ 3. Support the use of ES7/ES8 or even the newer ES specification, everything can be self-configurable
✅ 4. The CSS precompiler, such as Sass, is supported
✅ 5. Redux is used for status management
✅ 6. MobX status management is supported
✅ 7. Small program API optimization, asynchronous API Promise, etc
Development environment construction: small program, Android, iOS operating environment construction
1. Installation and use:
Taro development requires a Node environment (>=8.0.0).
$NPM install -g@tarojs /cli / $taro init myApp $taro init myApp For example, $NPM run dev: retry p $NPM run dev: RN $NPM run build: retry P $NPM run build: RNCopy the codeSpecial note (dry goods arrangement 🍁🍁), be sure to look carefully:
🍒️ Compiled wechat applet code in the root directory of the project under /dist folder 👇. The compiled RN code is in the project root directory under the /rn_temp folder 👇.
🍒️ when the project is compiled into RN code, a terminal command window automatically pops up, calling port 127.0.0.1:8081, in preparation for the RN code to be packaged into android and iOS application entry files.
🍒️ When running the project, the project automatically installs the React-native command and updates package.json. Therefore, you can call the react-native command directly from the project root directory.
🍒️ After the RN code is compiled, call the react-native upgrade command in the root directory of the project to generate the shells of the Android application and iOS application, namely, /android and/iOS folders.
When debugging RN code after 🍒️, it corresponds to the above two application folder projects respectively.
🍒️ Directly debugging the two files in the Android and iOS environment may be problematic, because the default entry file of the two projects generated above is index, which needs to be mapped to rn_temp/index of RN code.
The iOS app needs to change one thing:
/ / in the ios/taroDemo/AppDelegate. M file modified jsBundleURLForBundleRoot: @"rn_temp/index"
Copy the codeAndroid apps need to change two things:
/ / 1. Android/app/SRC/main/Java/com/taroDemo MainAppliaction. Java file @ Override protected StringgetJSMainModuleName() {
return "rn_temp/index"; } // 2. Android /app/build.gradle file project.ext.react = [entryFile:"rn_temp/index.js"
]
Copy the code6 modification of ️, partners can happily develop Taro code 😄, but to see the specific effect of our development code to install different debugging environment… ✊ ✊
Small program
Just install the wechat developer tools, Taro compiled and printed wechat applet application code in the /dist directory below the root directory of the project.
🙆 is a more convenient place is micro channel small program debugging, we change the Taro development code, micro channel small program side can preview the effect in real time.
android
The android environment requires the JDK and Android Studio to be installed first.
🎈JDK: 1.8 is required. 1.9 or later is not supported. React Native only supports JDK 1.8.
🎈Android Studio: There is nothing special to say about this. Please follow the instructions in the Taro document “React Native Application Development Process”.
👎 is inconvenient for us to change the Taro code, rn_temp/ below will compile the new code in real time, but the Android and iOS applications can not preview the effect in real time, you must restart the application. Should be a real-time preview of the effect of the program, the follow-up to find and then add up ✊.
iOS
⚠️Xcode installation, note that the version is compatible with the MAC version. RN also supports at least version 9.4 of Xcode.
MacOS10.13.6 is known to be incompatible with Xcode10.2.1 and above, and Xcode9.4 is confirmed to be successful. You are advised to install 9.4.
Considerations for its own development
No matter what development we use Taro, do not ignore the attention ⚠️, partners to watch… All dry goods 🍃🍃
✅✅✅ it is recommended to first read the Taro documentation for the Taro specifications.
⚠️ 1. React/Nerv difference: React can use… Extend the operator to pass attributes, but you can’t do that in Taro. Such as:
const props = {firstName: 'Plus', lastName: 'Second'}
return<Greeting {... props} />Copy the codeThis operation will report an error.
⚠️ 2. React/Nerv the difference is that Taro does not support using dot notation and runtime specified types to reference components, such as
⚠️ 3. Taro supports PropTypes checks as React, and uses them the same way as React.
⚠️ 4. Asynchronism of setState: This is another difference between Taro and React. The setState of React is not always asynchronous. In Taro’s case, after setState, the objects you provide are added to an array and then merged when the next Eventloop is executed.
⚠️ 5. Events in Taro are named in a hump, which is different from all lowercase of small programs.
⚠️ 6. To prevent events from bubbling, you must explicitly use e.topPropagation ().
⚠️ 7. Use px and % as the recommended size units in Taro. By default, Taro will convert all units.
⚠️ 8. By default, 750px is used as the conversion standard. If the design document is not 750px, you need to set it in the project configuration config/index.js.
⚠️ 9. Child element selectors (.a >.b) can only be used between View components and their children.
⚠️ 10. It is recommended to write styles using only the class selector.
Small program development considerations
If your project is developed using Taro and should be adapted to the application side, you should pay attention to the following holes… Dry yet 🍂 🍂
⚠️ 1. Generally, there are two types of event parameters: bind and anonymous function parameters.
<Button onClick={(e) => this.deleteRow(id, e)}>Delete Row</bButton>
<Button onClick={this.deleteRow.bind(this, id)}>Delete Row</Button>
Copy the codeAnonymous function parameters have been supported since Taro v1.2.9. Note: On the applet side, using anonymous functions, especially in loops, takes up more memory and is slower than using BIND for event passing.
** Suggestion: ** Use bind to pass parameters
Considerations for RN side development
If your project is developed using Taro and needs to be adapted to RN, you should pay attention to the following pits… Dry yet 🍂 🍂
✅✅✅ suggest reading the Taro documentation before developing.
To support RN:
⚠️ 1. Flex layout must be used.
⚠️ 2. Style selectors only support class selectors, not combinators.
⚠️ 3. You need to write CSS attribute styles supported by RN, because RN styles basically implement a subset of CSS, and attribute names are not completely consistent, so pay attention.
⚠️ 4. Box-shadow, React Native is not well supported (ios only and with limited support).
⚠️ 5. CSS property shorthand: Only values supported by React Native are accepted. For example, the background property accepts only the backgroundColor.
⚠️ 6. Taro has problems with border handling when compiled to RN, the abbreviation of border{Top,Right,Bottom,Left} (shorthands) is not supported because borderStyle cannot be applied to a single border. What can be used is:
/** * // NOTE Taro does not support setting a style on one side or the other. * border: 0 style color; border-bottom-width: 1px; */ // sass @mixin border($dir.$width.$style.$color) {
border: 0 $style $color;
@each $d in $dir {
#{border-#{$d}-width}: $width;}}Copy the code⚠️ 7. React Native does not support background-image. You can use the Image components, cooperate with Flex layout implementation, specific reference: thekevinscott.com/background-…
⚠️ 8. Position: Fixed React Native is not supported.
⚠️ 9. Animation and Transform React Native animations are not supported.
⚠️ 10. React Native differs from the default values of Flex layout related properties for H5/ applets.
⚠️ 11. The realization of gradient needs to rely on the third party package of React-Native Linear-gradient.
⚠️ 12. The font-weight style supports only 400, 700, bold, and normal values.
⚠️ 13. Obtain the device ID from the react-native third-party package react-native device-info.
Suggestions developed by Taro
✌️✌️ this section is compiled Taro multi-terminal development of some suggestions, friends enjoy.
As there are still some irreconcilable differences between different platforms, Taro provides the following solutions in order to better realize Taro’s cross-platform development:
🍒 1. Built-in environment variable process.env.taro_env
It is used to determine the current compilation type. Currently, there are six values, including P/swan/Alipay/H5 / Rn/TT, which can be used to write codes in different environments. During compilation, only the codes that do not belong to the current compilation type can be deleted. Typically used for cross-platform code with less complex logic:
if (process.env.TARO_ENV === 'weapp') {
require('path/to/weapp/name')}else if (process.env.TARO_ENV === 'h5') {
require('path/to/h5/name'} // JSXrender () {
return (
<View>
{process.env.TARO_ENV === 'weapp' && <ScrollViewWeapp />}
{process.env.TARO_ENV === 'h5' && <ScrollViewH5 />}
</View>
)
}
Copy the code🍒 2. Unified interface files
Developers can amend the file into the naming of the original file name + end type forms, different side file code external to keep uniform interface, and references are still import the original filename file, Taro, at compile time will tell, depending on the type of need to compile the platform will load the file changes for type filename of the file with corresponding to the end, In this way, different ends can load corresponding files.
🍒 3. Suggestions on style
Given the limitations of compatibility with RN and applets, basic style development should follow the following three guidelines:
- Using Flex layout
- Write based on BEM style
- Override the component style with the style property
🍒 4. Conditional compilation of style code
// Specify the platform reserved: /*#ifdef %PLATFORM% */Style code /*#endif */// Specify the platform to exclude: /*#ifndef %PLATFORM% */Style code /*#endif */
Copy the codeMultiple platforms can be separated by Spaces.
🍒 5. Use the class selector when writing styles
The end of the
All right. Currently use Taro to develop small programs, RN, step on the pit is mainly these, I hope to be helpful to my friends, support more to a praise ！！！！
Finally, I wish you all a happy development!