Examples of WeChat applet development tutorial

This article mainly introduces detailed information about examples of small program simple tutorials. here, I have explained the steps for developing small programs one by one, for more information about how to develop small programs, see this article.

I just got started with small program development. here is a simple tutorial:

1. obtain the AppID of the applet

Log on to the https://mp.weixin.qq.com, you can go to the "Settings"-"developer settings" of the website to view the AppID of the applet, note that you cannot directly use the service number or subscription number of AppID.

After the project is successfully created, you can click the project to go to the complete developer tool interface. click the left-side navigation bar to view and edit our code in "edit, in "debugging", you can test the code and simulate the effect of the applet on the client. in "project", you can send the code to your mobile phone to preview the actual effect.

3. write code to create

Applet instance

Click "edit" in the left-side navigation bar of the developer tool. we can see that this project has been initialized and contains some simple code files. The key and necessity are app. js, app. json, and app. wxss. Where,.jsThe suffix is a script file,.jsonThe suffix file is the configuration file,.wxssThe suffix is the style sheet file. The applet will read these files and generate the applet instance.

Next we will briefly understand the functions of these three files to facilitate modification and develop our own mini programs from scratch.

App. js is the script code of a small program. In this file, we can listen to and process the lifecycle functions of the applet and declare global variables. Call the rich APIs provided by the framework, such as synchronous storage and synchronous reading of local data. For more information about available APIs, see the API documentation.

// App. jsApp ({onLaunch: function () {// call the API to obtain data from the local cache var logs = wx. getStorageSync ('logs') | [] logs. unshift (Date. now () wx. setStorageSync ('logs', logs)}, getUserInfo: function (cb) {var that = this; if (this. globalData. userInfo) {typeof cb = "function" & cb (this. globalData. userInfo)} else {// call the logon interface wx. login ({success: function () {wx. getUserInfo ({success: function (res) {that. globalData. userInfo = res. userInfo; typeof cb = "function" & cb (that. globalData. userInfo) }}) }};}, globalData: {userInfo: null }})

App. json is a global configuration for the entire applet. In this file, we can configure the page that the applet consists of, configure the background color of the applet window, configure the navigation bar style, and configure the default title. Note that you cannot add any comments to this file. For more configuration items, refer to configuration details.

{ "pages":[  "pages/index/index",  "pages/logs/logs" ], "window":{  "backgroundTextStyle":"light",  "navigationBarBackgroundColor": "#fff",  "navigationBarTitleText": "WeChat",  "navigationBarTextStyle":"black" }}

App. wxss is the public style table of the entire applet. We can directly use the style rules declared in app. wxss on the class attribute of the page component.

/**app.wxss**/.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;}

Create Page

In this tutorial, we have two pages: the index page and the logs page, that is, the welcome page and the display page of the applet startup log. they are all under the pages directory. The path + page name of each page in the applet must be written in pages in app. json, and the first page in pages is the homepage of the applet.

Each applet page consists of four different suffix files with the same name in the same path, such as index. js, index. wxml, index. wxss, and index. json..jsThe suffix file is a script file,.jsonThe suffix file is the configuration file,.wxssThe suffix is a style sheet file,.wxmlA file with a suffix is a page structure file.

Index. wxml is the structure file of the page:

 
  
    
     
   
    {{userInfo.nickName}}
    
   
    
   
    {{motto}}
    
  
 

In this example ,, To build a page structure and bind data and interactive processing functions.

Index. js is a page script file. in this file, we can listen to and process page Lifecycle Functions, obtain applet instances, declare and process data, and respond to page interaction events.

// Index. js // Obtain the application instance var app = getApp () Page ({data: {motto: 'Hello World', userInfo: {}}, // bindViewTap: function () {wx. navigateTo ({url :'.. /logs '})}, onLoad: function () {console. log ('onload') var that = this // call the method of the application instance to obtain the global data app. getUserInfo (function (userInfo) {// update the data that. setData ({userInfo: userInfo })})}})

Index. wxss is the style sheet of the page:

/**index.wxss**/.userinfo { display: flex; flex-direction: column; align-items: center;} .userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%;} .userinfo-nickname { color: #aaa;} .usermotto { margin-top: 200px;}

The style sheet of the page is unnecessary. When a page style sheet exists, the style rules in the style sheet will overwrite the style rules in app. wxss. If you do not specify a style sheet for a page, you can also directly use the style rules specified in app. wxss in the structure file of the page.

Index. json is the page configuration file:

The page configuration file is unnecessary. When there is a page configuration file, the configuration item will overwrite the same configuration item in the window of app. json on this page. If no page configuration file is specified, the default configuration in app. json is directly used on the page.

Logs page structure

 
  
    
   
    {{index + 1}}. {{log}}
    
  
 

Logs page usage Control tags to organize code. Use onwx:forBindlogsData, andlogsExpand nodes in a data loop

//logs.jsvar util = require('../../utils/util.js')Page({ data: {  logs: [] }, onLoad: function () {  this.setData({   logs: (wx.getStorageSync('logs') || []).map(function (log) {    return util.formatTime(new Date(log))   })  }) }})

4. Mobile preview

On the left-side menu bar of the developer tool, select "project" and click "preview". after scanning the code, you can experience it on the client.

Thank you for reading this article. I hope it will help you. thank you for your support for this site!

Related articles:

Detailed description of small program data access instances

Detailed description of the instance code of the applet label component

Small Program Development small program architecture

The above is a detailed description of the sample steps of the mini-program development tutorial. For more information, see other related articles in the first PHP community!