Basic knowledge of wechat applet cloud development literacy chapter (I) document structure

File structure

Global file

app.js file

This is the script code file of the applet , You can listen on this file , And deal with some of the lifecycle of the applet （ For example, some global variables ）

In this app.js In the file , Need to use App() function , To register the program .

demonstration ：

//app.js

App({

onLaunch: function () {

// When applet initialization is complete , Will trigger onLaunch（ Global trigger only once ）

},

onShow: function () {

// When the applet starts , Or enter the foreground display from the background , Will trigger onShow

},

onHide: function () {

// When the applet enters the background from the foreground , Will trigger onHide

},

onError: function (msg) {

// When a script error occurs in an applet , perhaps api When the call fails , Will trigger onError With error message

},

other:function(){

// Global function , Can be used by others on the project js A file called

},

globalData:{

// Global object

},

})

app.json file

The global configuration file of the applet

pages

To specify which pages the applet consists of

Accept an array , Each item is a string . Each item represents the 【 route + file name 】 Information , The first item in the array represents the initial page of the applet . Add... To the applet / Reduce pages , All need to pages Array to modify .

The file name does not need to be suffixed , Because the framework will automatically find the path .json,.js,.wxml,.wxss To integrate the four files .

for example ：

{

"pages":[

"pages/index/index",

"pages/logs/logs"

]

}

remarks ：pages You just need to write wxml Path to file , Other documents do not need to be written

window

Status bar for setting up applets 、 Navigation bar 、 title 、 Window background color

Example ：

{

"window":{

"navigationBarBackgroundColor": "#ffffff",

"navigationBarTextStyle": "black",

"navigationBarTitleText": " Wechat interface function demonstration ",

"backgroundColor": "#eeeeee",

"backgroundTextStyle": "light"

}

}

tabBar

If our app is more than one tab application （ There is... At the bottom or top of the client window tab Column can switch pages ）, Then we can pass tabBar Configuration item assignment tab Column performance , as well as tab The corresponding page displayed when switching .

Tip： Jump through the page （wx.navigateTo） Or page redirection （wx.redirectTo） The page arrived , Even if it is defined in tabBar Pages in configuration , The bottom... Will not be displayed tab bar .

tabBar Is an array , It can only be configured with a minimum of 2 individual 、 most 5 individual tab,tab Sort by array .

Example ：

{

"tabBar": {

"color":"#818181",

"selectedColor":"#0082D7

"borderStyle":"white",

"list": [{

"pagePath": "pages/index/index",

"text": " home page ",

"iconPath":"images/tabbar/[email protected]",

"selectedIconPath":"images/tabbar/[email protected]"

}, {

"pagePath": "pages/me/me",

"text": " Set up ",

"iconPath":"images/tabbar/[email protected]",

"selectedIconPath":"images/tabbar/[email protected]

}]

}

}

networkTimeout

You can set the timeout of various network requests .

Example

{

"networkTimeout": {

"request": 10000,

"downloadFile": 10000

}

}

debug

It can be opened in developer tools debug Pattern , In the developer tool's console panel , Debug information to info Given in the form of , The message is Page Registration of , Page routing , Data update , Events trigger . Can help developers quickly locate some common problems .

Example ：

{

"debug": false

}

app.wxss file

Define the global style

Basically with css almost , Not much here

Inside a page

xxx.js

Logical main function

Page({

})

Example ：

//index.js

Page({

data: {

text: "This is page data."

},

onLoad: function(options) {

// Do some initialize when page load.

},

onReady: function() {

// Do something when page ready.

},

onShow: function() {

// Do something when page show.

},

onHide: function() {

// Do something when page hide.

},

onUnload: function() {

// Do something when page close.

},

onPullDownRefresh: function() {

// Do something when pull down.

},

onReachBottom: function() {

// Do something when page reach bottom.

},

onShareAppMessage: function () {

// return custom share data when user share.

},

// Event handler.

viewTap: function() {

this.setData(

text: 'Set some data for updating view.'

})

},

customData: {

hi: 'MINA'

}

})

Example ：

Page({

onShareAppMessage: function () {

return {

title: ' Custom share title ',

desc: ' Custom sharing description ',

path: '/page/user?id=123'

}

}

})

xxx.wxml

Use the components provided by wechat to replace html Elements

Example ：

xxx.wxss

Applet style , And css The style is basically similar , There is no repetition here

In the wxss Edited in the file css style , Can only be used on the current page

xxx.json

Every applet page can also use .json File to configure the window representation of this page . Page configuration ratio app.json Global configuration is much simpler , Just settings app.json Medium window Content of configuration item , Configuration items in the page will overwrite app.json Of window The same configuration item in .

Page .json Only... Can be set window Related configuration items , To determine the window performance of this page , So there's no need to write window This key

Example ：

{

"navigationBarBackgroundColor": "#ffffff",

"navigationBarTextStyle": "black",

"navigationBarTitleText": " Wechat interface function demonstration ",

"backgroundColor": "#eeeeee",

"backgroundTextStyle": "light"

}