What is small program believe I do not have to introduce everyone must know, my intention here is to organize a small program document, on the one hand to deepen their own memory, on the other hand is also a little more official documents, not very familiar with their own feel more commonly extracted to facilitate memory;

Applets development documentation

Set up the environment

Register an account HERE I will not say directly on the link wechat public platform need to pay attention to is to register an account remember to choose small program options; Successful registration will enter a small program similar to the background management page; I don’t want to say anything else. I suggest you read it again, focusing on development

01

The next step is to install the development tool, wechat small program development tool installation and its simple, here does not describe the specific installation steps attached address everyone according to their own system to install the development tool

Open our newly installed editor -> Select applet -> click +; Create your own project, the AppID here is the AppID copy in the development option in the management background mentioned above; I suggest you avoid cloud development and I’ll do a separate chapter on it later;

02

tool

Let’s just talk about the main content here, and explore the rest of the features yourself;

03

The directory structure

├ ─ pages│ ├─ Index // Each page must contain the following four files│ │ ├ ─ index.js // page logic│ │ index. Json // page configuration│ │ ├ ─ index. WXML // page structure│ │ ├ ─ index. WXSS // page style│ └ ─ logs│ logs. Js│ logs. Json│ logs. WXML│ logs. WXSS└─ garbage //│ util. Js│ app.js // Describe the whole logic of applets│ app.json // Applets common configuration│ app.wxss // Applet common style│ project.config.json // Project configuration file│ a sitemap. Json/ * ** Note that all four files in page must have the same name* * /Copy the code

Applets configuration

The app.json file in the applets root directory is used for global configuration of wechat applets

{ 
// Configure the default startup page for the applet    "entryPagePath": "pages/logs/logs".// For each page in the applet, if entryPagePath is not present, the first item in Pages is the startup page    "pages": [
 "pages/index/index". "pages/logs/logs" ]. "window": { // Navigation bar background color "navigationBarBackgroundColor": "#ccc".// Navigation text color white black "navigationBarTextStyle":"white".// Navigation bar text content "navigationBarTitleText": "wx".// Dark light; You need to configure the following configuration to enable it "backgroundTextStyle": "dark".// Whether to enable global pull-down refresh "enablePullDownRefresh": true.// Navigation bar style custom, default; All the above configurations of custom are invalid, only the upper right corner capsule is reserved, topBar needs to write its own style definition "navigationStyle": "custom"  },  "tabBar": { // tabBar text color "color": "# 444".// tabBar text select color "selectedColor": "#f1f1f1".// tabBar background color "backgroundColor": "#fff".// The border color on the tabBar "borderStyle": "#ccc".// Configure a maximum of 5 tabs and a minimum of 2 tabs "list": [ // Must exist in pages "pagePath": "pages/index/index"./ / the TAB name "text": "homePage".// Suggested size81*81Network images are not supported "iconPath": "". "selectedIconPath": ""  ]  } } Copy the code

Each applet page can also be configured for the window representation of the page using the.json file. The page configuration items overwrite the same configuration items in the window of the app.json file

Configuration page

WXML grammar

Data binding

The dynamic data in WXML are all from the data corresponding to the Page. The syntax for data binding using double curly braces is similar to Vue, but a little different. To summarize, all expressions in the page of the applet should be done inside {{}}

<view>{{ message }}</view>
<! Use curly braces to bind dynamic properties
<view class="item-{{ id }}"></view>
Copy the code
Page({
    data: {
        message: "hello world".        id: 123
    }
}) Copy the code

The list of rendering

<! Create index and item automatically
<view wx:for="{{ list }}" wx:key="{{ index }}">
    <text>{{ item.uname }} -- {{ item.uage }}</text>
</view>
Copy the code
Page({
    data: {
        list: [
            { uname: 'zs'.uage: 23 },
            { uname: 'ls'.uage: 24 },
 { uname: 'we'.uage: 25 },  { uname: 'mz'.uage: 26 }  ]  } }) Copy the code

Conditions apply colours to a drawing

<view wx:if="{{ isShow }}">Whether the rendering</view>
<view wx:elif="{{ !isShow }}">Branch judgment</view>
<view wx:else>Otherwise,</view>
Copy the code

WXSS

WXSS (WeiXin Style Sheets) is a Style language used to describe component styles of WXML. WXSS has most of the features of CSS, in order to be more suitable for small program development, CSS has also made the corresponding expansion and modification of the size unit (RPX) style import (@import)

The life cycle

The life cycle of applets is divided into three categories: App Page Component

App

  • onLaunch: Listens for applets initialization
  • onShow: is called when the applet starts and when the background cuts back to the foreground
  • onHide: called when a small program cuts into the background
App({
    onLaunch() {
        console.log('onLaunch... ');
    },
    onShow() {
 console.log('onShow... ');  },  onHide() {  console.log('onHide... ');  } }) Copy the code

Page

  • onLoad: Triggered when the page is loaded. A page will be called only once. You can obtain the parameters carried by the currently opened page in the parameters of onLoad
  • onShow: is called when the page is displayed and when the page is cut to the foreground
  • onReady: trigger is called only once when the first rendering of the page is complete, similar to vUEMounted
  • onHide: called when the page hides and cuts into the background, as inwx.navgationToOr the TAB to switch
  • onUnload: Triggered when the page is uninstalled, for examplewx.redirectToorwx.navigationBackTo other pages
Page({
    // By default, we get an empty object
    onLoad(params) {
        console.log(params);
    },
 onShow() {  console.log('page--onShow... ');  },  onReady() {  console.log('page--onReady... ');  },  onHide() {  console.log('page--onHide... ');  },  onUnload() {  console.log('page--onUnload... ');  } }) Copy the code

The order between App and Page is

Start time: ApponLaunch onShow Page onLoad onShow onReady

Page onHide App onHide

Cut foreground: App onShow Page onShow

The event

Everyone reading this article is expected to be able to use JavaScript; So JS will not say a simple about the event, the content is also more I do a simple example here to post an address

<button type="primary" bindtap="clickMe">click me</button>
Copy the code
Page({
    clickMe(event) {
        console.log(event)
    }
})
Copy the code

component

Personal understanding of this component can be understood as wechat and based on some HTML to do a second package; There is a lot of content here, but most of it is not too difficult, put the link directly, recommend the document repeatedly and practice here

API

Wechat provides interface or more here also did not say details see here 👉

routing

Here are three apis that I think are more commonly used

Page({
    clickHandle() {
        // Close the current page and switch to the tabBar page
        wx.redirectTo({
            url: '/pages/index/index'
 });  // Leave the current page, jump to a page in the application cannot go to tabBar page  wx:navigateTo({  url: '/pages/index/index'  });  // Close the current page and return to the previous or multi-level page  wx.navigateBack({  delta: 1 // The numeric size represents the number of pages to be rolled back  });  } }) Copy the code

The data set

Always use the setData method to setData in the applet

  • Directly modifyingthis.dataAnd do not callsetDataThere is no way to change the state of the page, and it can cause data inconsistencies
  • Only jSON-capable data is supported
  • The maximum number of data configured at a time cannot exceed1024KB
  • Don’t put thedataSet any data inundefinedThere may be some weird onesbug
<input type="text" bindinput="input" /> 
Copy the code
// Two-way binding examplePage({
 data: {
  value: ' '
 },
 input(event) {  this.setData({  value: event.detail.value  });  } }) Copy the code

This article is formatted using MDNICE