Wechat applet taro learning record

About Taro

JD.COM - Bump lab
Taro yes ⼀ Set follow React Grammatically correct Multi terminal development solve ⽅ case .
Nowadays, the city ⾯ The upper end has various forms ,Web、React-Native、 WeChat ⼩ Programs and other terminals ⼤⾏ Its way , When the business requirements are the same as
When performance is required at different ends , The cost of writing multiple sets of code for different ends is obvious ⾮ often ⾼, At this time, only write
⼀ A set of codes can be adapted to multi terminal functions ⼒ It seems extremely necessary .
send ⽤ Taro, We can only write ⼀ Set of codes , Re pass Taro Compilation of ⼯ have , The source code can be compiled on different ends
（ WeChat / Baidu /⽀ Fu Bao / Bytes to beat /QQ/ JD.COM ⼩ Program 、 Respond quickly ⽤、H5、React-Native etc. ） shipment ⾏ Code for .

Quick start
Quick start ⽂ files ：https://taro-docs.jd.com/taro/docs/GETTING-STARTED.html
node Environmental Science （>=8.0.0）

CLI ⼯ Fixture installation

⾸ First , You need to make ⽤ npm perhaps yarn Global installation @tarojs/cli , Or directly ⽤npx:

#  send ⽤ npm  install  CLI
$ npm install -g @tarojs/cli
# OR  send ⽤ yarn  install  CLI
$ yarn global add @tarojs/cli
# OR  Installed  cnpm, send ⽤ cnpm  install  CLI
$ cnpm install -g @tarojs/cli

term ⽬ initialization
send ⽤ Command to create a template item ⽬

$ taro init myApp

term ⽬⽬ Recording structure
!"" dist Compilation result ⽬ record
!"" config To configure ⽬ record
| !"" dev.js Configuration at development time
| !"" index.js The default configuration
| #"" prod.js Configure when packaging
!"" src Source code ⽬ record
| !"" pages ⻚⾯⽂ Pieces of ⽬ record
| | !"" index index ⻚⾯⽬ record
| | | !"" index.js index ⻚⾯ Logic
| | | #"" index.css index ⻚⾯ style
| !"" app.css term ⽬ General connection ⽤ style
| #"" app.js term ⽬⼊⼝⽂ Pieces of
#"" package.json

 ⼊⼝⽂ Pieces of 
 ⼊⼝⽂ The default is  src ⽬ Recorded  app.js .

term ⽬ organization
following ⽂ Piece organization specifications are recommendations for best practice
All items ⽬ Please put the source code in the item ⽬ root ⽬ record src ⽬ Record , term ⽬ The most basic ⽂ Pieces include

• ⼊⼝⽂ Pieces of as well as ⻚⾯⽂ Pieces of
• ⼊⼝⽂ This is app.js
  ⻚⾯⽂ Pieces are recommended to be placed in src/pages ⽬ Record
  ⼀ A reliable Taro term ⽬ It can be done as follows ⽅ Step in ⾏ organization

!"" config To configure ⽬ record
| !"" dev.js Configuration at development time
| !"" index.js The default configuration
| #"" prod.js Configure when packaging
!"" src Source code ⽬ record
| !"" components Common components ⽬ record
| !"" pages ⻚⾯⽂ Pieces of ⽬ record
| | !"" index index ⻚⾯⽬ record
| | | !"" banner ⻚⾯ index Private components
| | | !"" index.js index ⻚⾯ Logic
| | | #"" index.css index ⻚⾯ style
| !"" utils public ⽅ Faku
| !"" app.css term ⽬ General connection ⽤ style
| #"" app.js term ⽬⼊⼝⽂ Pieces of
#"" package.json

WeChat ⼩ Program transfer taro
https://taro-docs.jd.com/taro/docs/taroize.html
Wechat original ⽣⼩ Program transfer Taro The operation of ⾮ Often simple ,⾸ You must first install the ⽤ npm i -g @tarojs/cli install Taro command
⾏⼯ have , Second, command ⾏ To ⼩ Program items ⽬ The root of the ⽬ record , root ⽬ Record in transit ⾏：
⼩ programmatic ⽬ record , Not cloud function

$ taro convert

You can complete the conversion . The converted code is saved in the root ⽬ Recorded taroConvert ⽂ Clip down . You need to locate
taroConvert ⽬ Recording and holding ⾏ npm install After the command, you can make ⽤ taro build The command is compiled to the generation of the corresponding platform
code .
Put the converted code ⽬ record , Paste the taro⼩ programmatic src⽬ record
Into the ⼊taro⼩ Program ⽬ Recorded ⼊⼝ app.js/app.jsx, add to ⽬ record ⻚⾯

class App extends Component {
    
 config = {
    
 pages: [
 "pages/booksList/booksList",
 "pages/book/book",
 "pages/index/index"
 ],
 ...
 cloud: true
 }

⾥⾯ It will contain wechat ⼩ Procedure and taro Mixed grammar of , Need to install

npm i @tarojs/with-weapp

You can go to taro⾥⽀ Hold wechat ⼩ The syntax of the program .

taro-UI

rely on taro foot ⼿ frame
Into the ⼊ term ⽬⼩ Program ⽬ Recording and holding ⾏

npm install taro-ui

send ⽤ Taro UI

// page.js
import {
     AtButton } from 'taro-ui'
//  Apart from leading ⼊ Required components , It also needs to be ⼿ Dynamic leading ⼊ Component style 
// app.js
import 'taro-ui/dist/style/index.scss' //  Global reference ⼊⼀ Next time 

Beautify the list of books ⻚

import {
     AtCard } from "taro-ui";
class _C extends Taro.Component {
    
 config = {
    
 onReachBottomDistance: 100
 };
 render() {
    
 const {
     books } = this.data;
 return (
 <Block>
 <Text>mp/pages/booksList/booksList.wxml</Text>
 {
    books.map((item, index) => {
    
 return (
 <AtCard extra={
    index} title={
    item.title} thumb={
    item.image}>
 {
    item.summary}
 </AtCard>
 );
 })}
 </Block>
 );
 }
}

⼩ Program ⽀ pay

WeChat ⽀ Pay initiation API⽂ files ：
https://developers.weixin.qq.com/miniprogram/dev/api/open-api/payment/wx.requestPayment.h
tml

wx.requestPayment(Object object)
...
wx.requestPayment({
    
 timeStamp: '',
 nonceStr: '',
 package: '',
 signType: 'MD5',
 paySign: '',
 success (res) {
     },
 fail (res) {
     }
})

⽀ Pay what you need ⽤ Configuration to ：
https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=3_1#

• APPID：appid
  appid It's WeChat. ⼩ Program background APP The only way ⼀ identification , stay ⼩ Program background application ⼩ After the program account , Wechat Club ⾃ Dynamic distribution
  Corresponding appid,⽤ The logo should ⽤. Can be found in ⼩ Program –> Set up –> View in development settings .
• WeChat ⽀ Pay merchant number ：mch_id
  Merchants apply for wechat ⽀ After payment , From wechat ⽀ Pay the assigned merchant collection account
• API secret key ：key
  Transaction process ⽣ Into a signed key , Only retained in the merchant system and wechat ⽀ Pay backstage , Not in ⽹ Spread in the network . The merchant is ready
  Keep it well Key, Do not ⽹ Transmission in the network , It cannot be stored in other clients , Guarantee key It won't leak . Merchants can
  Log in to the wechat merchant platform according to the email prompt to enter ⾏ Set up . It can also be set according to the following path ： WeChat merchant platform
  (pay.weixin.qq.com)–> Account settings –>API Security –> Key settings
• Appsecret: secret
  AppSecret yes APPID Corresponding to ⼝ password ,⽤ Get connected ⼝ transfer ⽤ When the voucher is used ⽤.

Field explanation ：

• AppID （ individual ⼈ No ）
  apply ⼩ Program account ⽂ files ：https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter
  =7_11&index=2
  ⼩ Procedures for applying for certification
  wx.requestPayment(Object object)
  …
  wx.requestPayment({
  timeStamp: ‘’,
  nonceStr: ‘’,
  package: ‘’,
  signType: ‘MD5’,
  paySign: ‘’,
  success (res) { },
  fail (res) { }
  })
  files ：https://developers.weixin.qq.com/miniprogram/introduction/#%E5%B0%8F%E7%A
  8%8B%E5%BA%8F%E7%BB%91%E5%AE%9A%E5%BE%AE%E4%BF%A1%E5%BC%80%E6
  %94%BE%E5%B9%B3%E5%8F%B0%E5%B8%90%E5%8F%B7
• Merchant number
  Merchant platform application address ：https://pay.weixin.qq.com/index.php/core/home/login?return_url=%
  2F
  WeChat ⽀ Pay merchant number , Get the merchant ID and merchant key on wechat ⽀ Pay merchant management platform ,【 In the account ⼼】→【 Merchant letter
  Rest 】 You can get wechat ⽀ Pay merchant number .
  
  stay 【 In the account ⼼】 ‒> 【API Security 】 You can set merchant key
  
  ⼩ Program ⽀ Payment and issuance process ：
  https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=23_9&index=1#menu1.1
  Give me a chestnut ⼦:
  ⽤ Household ⼩ Ming is in an e-commerce ⼩ Purchase on the program ⼀ A bar of soap , From browse 、 Order to ⽀ What kind of process did Fu go through ？

1. Turn on e-commerce ⼩ Program , Search and browse to some carved soap , Click to view details , Find out ⼤⼩、 It's very smooth , Click to place an order directly
2. The price of soap ：0.01 element
3. wx.login obtain ⽤ Temporary login credentials code, Send to back-end server in exchange for openId
4. When placing an order ,⼩ The program needs to ⼩ Ming bought goods Id, The number , as well as ⼩ Ming this ⽤ Household openId Deliver to server
5. The server is receiving goods Id、 The number 、openId after ,⽣ Order data in service period , Go through at the same time ⼀ Fixed Signature Algorithm , To wechat ⽀ Pay to send the request , Get advance note information (prepay_id), At the same time, enter the obtained data again ⾏ Signature of the corresponding rule , towards ⼩ The program side responds to the necessary information ( The required field information will be in the following ⽂ Into the ⾏ Detailed instructions )
6. ⼩ The program side obtains the corresponding parameters , transfer ⽤wx.requestPayment() Launch wechat ⽀ pay , Wake up the ⽀ pay ⼯ Make a stage , Into the ⾏⽀ pay

Development of cloud ⽀ pay
Blog ：
1. With the help of ⼩ Program cloud development implementation ⼩ Program ⽀ Pay function
https://www.jianshu.com/p/ddccf5f95e8c
2.⼩ Program ⽀ pay 003～ Develop with the help of the cloud 10⾏ Code fast implementation ⼩ Program ⽀ pay
https://blog.csdn.net/qiushi_1990/article/details/106679387
Code release
https://developers.weixin.qq.com/miniprogram/introduction/#%E6%8F%90%E4%BA%A4%E5%AE
%A1%E6%A0%B8