Introductory Example of WeChat Mini Program Development

WeChat is getting closer and closer to our lives, and some developers are constantly developing WeChat mini programs. So how to develop mini programs? How to get started? Then we will use a WeChat mini program as an example to briefly introduce the entry-level usage of WeChat mini programs.

1. Register a mini program account

1. Enter the WeChat public platform ( https://mp.weixin.qq.com/), register a mini program account and fill in the corresponding information according to the prompts

2. After successful registration, enter the homepage and go through the mini program release process. ->Mini Program Development and Management->In the configuration server, click "Developer Settings"

3. You will get an AppID and record the AppID, which will be used later when creating the project #.

##Note: If you want to experience the mini program on your mobile phone with a non-administrator WeChat ID, then we also need to operate "Bind Developer", that is, in the "User Identity"-"Developer" module, bind. You need to use the WeChat account to experience the mini program. This tutorial uses the administrator’s WeChat account by default. For efficient development, WeChat Mini Program has launched a new developer tool that integrates development and debugging, code editing and program publishing functions.

1. Download page: https://mp.weixin. qq.com/debug/wxadoc/dev/devtools/download.html?t=201715

According to the system, select the corresponding tool version to download

2. The tool includes editing, debugging and project three Page card:

(1) The editing area can perform basic operations such as code writing and adding, deleting and renaming files for the current project

(2) Program Debugging mainly has three functional areas: simulator, debugging tools and small program operation area

(3) The project page card has three main functions: displaying current project details, submitting preview and submitting upload and project configuration

Note: When starting the tool, developers need to use the WeChat ID that has been successfully bound in the background to scan the QR code to log in. All subsequent operations will be based on this WeChat account

3. Write a small Program example

1. Example directory structure

? 
test
 ├─ page
 │ └─ index
 │  ├─ index.js
 │  ├─ index.json
 │  ├─ index.wxml
 │  └─ index.wxss
 ├─ app.js
 ├─ app.json
 └─ app.wxss

2. Example file description and source code

A small program includes an app (main part) and multiple pages (Page)

(1) app is used to describe the overall program and consists of three files. The .js suffix is ​​the script file, the .json suffix is ​​the configuration file, and the .wxss suffix is is the style sheet file, which must be placed in the root directory of the project.

app.js is the script code of the mini program (required). You can monitor and process the life cycle functions of the mini program in this file. , declare global variables, and call the rich API provided by the framework.

?
App({
 onLaunch: function () {
  console.log('App Launch')
 },
 onShow: function () {
  console.log('App Show')
 },
 onHide: function () {
  console.log('App Hide')
 },
 globalData: {
  hasLogin: false
 }
})

app.json is the global configuration of the entire applet (required). It is used to globally configure the WeChat applet and determine the path of the page file. , window display, setting network timeout, setting multiple tabs, etc. Accepts an array, each item is a string, to specify which pages the mini program consists of. 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 homepage of the mini program.

{
 "pages":[
  "page/index/index"
 ],
 "window":{
  "navigationBarTextStyle": "black",
  "navigationBarTitleText": "欢迎页",
  "navigationBarBackgroundColor": "#fbf9fe",
  "backgroundColor": "#fbf9fe"
 },
 "debug": true
}

app.wxss is the public style sheet for the entire applet (not required).

page {
 background-color: #fbf9fe;
 height: 100%;
}
.container {
 display: flex;
 flex-direction: column;
 min-height: 100%;
 justify-content: space-between;
}

(2) Page is used to describe a page. A page consists of four files. Here we take the homepage index as an example. Each small program page is composed of four different suffix files with the same name under the same path. Composition, such as: index.js, index.wxml, index.wxss, index.json. Files with the .js suffix are script files, files with the .json suffix are configuration files, files with the .wxss suffix are style sheet files, and files with the .wxml suffix are page structure files.

index.js is the script file of the page (required). In this file, we can monitor and process the life cycle functions of the page, obtain mini program instances, declare and process data, and respond to page interaction events. wait.

Page({
 data: {
  title:'小程序',
  desc:'Hello World!'
 }
})

index.wxml is the page structure file (required).

<view class="container">
 <view class="header">
  <view class="title">标题：{{title}}</view>
  <view class="desc">描述：{{desc}}</view>
 </view>
</view>

index.wxss is a page style sheet file (not required). When there is a page style sheet, the style rules in the page's style sheet will cascade over the style rules in app.wxss. If you do not specify the style sheet of the page, you can also directly use the style rules specified in app.wxss in the structure file of the page.

.header {
 padding: 80rpx;
 line-height: 1;
}
.title {
 font-size: 52rpx;
}
.desc {
 margin-top: 10rpx;
 color: #888888;
 font-size: 28rpx;
}

index.json is the page configuration file (not required). When there is a page configuration file, the configuration items on the page will overwrite the same configuration items in the window of app.json. If there is no specified page configuration file, the default configuration in app.json will be used directly on the page. No need to specify here.

Tips:

a. In order to facilitate developers to reduce configuration items, the mini program stipulates that the four files describing the page must have the same path and file name

b. The mini program provides a rich API, which you can choose according to your own needs (https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=201715)

4. Test Mini Program Example

1. Open the WeChat web developer tools and select "Local Mini Program Project".

2. Fill in the AppID and project name of the mini program, select the mini program instance folder written in the third step, and click "Add Project".

3. If the following results appear, congratulations, your first small program project has been successfully written! Click "Edit" on the left sidebar, and you can directly modify the code in the right editing window. Save (CTRL+S) and refresh (F5) to take effect.

4. If you want to see the effect of the mini program project on your mobile phone, click "Project" on the left sidebar, click "Preview" to generate a QR code, open WeChat and scan, and you can see it.

Summary

The above is the entire content of this article. I hope developers can get ideas from it and help everyone develop WeChat better. Applets.

Related recommendations:

The most complete WeChat mini program project example

Introduction to WeChat Mini Program

Introduction to the method of realizing shared variable values ​​in WeChat Mini Program

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