1. Register wechat public platform and download wechat developer tools

1.1 register an account, download tools and create applets

https://mp.weixin.qq.com/

AppID needs to be recorded

Create the first applet

1.2 release applet

For the applet developer tool, click "Upload" - submit the development version to the server - click "submit for review" - review version - Review in the server background. It takes about a week

It needs to be paid and 2 weeks should be reserved for deployment,

1.3 member management

You need to set up project members to complete the development of a small program by multiple people

1.4 allocate customer service personnel

1.5 development - development management - development settings

a. Record the AppID

Save the AppSecret (applet key) yourself

You can only regenerate at a time

b. ip whitelist can be set,

c. You can set the uploaded encryption key

d. Important: the server domain name needs to be set

request legal domain name * * * the legal domain name for obtaining data

socket legal domain name*

uploadFile legal domain name*

downloadFile legal domain name*

Note: only https or wss domain names can be set. ssl encryption layer is required

1.6 settings - third party settings - plug in management

All third-party plug-ins can be installed here

2. Directory structure of the created project

pages page

There are four files on the index home page

logs log page

utils public js file timestamp to date and time, encapsulating and obtaining data

Main entry file of app.js applet

Configuration file of the main file of app.json applet

Style of app.wxss main file

Configuration file for project.config.json project

sitemap.json site configuration file

3. To create a new page, 4 files need to be generated***

js

wxml is equivalent to html

wxss is equivalent to css

json configuration

The route of this page will be generated automatically by default in app.json

For example:

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/about/about"
  ],

4. Applet label*

view - div

text - span

image - img

block - template does not resolve to any tags, and is generally used for if for

5. Configure bottom navigation***

App.json

"pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/about/about"
  ],
  "tabBar":{
    "color":"#666",
    "selectedColor": "#445356",
    "list":[
      {
        "pagePath":"pages/index/index",
        "text":"home page",
        "iconPath":"images/n-1-a.png",
        "selectedIconPath": "images/n-1.png"
      },
      {
        "pagePath":"pages/logs/logs",
        "text":"journal",
        "iconPath":"images/n-2-a.png",
        "selectedIconPath": "images/n-2.png"
      },
      {
        "pagePath":"pages/about/about",
        "text":"about",
        "iconPath":"images/n-4-a.png",
        "selectedIconPath": "images/n-4.png"
      }
    ]
  },

Note: the bottom navigation can only have 2-5 items, otherwise an error will be reported

Small icons can only use local pictures

6. Page configuration

6.1 global page configuration

pages: Routing

tabBar: bottom navigation

window: Windows

The backgroundTextStyle needs to be configured as dark when the pull-down refresh is required

The name of the navigationBarTitleText applet

"networkTimeout": {
    "request": 10000,  Gets the expiration time of the data
    "downloadFile": 10000  Expiration time of downloaded files
  },
  "debug": true   Do you want to display a prompt

6.2 page configuration of a page

 "navigationBarTitleText"  Page title
"usingComponents"  The name and address of the component used by the configuration
"enablePullDownRefresh" true Enable pull-down refresh 

​

7. Differences between applet and ordinary web page development***

1. Web development rendering thread and script thread are mutually exclusive; In the applet, the two are separated and run in different threads, DOM API and JSCore

2. The applet does not have a complete browser object, so it lacks relevant DOM API and BOM API

3. The execution environment is different, and the web page runs in the browser; The applet runs on the applet's server

4. The labels are different. The applet view text image block

5. The system permissions obtained are different. The applet can obtain mobile phone address book, camera, photos

6. The development cost is different, and the cost of applet development is lower

8. Differences between applets and native apps

1.app needs to be downloaded and installed, occupying mobile phone memory; Small programs do not need to be installed and run out

2. The promotion channels are different, and the applet relies on the basic users of wechat

3. The cost of small program development is low, and the cost of app development is very high

4. The app is faster than the small process, and the app can call more underlying APIs of the mobile phone

9. What is the principle of applet? How do applets work

The running environment of the applet is divided into rendering layer and logic layer, in which WXML template and WXSS style work in the rendering layer and JS script work in the logic layer.

The rendering layer and logic layer of the applet are managed by two threads respectively: the interface of the rendering layer uses WebView for rendering; The logic layer uses JsCore threads to run JS scripts. An applet has multiple interfaces, so there are multiple WebView threads in the rendering layer. The communication between the two threads will be transferred through the wechat client (Native will also be used to refer to the wechat client below), and the network requests sent by the logic layer will also be forwarded through native. The communication model of the applet is shown in the figure below.

10. wxml syntax

10.1 variables

You need to use {}} to render in wxml

To change the data in data, you need to use

this.setData({data name in data: new value to assign})

Wechat applet is a one-way data flow, and direct assignment will not trigger page update rendering

Same as react

10.2 list rendering for

a. Basic for

 <view class="item" wx:for="{{listArr}}">
    <view class="item_con">Log content:{{item.content}}</view>
    <view class="item_time">Log time:{{item.time}}</view>
  </view> 

b. key can be used in Wx: for loop

You can use the id number in the data

<view class="item" wx:for="{{listArr}}" wx:key="id">
    <view class="item_con">Log content:{{item.content}}</view>
    <view class="item_time">Log time:{{item.time}}</view>
  </view> 

Subscripts can be used

<view class="item" wx:for="{{listArr}}" wx:key="index">
    <view class="item_con">Log content:{{item.content}}</view>
    <view class="item_time">Log time:{{item.time}}</view>
  </view>

You can also use * this

<view class="item" wx:for="{{listArr}}" wx:key="*this">
    <view class="item_con">Log content:{{item.content}}</view>
    <view class="item_time">Log time:{{item.time}}</view>
  </view>

be careful:

When looping, the default item represents a row, and index represents the subscript of this row

When looping, you need to use key, otherwise an error will be reported. The key function is to uniquely identify one line to improve performance

c. Nested loop

wx:for-item by item Alias
wx:for-index by index Alias

d. When using a loop, you can write a loop in the block. The block does not need to be resolved to any label, reducing the label level

10.3 judgment conditions

  <view wx:if="{{num < 20}}">Data less than 20</view>
  <view wx:elif="{{num >20}}">Data greater than 20</view>
  <view wx:else>The data is equal to 20</view>

Note: it can also be used in the block tag

11 features of wxss

11.1 wxss has rpx unit, which can adapt to all mobile phone screens

The iPhone 678 is required for ui mapping,

If the drawing is double, the width is 750px,

The ratio of ui diagram to rpx is 1:1,

rpx is recommended for applets

11.2 app.wxss global style,

The page name. wxss style works only on this page

11.3 @import "style file name. wxss" import style

11.4 writing method of inline style:

style="color:{{color}}"

12. Access to data

12.1 domain names with word order across domains need to be configured

[the external chain image transfer fails. The source station may have an anti-theft chain mechanism. It is recommended to save the image and upload it directly (img-movvjqfj-1635585528828) (E: \ 2021-07-26 \ 09 wechat \ day01 \ note \ images \ configuration. bmp)]

Document api network initiate request

wx.request

onLoad: function (options) {
    wx.request({
      url: 'https://www.51houniao.com/product/product/getProductRecommendUser',
      data:{
        desc: false,
        orderBy: "top",
        pageNow: 1,
        pageSize: 20,
        seller_user_id: "4bc4027c645343f09a964b5c2e9f875b"
      },
      method:"post",
      //Request succeeded
      success:(res)=>{
        console.log(res);
        this.setData({tuijianArr:res.data})
      }
    })
  },

13. Hook function

Get data in the hook function of onLoad

14. Use of modules

Output:

//Module output
module.exports = {
  request:pagedata.request
}

introduce:

//Introduce encapsulated request
const fetch = require("../../utils/http");

15. What contents are encapsulated in the request encapsulation in the applet

1. Basic api path
2. Request mode, request path and request parameters
3. Loading effect
4. Using promise avoids callback hell
5. module.exports is used for output, and require is introduced in the page

16. It should be noted that the applet uses the original old project

16.1 when importing an old project, you can use the test number. You need to draw a check mark in the developer tool - details - local settings - do not verify the legal domain name

16.2 for old projects, the version of the debugging basic library in the local setting needs to be reduced, otherwise an error will be reported

17. Events***

17.1 ordinary events

wxml

<button bindtap="testFun">Click trigger event</button>

js

 //Test function
  testFun:function(){
    console.log("The function is running");
    this.setData({num:this.data.num+1})
  },

17.2 parameters to be transferred

wxml pass parameter data key = "value"

<button bindtap="testFun1" data-name="lili">Click to trigger the event and transfer the parameter</button>

js uses ev.currentTarget.dataset. * * to receive parameters

  testFun1:function(ev){
    console.log(ev.currentTarget.dataset.name);
  },

17.3 how does the input box receive data from wxml

wxml

<input type="text"  value="" bindinput="addFun"  />

js, you need to write ev.detail.value

  addFun:function(ev){
    console.log(ev);
    this.setData({heroname:ev.detail.value})
  },

17.4 event binding is divided into bubbling event binding bind * * *, and bubbling preventing event binding catch***

17.5 applet events

type	Trigger condition	Minimum version
touchstart	Finger touch action starts
touchmove	Move after finger touch
touchcancel	Finger touch action is interrupted, such as call reminder and pop-up window
touchend	End of finger touch action
tap	Leave immediately after touching your fingers
longpress	After the finger is touched, it leaves after 350ms. If the event callback function is specified and this event is triggered, the tap event will not be triggered	1.5.0
longtap	Leave after finger touch for more than 350ms (it is recommended to use longpress event instead)
transitionend	Triggered after WXSS transition or wx.createAnimation
animationstart	Triggered at the beginning of a WXSS animation animation
animationiteration	Triggered at the end of one iteration of a WXSS animation
animationend	Triggered when a WXSS animation animation is completed
touchforcechange	On iPhone devices that support 3D Touch, the restart time will be triggered	1.9.90

Event triggered when a bindinput form is entered

Submit submit event

Scroll scroll event

18 hook function***

18.1 page hook function

onLoad page loading***

The first rendering of the onReady page is complete***

onShow display***

onHide hide***

onUnload page***

onPullDownRefresh drop-down refresh hook function*

onReachBottom pull-up load more*

Onshareaappmessage hook function triggered when sharing*

/**
   * Life cycle function -- listening page loading can only be executed once
   */
  onLoad: function (options) {
    console.log('onLoad');
  },
  /**
   * Life cycle function -- the listening page can only be executed once after the initial rendering is completed
   */
  onReady: function () {
    console.log('onReady');
  },

  /**
   * Life cycle function -- monitor page display and execute multiple times
   */
  onShow: function () {
    console.log('onShow');
  },

  /**
   * Life cycle function -- listening for page hiding
   */
  onHide: function () {
    console.log('onHide');
  },
  /**
   * Life cycle function -- listen for page unloading
   */
  onUnload: function () {
    console.log('onUnload');
  },

  /**
   * Page related event handler -- listen to user drop-down actions
   */
  onPullDownRefresh: function () {
  },

  /**
   * Handler for bottom pull event on page
   */
  onReachBottom: function () {

  },

  /**
   * Users click the upper right corner to share
   */
  onShareAppMessage: function () {

  }

Hook function in App.js

attribute	type	Default value	Required	explain	Minimum version
onLaunch	function		no	Lifecycle callback -- listen for applet initialization.	***
onShow	function		no	Lifecycle callback -- listen for applet startup or foreground switching.	
onHide	function		no	Life cycle callback -- listen for the applet to switch to the background.	
onError	function		no	Error listener function.	  ***
onPageNotFound

19. Page route jump***

Routing mode	Trigger timing	Pre routing page	Post route page
initialization	The first page the applet opens		onLoad, onShow
Open new page	Call API wx.navigateTo Use components ``	onHide	onLoad, onShow
Page redirection	Call API wx.redirectTo Use components ``	onUnload	onLoad, onShow
Page return	Call API wx.navigateBack Use components `` The user presses the return button in the upper left corner	onUnload	onShow
Tab Toggle	Call API wx.switchTab Use components `` User switch Tab		Please refer to the following table for various situations
Restart	Call API wx.reLaunch Use components ``	onUnload	onLoad, onShow

19.1 jump to tabbar page. Note: parameters cannot be passed

Jump to the page show, other pages hide

wx.switchTab

or

<navigator open-type="switchTab" url="/pages/index/index">Jump to home page</navigator>

19.2 navigateTo jump

Can't jump to tabbar

The page you jump to has a return button. The essence of the page is displayed and hidden. It will not be unloaded or reloaded

The pages of navigateTo can be returned using navigateBack

19.3 redirectTo jump

You cannot jump to tabbar. There is no return button on the jump page. The page will be unloaded when you jump and needs to be reloaded when you come back

19.4 reLaunch jump

You can jump to any page and transfer parameters. The performance is slightly worse than the previous ones

20 transfer parameters between pages***

20.1 transmitting parameters during route jump

A: Transfer parameters

goAdd:function(){
    wx.navigateTo({
      url: '/pages/add/add?id='+this.data.userid,
    })
  },

B: Receive parameters using the parameter options in onLoad

  onLoad: function (options) {
    console.log(options.id);
  },

20.2 modular parameter transmission

A: Output:

//Module output
module.exports = {
  request:pagedata.request
}

B: Introduction:

//Introduce encapsulated request
const fetch = require("../../utils/http");

20.3 passing parameters using globalData

Defined in App.js

 globalData: {
    userInfo: null,
    heroArr:[
      'Gourd baby','Bumblebee','Tota Li Tianwang'
    ]
  }

Use on other pages

//Introducing App.js
const app = getApp();

//Use global variables defined in app
app.globalData.***

20.4 caching can be used***

A: Set cache information

//Call synchronization to set cache information
    wx.setStorageSync('userSto', this.data.user)

B: Get cache information

 wx.getStorageSync('userSto')

Difference between applet cache and web page cache:**

1. The web page has localStorage and sessionStorage; Applet has only Storage
2. The data stored in the web page cache is a string. When the data goes in and out, it needs to be serialized and deserialized JSON.parse and JSON.stringify; Objects or arrays can be stored directly in the applet's cache

21. Template use of applet

21.1 foundation formwork

Create template file

templates/listtuijian/listtuijian.wxml

<!-- Template for recommended data -->
<template name="listtuijian">
<view>I am the template content</view>
</template>

Use template

<!-- 1.Import template -->
<import src="/templates/listtuijian/listtuijian.wxml" />
  <!-- 2.Use template -->
  <template is="listtuijian"></template>

21.2 template transfer parameters

Create template file

templates/listitem/listitem.wxml

<!-- Template for recommended data -->
<template name="listitem">
<view wx:for="{{tuijianArr}}" wx:key="index">
  {{item.proTitle}}
  </view>
</template>

Use template

<import src="/templates/listtuijian/listitem.wxml" />
  <template is="listitem" data="{{tuijianArr}}"></template>

21.3 include can import the whole code of the object file except < template / > < WXS / >, which is equivalent to copying to the include location

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>


<!-- header.wxml -->
<view> header </view>

22. wxs

WXS (WeiXin Script) is a script language for small programs. Combined with WXML, the structure of pages can be constructed.

wxs uses js content in wxml pages

Create a wxs

pages/list/listwxs.wxs

var msg = "hello wxs";
module.exports.msg = msg;

pages/list/list.wxml

<!-- introduce wxs -->
<wxs src="./listwxs.wxs" module="lw"/>
<view>{{lw.msg}}</view>

23. Simple two-way binding in applet

The applet defaults to one-way data flow, and the supported writing method is

<input module:value="username" />

Expressions used for bidirectional binding have the following limitations:

1. Can only be a single field binding, such as

<input model:value="Value is {{value}}" />
<input model:value="{{ a + b }}" />

Are illegal;

1. At present, the data path, such as

<input model:value="{{ a.b }}" />

Such expressions are not currently supported.

24 get node information on the interface

const query = wx.createSelectorQuery();
    query.select('#myjiedian').boundingClientRect(function(res){
      console.log(res);//Width, height and distance from top, bottom, left and right
    })
    query.exec();

25 use of animation

wxml

<button bindtap="changeview">Click to animate</button>
<view id="con" class="con">animation</view>

wxss

.con{width: 100px; height: 100px; border:2px solid blue;}

js

changeview:function(){
    this.animate("#con",[
      {opacity:1.0,rotate:0,backgroundColor:'#ff0000'},
      {opacity:0.5,rotate:45,backgroundColor:'#00ff00'}

    ],3000,function(){
      console.log("The animation is over");
    })
  },

26. Initial rendering cache,

sure:

• Quickly display the parts of the page that will never change, such as the navigation bar;
• Display a skeleton page in advance to improve the user experience;
• Display customized loading tips;
• Display advertisements in advance, etc.

Static initial rendering cache

The easiest way to enable the initial rendering cache is to add the configuration item "initialRenderingCache": "static" in the json file of the page:

{
  "initialRenderingCache": "static"
}

27. Cold start and hot start of applet

In this way, applet startup can be divided into two situations: cold startup and hot startup.

• Cold start: if the user opens it for the first time, or if the applet is opened again after it is destroyed, the applet needs to be loaded and started again, that is, cold start.
• Hot start: if the user has opened an applet and then opens the applet again within a certain period of time, the applet is not destroyed, but enters the foreground state from the background state. This process is hot start.
• When to cold start:
• 1. First use of applet
• 2. The applet has not been used for a long time
• 3. Continuously prompt that the memory is insufficient, receive the system memory warning, and the applet is actively destroyed
• 4. The applet is releasing a new version

Applet destruction timing

Usually, only when the applet enters the background for a certain time, or the system resources are occupied too much, it will be destroyed. Specifically, it includes the following situations:

• When the applet enters the background, it can maintain the running state for a short period of time. If it does not enter the foreground within this period of time, the applet will be destroyed.
• When the applet occupies too much system resources, it may be destroyed by the system or actively recycled by the wechat client.
  • On iOS, when the wechat client continuously receives the system memory alarm within a certain time interval, it will actively destroy the applet according to certain strategies and prompt the user to "run out of memory, please reopen the applet". Specific strategies will be continuously adjusted and optimized.
  • It is recommended that applets be used when necessary wx.onMemoryWarning Monitor memory alarm events and clean up memory as necessary.

28. Components***

28.1 basic custom components

a. Create component

components/logcom/logcom.js

// components/logcom/logcom.js
Component({
  /**
   * The property list of the component, which receives the value passed from the parent component
   */
  properties: {
  },

  /**
   * The initial data of the component, and the data of the component itself
   */
  data: {
  },
  /**
   * Component method list
   */
  methods: {

  }
})

components/logcom/logcom.json

{
  "component": true,
  "usingComponents": {}
}

components/logcom/logcom.wxml

<text>I am a newly defined subcomponent</text>

components/logcom/logcom.wxss

b. Use the newly created component on the log page

pages/log/log.json

{
  "navigationBarTitleText": "View startup log",
  "usingComponents": {
    "logcom":"/components/logcom/logcom"
  }
}

pages/log/log.wxml

<logcom></logcom>

Note: the component name is hump type. When used in wxml, it needs to be written as middle dash

Other custom components can be used in custom components

The root directory name of the project where the custom component and page are located cannot be prefixed with wx -, otherwise an error will be reported

28.2 transfer of component parameters from parent to child***

New component

components/log/logtest.js

// components/logtest/logtest.js
Component({
  /**
   * List of properties for the component
   */
  properties: {
    username:{
      type:String
    },
    hero:{
      type:Array
    }
  },

  /**
   * Initial data of components
   */
  data: {

  },

  /**
   * Component method list
   */
  methods: {

  }
})

components/log/logtest.json

{
  "component": true,
  "usingComponents": {}
}

components/log/logtest.wxml

<text>Components with parameters{{username}}</text>

<view>Hero list</view>
<view wx:for="{{hero}}" wx:key="index">{{item}}</view>

Used in the page of log

pages/log/log.json

{
  "navigationBarTitleText": "View startup log",
  "usingComponents": {
    "logcom":"/components/logcom/logcom",
    "logtest":"/components/logtest/logtest"
  }
}

pages/log/log.wxml

<!-- Use parametric components -->
<logtest username="{{username}}" hero="{{hero}}"></logtest>

28.3 child parent of widget component

In subcomponents

components/log/logcom.wxml

<button bindtap="changeNum">Click to transfer the data of the child component to the parent component</button>

components/log/logcom.js

// components/logcom/logcom.js
Component({
  /**
   * The property list of the component, which receives the value passed from the parent component
   */
  properties: {

  },

  /**
   * The initial data of the component, and the data of the component itself
   */
  data: {
    num:20
  },

  /**
   * Component method list
   */
  methods: {
    changeNum:function(){
      var myEventDetail = {num:this.data.num};//The parameter to be passed to the parent component
      var myEventOption = {};//Configuration item when the event is triggered
      //Auto trigger custom events for subcomponents
      this.triggerEvent("myevent",myEventDetail,myEventOption);
    }
  }
})

In parent component:

pages/logs/logs.wxml

<logcom bind:myevent = "parentFun"></logcom>

pages/logs/logs.js

 parentFun:function(data){
    console.log("Value received by parent component",data.detail.num);
  },

Summary: the child component triggers a custom event, binds a function to the custom event in the parent component, and receives the value passed from the parent component in the function.

28.4 slots in assemblies

Parent component

<logcom bind:myevent = "parentFun">
  <text>There is no grass anywhere in the world</text>
</logcom>

Subcomponents

<slot></slot>

If a named slot is required,

Component({
  options: {
    multipleSlots: true // Enable multi slot support in the options at the time of component definition
  },
  properties: { /* ... */ },
  methods: { /* ... */ }
})

28.5 life cycle of custom components

Component({
  lifetimes: {
    attached: function() {
      // Execute when the component instance enters the page node tree
    },
    detached: function() {
      // Executes when a component instance is removed from the page node tree
    },
  },
  // The following is an old-fashioned definition method, which can maintain compatibility with the < 2.2.3 basic library
  attached: function() {
    // Execute when the component instance enters the page node tree
  },
  detached: function() {
    // Executes when a component instance is removed from the page node tree
  },
  // ...
})

life cycle	parameter	describe	Minimum version
created	nothing	Execute when the component instance has just been created	1.6.3
attached	nothing	Execute when the component instance enters the page node tree	1.6.3
ready	nothing	Execute after the component is laid out in the view layer	1.6.3
moved	nothing	Executed when the component instance is moved to another location in the node tree	1.6.3
detached	nothing	Executes when a component instance is removed from the page node tree	1.6.3
error	Object Error	Execute whenever a component method throws an error	2.4.1

28.6 behaviors are similar to the mixin of vue or react high-order components

behaviors are features used for code sharing between components, similar to "mixins" or "traits" in some programming languages.

Each behavior can contain a set of properties, data, lifecycle functions, and methods. When a component references it, its properties, data and methods will be merged into the component, and the life cycle function will be called at the corresponding time.

Define the file of behaviors first

module.exports = Behavior({
  data:{
    name:"hello mr"
  },
  methods:{
    beFun:function(){
      console.log("behavior It's running");
    }
  },
  attached:function(){
    console.log("behavior The hook is running");
  }
})

When using, first import and then configure

...
//Introduce behavior
+ const  myBehavior = require("./myBehavior.js");

//Introducing App.js
const app = getApp();
Page({
 + behaviors: [myBehavior],
  data: {
    logs: [],
    userid:10,
    username:"lili",
    hero:["day lily","stand upon one's pantofles","Chinese Dragon"]
  },
  ....

29. Using plug-ins

1. Find and configure the plug-in on the server side

   Background - Settings - third party services - plug-in management, add plug-ins,

2. Introducing plug-ins

   App.json

   "plugins": {
       "DimensionalShow": {
         "version": "1.0.2",
         "provider": "wx0f253bdf656bfa08"
       }
     }
   

3. Page configuration plug-in components used

4. Paste the corresponding content in js and wxml of the page

30 applet subcontracting

The size of the package cannot exceed 2M, and there can be at most 10 subcontracts. The total size of the applet cannot exceed 20M

When you build an applet subcontract project, the build outputs one or more subcontracts. Each applet that uses subcontracting must contain a main package. The so-called main package is to place the default startup page / TabBar page, and some public resources / JS scripts are required for all subcontracts; Subcontracting is divided according to the configuration of developers.

When the applet is started, the main package will be downloaded by default and the page in the main package will be started. When the user enters a page in the subcontract, the client will download the corresponding subcontract and display it after downloading.

Packaging principle

• After declaring the subpackages, they will be packaged according to the subpackages configuration path, and the directories outside the subpackages configuration path will be packaged into the app (main package)
• app (main package) can also have its own pages (that is, the outermost pages field)
• The root directory of a subpackage cannot be a subdirectory within another subpackage
• The tabBar page must be in the app (main package)

Citation principle

• packageA cannot require packageB JS files, but can require app and JS files in its own package; use Subcontract asynchronization It is not subject to this restriction

• Package a cannot import the template of package B, but it can require app and the template in its own package

• Package a cannot use the resources of package B, but can use the resources in app and its own package

• Independent subcontracting

• Subcontract pre Download

• Subcontract asynchronization

31 login process of applet

1. On the applet side, call wx.login to get the code***

2. Use wx.request to call the login interface of your own company's server and pass the code***

3. In the background of the company, the APPID, secret key, code and openid will be verified. If the login is successful, the server database in the background of the company will be called to indicate that the login is successful, and the data of successful login will be returned to the foreground.

4. The foreground needs to save the returned data of successful login to the cache***

5. When obtaining other data, you can bring the login status to the past

6. After logging in, you generally need to obtain user information and use the API of applet wx.getUserProfile to obtain user data

7. If the e-commerce website requires you to fill in your mobile phone number, it will automatically trigger the background interface to associate your wechat id with your mobile phone number

8. When logging in for the first time, it is actually a registration operation in the background; Every other time is a login operation

32 payment of applet

32.1 application for applet payment

Before calling Applet wechat public platform -Function - wechat payment portal application for access to wechat payment

32.2 associated merchant number

The id secret key of the merchant number is used to encrypt the file

32.3 the server needs to configure basic functions such as signature generation, signature verification, encryption / decryption of sensitive information and media file upload to verify whether the merchant number can pay normally

32.4 payment process:

a. Confirm the login status. If you have already logged in, save the login information

b. Use wx.request to call the background interface and pass the token and openid to the background

c. Configure * * signature generation, signature verification and sensitive information encryption / decryption on the server to generate timestamp, random string and signature information. Return to the applet side.

d. The client calls the background interface to generate the order, order number, total price and commodity information.

e. Call wx.requestPayment(). Pull up wechat payment, the payment is successful, the successful information is returned, and the page jumps to the consignment page; If payment fails, a prompt of failure will be returned. The page jumps to the unpaid order page.

Note: reasons for payment failure: possible, signature error, order confirmation failure during payment, abnormal payment parameters, payment timeout...

33. Applet optimization***

33.1 reduce first screen rendering time

Paging processing, touch the bottom to load the next page

Page cache

Initial render cache

Reduce the use of pictures,

33.2 reduce package size

Use components, use templates, encapsulate public content, modularize, and use behavior

Use network pictures to reduce the use of this map

Clear comments and unnecessary code before uploading

33.3 reduce the use of data and setData

33.4 subcontract loading for applet can also use subcontract preloading and independent subcontracting

33.5 it is a skeleton screen. When the network speed is relatively slow, the frame is displayed first

33.6 consider using anti shake throttling, such as text boxes and scrolling events

34 how does the page in WebView jump back to the applet?

First, you need to reference a js file in your html page.

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.0.js"></script>

Then register a click event for your button tag:
$(".kaiqi").click(function(){
wx.miniProgram.redirectTo({url: '/pages/indexTwo/indexTwo'})
});

The redirectTo () here is the same as the wx.redirectTo() page Jump in the applet. It will close the current page and jump to the page.

You can also replace it with navigateTo. Jumping to the page will not close the current page.

1. The applet jumps to the h5 page

The domain name of h5 needs to be configured in the applet background

Only authenticated users can use it

 <web-view src="https://Domain name "> < / Web View > 

3. The applet jumps to another applet

wx.navigateBackMiniProgram({
appId:'',
path: '/pages/index/index',
envVersion: 'trial',
extraData: {
openId: '123'    //The data that needs to be passed to the target applet. The target applet can obtain this data in App.onLaunch and App.onShow
},

35 what should I pay attention to when using webview to load directly?

A: first, you must use the administrator to add the business domain name in the background of the applet;

2, The script to jump to applet on h5 page must be above 1.3.1;

3, Wechat sharing can only be the main name of the applet. If you want to customize the shared content, you need to have the applet version above 1.7.1;

Four, h5 payment can not be appid of WeChat official account, it must be appid of small program, and openid of users must also be user and applet.

Please talk about the comparison of native development applet, wepy and mpvue?

• Personally, if it is a new project and there is no old h5 project migration, consider using the native development of small programs, which has the advantage of fewer pits compared with the third-party framework.
• If some old h5 projects are developed by vue or some h5 projects also need applet development, it is more suitable for wepy or mpvue to migrate or develop. Recently, wepy is almost not updated, so meituan's mpvue is not maintained.
• If the front end of the team is strong, it is no problem to make a framework by yourself.

Uni app is recommended

Primordial

37. What problems does the applet encounter when calling the background interface?

① If the size of the data exceeds the limit, the entire applet will crash unless the applet is restarted;

② The applet cannot directly render the html text of this type of article content, and the display needs the help of plug-ins

Note: the plug-in rendering will slow down the page loading. It is recommended to filter the html of the article content in the background, directly process in the background, and replace the p tag div tag with the view tag. Then let the plug-in do other tags.