<> Interface configuration of applet

Site map What pages can be displayed in wechat search , What can't
Project configuration
Global business logic
Global applet configuration
Global style
Folder where pages are stored
Folder for storing tools

<>app.json to configure

pages Page configuration
That page is on the front , Which page opens by default
window Window configuration
1,backgroundTextStyle– Background text color
2,navigationBarBackgroundColor– Navigation bar color
3,navigationBarTitleText– Navigation bar title
4,navigationBarTextStyle– Navigation bar text color
be careful :.json The file cannot be annotated , The last option cannot have a comma

<> Basic grammar

<> label
<view></view> <text></text>
<> Text display
<> conditional rendering
<view wx:if="{{flag}}"> display </view> <view wx:elif="{{num>5}}"> display 5</view> <view
wx:elif="{{num>2}}"> display 2</view>
<> List rendering
<view wx:for="{{list}}" wx:key="index"> {{index+1}}---{{item}} </view> <view
wx:for="{{list}}" wx:for-item="myitem" wx:for-index="myindex" wx:key="myindex"
> {{myitem}} </view>
<>template Template
<template name="student"> <view> <view> name :{{name}}</view> <view> Age :{
{age}}</view> </view> </template>
<> Import template --import
<import src="./stu.wxml" /> <template is="student" data="{
<> Introduction content --include
<include src="./prc.wxml" />
<> assembly


<>api --wx start

2,wx.getStorageSync(k) Get local storage
3,wx.setStorageSync(k,v) Set up local storage
}) Network request
5,wx.setNavigationBarTitle({title:“xxx”}) Set title

<> event --bind

1,bindtap -- Easy
2,bindinput -- The value of the form changes
3, Monitoring events (.wxml):
4, Event response letter
number (.js)
5, Parameters of the event
1. form --js Through the e.detail.value
2. Other components
<view bindTap="showMsg" data-msg="i love" ></view>
3. stay js In the
showMsg(e){ //e.target.dataset.msg Get parameters }
4. Event function
onReachBottom Touch the bottom
onPullDownRefresh Drop down refresh
.json file "enablePullDownRefresh": true, Allow drop down refresh "backgroundTextStyle":"dark"
Drop down text style light dark
<> Navigation
<navigator />
1,navigate Default jump
2,navigator Switch applet
<navigator target="miniProgram" open-type="navigate" app-id="xxxx">
Open bound applet </navigator>
3,switchTab Toggle bottom bar
4,redirect redirect
5,relunch restart
6,navigateBack return
7,exit sign out
tabBar Configuration of
1,color Text color
2,selectedColor Select text color
3,list list
"pagePath":" Page address ", "text":" home page ", "iconPath":" Picture address ", "selectedIconPath":" Select image address "
js switch
1,wx.navigateTo({url:“xxxx”}) Jump
2,wx.navigateBack() return
3,wx.redirectTo({url:“xxxx”}) redirect
4,wx.switchTab({url:“xxxx”}) Toggle bottom bar
Page reference
1, adopt url Chuan Shen
2, Take parameters
onload(options){ console.log(options.name,options.age) }
<> The life cycle of applets

1,onLaunch -- Program start
2,onShow -- The program switches to the front desk
3,onHide -- The program switches to the background
4,onError -- Program error

<> The life cycle of a page

1,onLoad -- Page loading
2,onReady -- Rendering finished
3,onShow -- display
4,onHide -- hide
5,onUnload -- uninstall redirect|navigateBack trigger

<> How to subcontract an applet

app.json Configuring subcontracting and subcontracting preloading , Generally, the page corresponding to the bottom column is used as the main package, and the corresponding secondary page is used as the subcontract , The size of the package 2M maximum 16M, Subpackages cannot refer to each other , A child package can reference a master package app Content of

<> Applet's npm How is it constructed

1,npm initialization
2, When installing –S --production
3, Details allowed npm plug-in unit
4, Tool building npm

<> How to update an item of data in array by applet

use ES6 New attributes can be created dynamically [“list[0]”]

<> Components of applets

<> Component application

1, Defining components -- Component folder (cell)—cell.wxml|cell.wxss|cell.js|cell.json
2, On the json Register components in
"using":{ "cell":"/components/cell/cell" }
3, On the wxml Use in

<> The slot of the component

1, objective -- Components can be nested
2, Incoming slot content
<cell><view> Define slot content </view></cell>
3, Receive at component
<view> <slot></slot> </view>
<> Named slot

1, definition
<view slot="head"></view> <view slot="foot"></view>
2, Using slots
<slot name="head"> <slot name="foot">
3, In the options Options
options:{ // Multiple slot multipleSlots:true, },
<> Style isolation

options Options
options:{ // Multiple slot multipleSlots:true, styleIsolation:"isolated", // Style isolation mode
--isolated quarantine ,--apply-shared Share page styles to components ,--shared Two way sharing },
<> Outer class

1, Configuration in component
externalClasses:[“cell-class”],//01 Define external classes Can be defined externally by the component ,class Use in component content , Passed on class

2, Component
<view class="cell-class"></view>
3, Pass in
<cell cell-class="mycell">
4, On the page css Written in mycell
<> Parameter transfer of components

1, Page parameter passing
<cell url="/xx/xx/xx"><cell>
2, Defined in the component
properties:{ url:{type:String,value:''} }
3, Using parameters
<> constructor


<>pageLifeTimes: The life cycle of a page

1,show display
2,hide hide
3,resize Change size

<>lifetimes Life cycle of components

1,created establish
2,attached Insert to page
3,ready Rendering finished
4,move move
5,detached remove
6,error error

<>behaviors blend
var myBehavior = require('my-behavior') Component({ behaviors: [myBehavior],
<>observers: monitor
observers: { 'numberA, numberB': function(numberA, numberB) { // stay numberA perhaps
numberB When set , Execute this function this.setData({ sum: numberA + numberB }) } }
<> Pure data field

1, Pure data fields are some that are not used for interface rendering data field , Can be used to improve page update performance
2, use
options: { pureDataPattern: /^_/ // Specify all _ The first data field is a pure data field }, data: { a: true,
// General data field _b: true, // Pure data field },
<>options option
<>externalClasses:[“cell-class”] Outer class

<>properties Incoming data

<>data Initial data

<>methods method

<> Sign in


<> add to open-type And events
<button open-type="getUserInfo" bindgetUserInfo="bindGetUserInfo" ></button>
bindGetUserInfo User authorization is required , Get the user's : head portrait , user name
wx.login({}) Get one code information , adopt ajax User information , and code Send to server

<> The server

appid+Appscecret+code Send to wechat server
After response from wechat server open-id,session_key
1,open-id— Unique identification of users id
2, Yes open-id Add the user name + Nickname? Save to the database of your own server

<> Wechat server

take open-id,session_key Send to server

<> Wechat login process —— summary

1, stay wx.login() Function obtain code
2,open-type=“getUserInfo” Get the user's head type and nickname information
4, Get the code adopt ajax Send to server
5, Server through appid+scecret+code exchange for openid and session_key
6, You can put openid+ Store nickname to server
7, User information can be customized after it is successfully stored in the server Login status

©2019-2020 Toolsou All rights reserved,
How to prevent Mac put to sleep ? Tell you 4 This is an effective way be based on C# Students' grades / mis solve element-ui The drop-down box of has a value but cannot be selected Student information management system source code -C language VR,AR and MR The difference between these technologies 【 Data structure and algorithm 6】 Stack implementation of comprehensive calculator utilize python Yes monkey Automatic log analysis Laya Wechat games sub package loading Alibaba enterprise email smtp set up ( practice )【Java Details of knowledge points 3】 Serializable and Deserialize