Wechat applet

Main contents and functions of documents ：

• component --------------------------------------------------------- Component folder

  • navBar ---- Bottom assembly
    • navBar.js ---- Of the bottom assembly JS Code
    • navBar.json ---- The configuration file of the bottom component
    • navBar.wxml ---- Of the bottom assembly HTML Code
    • navbar.wxss ---- Of the bottom assembly CSS Code

• pages ----------------------------------------------------------------- Page folder

  • index ---- home page
    • index.js ---- On the front page JS Code
    • index.json ---- The profile on the home page
    • index.wxml ---- On the front page HTML Code
    • index.wxss ---- On the front page CSS Code

• public ----------------------------------------------------------------- Picture folder

• utils ----------------------------------------------------------------- Tools folder

  • api.js ---- control API Folder
  • md5.js ---- Tools - MD5 Encrypt file
  • timestamp.js ---- Tools - Time stamp file

• app.json ----------------------------------------------- Set global basic data, etc

• app.wxss ---------------------------------------------------- Public style , It can be done by

  import Import more

• project.config.json ------------------------------------------ Public style , It can be done by

Wechat applet life cycle
onLoad()： Trigger when the page loads .
onShow()： Page shows / Trigger when entering the front desk .
onReady()： Triggered when the page is first rendered .
onHide()： Page hidden / Trigger when cutting into the background .
onUnload()： Trigger when the page is unloaded .

How to encapsulate data requests
1、 Encapsulation interface

 project /utils/api.js
// Make the request Promise encapsulation 
const fetch = ({
    url,data}) => {
    
	// Print the information requested by the interface 
	console.log('[step1]API Interface :${url}');
	console.log("[step2]data  The ginseng : ");
	console.log(data);

	// return Promise
	return new Promise((resolve,reject) => {
    
		wx.request({
    
			url:getApp().globalData.api + url,
			data:data,
			success:res => {
    
				//  Handling when successful 
				if(res.data.code==0) {
    
					console.log("[step3] The request is successful : ");
					console.log(res.data);
					return resolve(res.data);
				}else{
    
					wx.showModal({
    
						title:' request was aborted ',
						content:res.data.message,
						showCancel:false
					});
				}
			},
			fail:err => {
    
				// Handling of failure 
				console.log(err);
				return reject(err);
			}
		})
	})
}
/** * code Exchange for openID * @data { * jsCode - wx.login() Back to code * } */
export const wxLogin = data => {
    
	return fetch({
    
		url:"tbcUser/getWechatOpenId",
		data:data
	})
}

2、 Call interface 

 project /pages/login/login.js
import {
    
	wxLogin,
}from'../../utils/api.js'

3、 Use interface 

 project /pages/login/login.js
wxLogin({
    
	jsCode:this.data.code
}).then(
	res => {
    
		console.log("[step4] Return to successful processing : ");
		console.log(res.data);
	},
	err => {
    
		console.log("[step4] Return failed processing : ");
		console.log(err);
	}
)

Page data transfer

adopt url Portability parameter , stay onLoad() Pass through options obtain url Parameters on ：

//  These two paragraphs are in HTML and JS The code in 
<navigator url="../index/index?userId={
    {userId}}"></navigator>
onLoad:function(options) {
    
	console.log(options.userId);
}

adopt Storage To pass parameters ：

wx.setStorageSync('userId','jsliang');
wx.getStorageSync('userId');

WXML Pass data to JS

login.wxml
<text bindtap="clickText" data-labelId="{
    {userId}}"> Click transfer data to JS</text>
login.js
clickText(e){
    
	console.log(e.currentTarget.labelid)
}

Component calls pass parameters

// Component receives data ：component-tag-name
Component({
    
	properties:{
    
		// It's defined here innerText attribute , Property values can be specified when the component is used 
		innerText: {
    
			type:String,
			value:'default value',
		}
	}
})
// Use the page definition of the component  json
{
    
	"usingComponents": {
    
		"component-tag-name":"../component/component"
	}
}
// Pages that use components HTML Code 
<view>
	// Here is a reference to a custom component 
	<component-tag-name inner-text="Some text"></component-tag-name>
</view>

Pass parameters through interface calls

Load performance optimization method
1、 adopt this.$preload() Preload the second page that the user may click
2、 Component pages , Parts that appear more than twice are encapsulated into components
3、 Extract shared CSS style
4、 Optimize pictures ：TinyPNG

Wechat applet and native app APP、Vue、H5 differences
Advantages of wechat applet
1、 Don't need to download
2、 Open faster
3、 The development cost is lower than the original cost APP
Disadvantages of wechat applet
1、 More restrictions . Page size cannot exceed 1M, Cannot open more than 5 A hierarchical page
2、 A single pattern . The internal components of the applet have been built , The style cannot be modified
3、 The promotion scope is narrow . Can't get out of wechat , Can't run into the circle of friends
Wechat applet VS Native APP
Wechat applet has low development cost 、 Low acquisition cost 、 Advantages of no download
Wechat applet VS H5
1、 Depending on the environment . One can run in a variety of mobile browsers . A non complete browser that can only be in wechat .
2、 Development costs vary . A problem may occur in various browsers . One can only run in wechat
Wechat applet VS Vue
Wechat applet seems to be a castrated version Vue

Principle of wechat applet
It's essentially a single page application , All page rendering and event handling , All in one page
The architecture is data-driven ,UI And data separation , Update of all pages , We need to change the data to achieve
Wechat applet is divided into two parts ：webview and appService.
among webview Mainly used to show UI,appServer To handle business logic 、 Data and interface call .
They happen in two processes , Through the system layer JSBridge Achieve communication , Realization UI Rendering of 、 The handling of events

wxml And standard html Similarities and differences
wxml be based on xml Design , Tags can only be used in wechat applets , Out of commission html The label of