Note source: Hook Education – big front end employment Training camp

Content: Notes, thoughts and experiences in the process of learning

Tip: project actual combat article resources can not be uploaded, only for reference

Applets development

Small program

Original sin: Traditional apps cost a lot to develop and operate

Compared to traditional apps

  • Small programs do not need to download separately, just need to search, scan, you can directly use small programs
  • Small programs reside in App, App has its own traffic, so the promotion cost of small programs is low
  • Small programs are simple and easy to learn – just need to master the front-end stack

As opposed to web development

  • HTML cannot be used in applets
  • Small programs can use CSS
  • The main development language of applets is still JS, but it should be noted that not all JS apis can be used
    • For example, DOM BOM is not available in applets, and libraries based on DOM and BOM are not available, such as JQuery
  • Small programs run on the wechat client on the operating system, and web pages run on the browser

Applets running environment

  • Render layer: content, style

  • Logical layer: JS

  • Note: There are still differences in support between IOS and Android, but the look and feel is the same

Wechat applet foundation

Applets account registration

  • Use the official registration address provided by wechat to register
  • The email address registered with wechat public account can no longer be used to register wechat mini program account
  • After successful registration, the AppID of the small program can be obtained in the background (Settings => Basic Settings => Account Settings).
  • AppID is the unique identifier of the applets account. Keep it confidential

Setting up the development environment

Install wechat developer tools

  • Go to the official website of the small program, download the wechat developer tools, and select the download package that matches your system
  • Install wechat developer tools

Environment set up

  1. Double-click to open the wechat developer tool

  2. Fill in the project initialization information, fill in the name of the small program, store directory, AppID, fill

    • Project name: Can be set arbitrarily
    • Directory: Set the local empty directory
    • AppID: After registering the applets account, click “Settings” in the navigation on the left to view the account information
    • Development mode: small program
    • Back-end services: Select “Do not Use cloud Services” (do not create server-side directories or files)

  3. Click the New button to create the initialization applet

  4. After entering the project, I am familiar with wechat developer tools

    • Simulator: simulate the running effect of small program project on the real machine
    • Editor: Modify/add project structure and code
      • The code directory
      • Code editing window
    • Debugger: Debug JavaScript logic, debug CSS styles, etc
      • Wxml: View page tag structure and debug CSS styles
      • Console: Tests the JavaScript code
      • Sources: Add breakpoints/breakpoint debugging

Error: the current developer is not bound to this appID, please go to the small program management to solve:

  • Make sure you use the appID of the mini app (not the appID of your wechat official account)
    1. Go to small program management background bind developer (if the first step has been solved, please ignore the second step)

Enter applets

Click get avatar nickname => Allow authorization => Enter small program (see user avatar)

Initialize the project

Global file – Root directory

  • App.js – Entry file loaded after the applets start
  • App. json – Applet global configuration file for the entire project
  • App.wxss – Applet global style file, equivalent to CSS file

Page files – Pages directory

Each specific page must consist of four files with the same path and file name

  • Index.js – Page entry
  • Index.json – Page configuration
  • Index. WXML – Page content, equivalent to an HTML file
  • Index. WXSS – Page style, equivalent to CSS file

Create/generate a page

Json file directly under the directory to add a page information in the Pages, after saving the program will automatically create a page directory in the Pages directory

// Here are some global configurations
{
  "pages": ["pages/index/index"."pages/logs/logs".// Add a page information to save
    "pages/test/test"].// window corresponds to the current applets window configuration
  "window": {"backgroundTextStyle":"light"."navigationBarBackgroundColor": "#fff".// Header header background color
    "navigationBarTitleText": "Weixin".// Applet header title
    "navigationBarTextStyle":"black"  // Header font color
  },
  // Specify a small program to display the Tab bar, array, internal writing needs to add Tab configuration
  "tabBar": {
    "list": [{
      // Tab corresponds to the page
      "pagePath": "pages/index/index"./ / Tab title
      "text": "Home page".// Unselected icon
      "iconPath": "./static/images/featured.png".// Select the icon
      "selectedIconPath": "./static/images/featured-actived.png"
    }, {
      "pagePath": "pages/logs/logs"."text": "Log"."iconPath": "./static/images/profile.png"."selectedIconPath": "./static/images/profile-actived.png"}},"style": "v2"."sitemapLocation": "sitemap.json"
}

Copy the code

For details about global configuration, seeThe official documentation

The life cycle

  • The entire applets life cycle: declared in app.js
  • Single page life cycle: declared in the page entry file

Applets life cycle

  • OnLaunch – Triggered when the applets start, globally only called once
  • OnShow – Triggered when initialization completes and cuts from background to foreground
  • OnHide – Triggered when cutting from foreground to background

// app.js
App({
 onLaunch() {
   console.log('onLaunch - applet launch '); . },onShow() {
   console.log('onShow - Applet initialization complete - Cut foreground ');
 },
 onHide() {
   console.log('onShow - Small program cut background ');
 },
 globalData: {
   userInfo: null}})Copy the code

Page life cycle

  • OnLoad – Page load (once)
  • OnShow – Page display (cut foreground)
  • OnHide – Page hide (cut background)
  • OnReady – Page ready (once)
  • InUnload – Page unload (once)
  • Page life cycle flow sequence: onLoad => onShow => onReady

/// logs.js
const util = require('.. /.. /utils/util.js')

Page({
  data: {
    logs: []},onLoad() {
    console.log('onLoad - page load ');
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(log= > {
        return {
          date: util.formatTime(new Date(log)),
          timeStamp: log
        }
      })
    })
  },
  onShow() {
    console.log('onShow - page display ');
  },
  onHide() {
    console.log('onHide - page cut background ');
  },
  onReady() {
    console.log('onReady - page ready ');
  },
  inUnload() {
    console.log('inUnload - Page unload '); }})Copy the code

Wechat small program startup process

  1. OnLauch: Small program start
  2. OnShow: small program show/cut foreground
  3. OnLoad: loads the page
  4. OnShow: page display
  5. OnReady: The page is ready

Small program front and background switching process

Small program front and background switching life cycle function trigger order is just opposite

Cut the background

  1. OnHide: page cutting background
  2. OnHide: The small program cuts the background

Cut the front desk

  1. OnShow: small program cut background
  2. OnShow: page cutting background

Global file interpretation

file Must be role
app.js is Small program logic
app.json is Applets common configuration
app.wxss no Common style sheets for applets

Cloud API

Small program officially launched, the effect of procedure callThe cloud API

  • You don’t have to develop it yourself
  • You don’t need to deploy yourself
  • The cloud API is all in the WX object, so basically the methods that WX calls are the cloud API
  • Note: In the new applet initialization project, there is no code to get user information
// app.js
App({
  onLaunch() {
    console.log('onLaunch - applet launch ');
    // Display local storage capability
    // Cloud API -wx.getStoragesync -Get local cached data
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    // Cloud API -wx. setStorageSync - Set local mixed data
    wx.setStorageSync('logs', logs)

    // cloud API -wx. login - Login
    wx.login({
      success: res= > {
        // Send res.code to the backend for openId, sessionKey, unionId}})},onShow() {
    console.log('onShow - Applet initialization complete - Cut foreground ');
  },
  onHide() {
    console.log('onShow - Small program cut background ');
  },
  globalData: {
    userInfo: null}})Copy the code

Reading the Index page

  • WXML – a tag language developed by wechat – a set of language tags designed by the framework
  • The specific tags in the WHML are called components
  • The relationship between WXML and components is the equivalent of HTML and tags
  • WXML is the template engine in applets
    • Data binding –Data {{}}
    • Data presentation (conditional rendering, list rendering)

HTML tag corresponding to part of the applet component

role Applets component HTML tags
The display block view div
Show the picture image img
Display text text p
Navigation links navigator a
. . .

specificWXML componentsYou can scan the official mini-program QR code to see

Unscramble logs page

  • Modular development
    • The modular development of small program follows CommonJS specification – exports, require
  • WXML list rendering – wx:for
  • Page level configuration
    • Json file configuration page
    • WXSS file setting style
// logs.js
// require - introduce external modules
const util = require('.. /.. /utils/util.js')

Page({
  // Page data
  data: {
    logs: []},// Page life cycle - page mount
  onLoad() {
    // Set the data
    this.setData({
      / / set the logs
      Wx. getStorageSync - Cloud API - Get local data
      // Use util to process the date format of the data and save it line by line
      logs: (wx.getStorageSync('logs') || []).map(log= > {
        return {
          date: util.formatTime(new Date(log)),
          timeStamp: log
        }
      })
    })
  }
})
Copy the code
// logs.json
{
  // Configure the page's unique top title
  "navigationBarTitleText": "View startup log"."usingComponents": {}}Copy the code