app.js

It is the initialization script of the program, in which you can monitor the life cycle of the applet, apply for global variables, call the api, etc.

Use App() to register an applet in this script, and you cannot register multiple applets.

App({
    onLaunch: function(){},//Monitor initialization
    onShow: function(){},//Monitor display (enter the front desk)
    onHide: function(){},//Monitor hidden (enter the background: press Home to leave wechat)
    onError: function(msg){},//Monitoring error
    //Here are the custom global methods and variables
    globalFun: function(){},
    globalData: 'I am global data'
})

app.json

Is the global configuration of the applet. It is mainly divided into five parts:

(1) pages: page groups

(2) Window: frame style (status bar, navigation bar, title, window background color)

(3) tabBar: bottom menu

(4) networkTimeout: network timeout setting

(5) Debug: turn on debug mode

page.json is set separately for the page, and the global settings of app.json are cascaded.

app.wxss

It is a common stylesheet of the whole applet, similar to common.css in website development

pages

The first item is the first page by default. There will be four different types of files in a folder. js is a script, json is a configuration file, wxss is a style sheet file, wxml is a page structure file, where json and wxss files are not required (the default is to inherit app's json and wxss)

You can use Page() to register a page in the js file of each page.

Page({
    data: {text: "This is page data."},//Page data, used to maintain views, json format 
    onLoad: function(options){},//Monitor loading
    onReady: function(){},//Monitor first render complete
    onShow: function(){},//Monitor display
    onHide: function(){},//Monitoring hidden
    onUnload: function(){},//Monitor uninstall
    onPullDownRefresh: function(){},//Monitor drop down
    onReachBottom: function(){}//Monitor pull-down bottom touch
    onSharedAppMessage: function(){},//Listen to share in the upper right corner
    //The following is a custom event handler (bound in the view)
    viewTap: function(){//setData sets the data value and updates the view
        this.setData({text: 'Set som data for updating view.'})
    }
})

In the wxml file of each page, data binding and custom event binding are performed for data in page js.

<!--{{}}binding data Data specified in and rendered to view-->
<view class="title">{{text}}</view>

<!--wx:for Get the array data for circular rendering, item For each item of the array-->
<view wx:for="{{array}}"> {{item}} </view>

<!--wx:if conditional rendering-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>

<!--Template-->
<template name="staffName">
  <view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template>
<template is="staffName" data="{{...template.staffA}}"></template>
<template is="staffName" data="{{...template.staffB}}"></template>

<!--bindtap Appoint tap The event handler is ViewTap-->
<view bindtap="ViewTap"> Point me, please. </view>