WeChat Mini Program Development Tutorial Document

What is WeChat Mini Program? How to develop WeChat mini program? What are the tutorials for WeChat mini program development? This tutorial will take you from the WeChat applet itself, combined with the official WeChat-WeChat applet development tool, to take you step by step to create a WeChat applet, and preview the actual effect of the applet on your mobile phone. The home page of this mini program will display the welcome message and the current user's WeChat avatar. Click on the avatar to view the startup log of the current mini program in the newly opened page. Download the source code

Related learning recommendations:小program development tutorial

Step 1. Obtain the AppID# of the WeChat applet

## Log in to https://mp.weixin.qq.com, and you can view the AppID of the WeChat applet in the website's "Settings" - "Developer Settings". Note that you cannot directly use the service account or The AppID of the subscription account.

Note: If we do not use the administrator WeChat ID bound during registration to experience the mini program on the mobile phone, then we also need to operate "Bind Developer". That is, in the "User Identity"-"Developer" module, bind the WeChat ID you need to experience the mini program. By default, this tutorial uses the administrator's WeChat ID to register an account and experience.

Step 2. Create the project

We need to use

Developer Tools to complete the creation and code editing of the mini program.

After the developer tools are installed, open and use WeChat to scan the QR code to log in. Select Create "Project", fill in the AppID obtained above, set a local project name (not a mini program name), such as "My First Project", and select a local folder as the directory where the code is stored , just click "New Project".

In order to facilitate beginners to understand the basic code structure of the WeChat applet, during the creation process, if the selected local folder is an empty folder, the developer tool will prompt whether it is necessary to create a quick start project. Select "Yes" and the developer tools will help us generate a simple demo in the development directory.

After the project is successfully created, we can click on the project to enter and see the complete developer tool interface. Click on the left navigation to view and edit our code in "Edit" and in "Debug" Test the code and simulate the effect of the mini program on the WeChat client. In "Project", you can send it to your mobile phone to preview the actual effect.

Step 3. Write code

Create a mini program instance

Click "Edit" in the left navigation of the WeChat mini program developer tool. We can see that this project has been Initialized and contains some simple code files. Among the code files of the WeChat applet, the three files app.js, app.json, and app.wxss are essential and are generally generated by default. Among them, the .js suffix is ??a script file, the .json suffix is ??a configuration file, and the .wxss suffix is ??a style sheet file. The WeChat mini program will read these files and generate mini program instances.

Let’s briefly understand the functions of these three files to facilitate modification and develop your own WeChat applet from scratch.

app.js is the script code of the mini program. We can monitor and process the life cycle functions of the applet and declare global variables in this file. Call the rich API provided by the framework, such as synchronous storage and synchronous reading of local data in this example. To learn more about the available APIs, please refer to the API document

//app.jsApp({
??onLaunch:?function?()?{????//調用API從本地緩存中獲取數(shù)據(jù)
????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{??????//調用登錄接口
??????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 the global configuration for the entire WeChat applet. In this file, we can configure which pages the mini program is composed of, configure the window background color of the mini program, configure the navigation bar style, and configure the default title. Note that no comments can be added to this file. For more configurable items, please 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 sheet for the entire WeChat 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, our WeChat applet has two pages, the index page and the logs page, namely the welcome page and the display page of the WeChat applet startup log. They All in the pages directory. The [path page name] of each page in the WeChat mini program needs to be written in the pages of app.json, and the first page in pages is the home page of the mini program.

每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁面結構文件。

index.wxml 是頁面的結構文件：

<!--index.wxml--><view>
??<view>
????<image></image>
????<text>{{userInfo.nickName}}</text>
??</view>
??<view>
????<text>{{motto}}</text>
??</view></view>

本例中使用了<view></view>、<image></image>、<text></text>來搭建頁面結構，綁定數(shù)據(jù)和交互處理函數(shù)。

index.js 是頁面的腳本文件，在這個文件中我們可以監(jiān)聽并處理頁面的生命周期函數(shù)、獲取小程序實例，聲明并處理數(shù)據(jù)，響應頁面交互事件等。

//index.js//獲取應用實例var?app?=?getApp()
Page({
??data:?{
????motto:?'Hello?World',
????userInfo:?{}
??},??//事件處理函數(shù)
??bindViewTap:?function()?{
????wx.navigateTo({
??????url:?'../logs/logs'
????})
??},
??onLoad:?function?()?{????console.log('onLoad')????var?that?=?this
????//調用應用實例的方法獲取全局數(shù)據(jù)
????app.getUserInfo(function(userInfo){??????//更新數(shù)據(jù)
??????that.setData({
????????userInfo:userInfo
??????})
????})
??}
})

index.wxss 是頁面的樣式表：

/**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;
}

微信小程序頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規(guī)則會層疊覆蓋 app.wxss 中的樣式規(guī)則。如果不指定頁面的樣式表，也可以在頁面的結構文件中直接使用 app.wxss 中指定的樣式規(guī)則。

index.json 是頁面的配置文件：

微信小程序頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。

logs 的頁面結構

<!--logs.wxml--><view>
??<block>
????<text>{{index?+?1}}.?{{log}}</text>
??</block></view>

logs 頁面使用?<block></block>?控制標簽來組織代碼，在?<block></block>?上使用?wx:for?綁定?logs?數(shù)據(jù)，并將?logs?數(shù)據(jù)循環(huán)展開節(jié)點。

//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))
??????})
????})
??}
})

該微信小程序測試的運行結果如下：

Step 4. Mobile preview

Select "Project" in the menu bar on the left side of the WeChat applet developer tool, click "Preview", and scan the code You can experience it in the WeChat client.

Related learning recommendations: WeChat Mini Program Tutorial

The above is the detailed content of Summary of WeChat Mini Program Development Tutorial Manual Document. For more information, please follow other related articles on the PHP Chinese website!