Preparation before development:
Register the applet account binding developer
Log in to the WeChat public platform applet, enter the user identity-developer, and add the binding developer.
certified applets can be bound to no more than 21 developers. An unauthenticated applet can be bound to no more than 11 developers.
get AppID, download and install the developer tool
after downloading, use the administrator or the bound developer to scan the code and log in.
a wechat applet
creation project
we need the developer tools to complete the applet creation and code editing.
after the developer tool is installed, open it and log in by using the WeChat scan code. Select Create Project, fill in the AppID obtained above, set a local project name (not applet name), such as My First Project, select a local folder as the directory where the code is stored, and click New Project.
in order to facilitate beginners to understand the basic code structure of wechat applet, during the creation process, if the selected local folder is an empty folder, the developer tool will prompt whether a quick start project needs to be created. Select "Yes" and the developer tool will help us generate a simple demo in the development directory.
after the project is successfully created, we can click on the project, enter and see the complete developer tool interface, and click the navigation on the left. We can view and edit our code in "Edit", test the code and simulate the effect of the applet on the WeChat client in "Debug", and send it to the mobile phone to preview the actual effect in "Project".
write code to create an instance of a small program
click "edit" on the left navigation of the developer tool, and we can see that this project has been initialized and contains some simple code files. The most critical and essential ones are app.js, app.json and app.wxss Among them,. js suffix is script file,. json suffix is configuration file, and. wxss suffix is style sheet file. Wechat applet will read these files and generate applet instances.
//App () function is used to register a small program. Accept an object parameter, which specifies the life cycle function of the applet, etc.
App({
onLaunch: function() {
// Do something initial when launch.
},
onShow: function() {
// Do something when show.
},
on hide: function () {
//do something when hide.
},
global data:' I am global data'
})
app.js is the script code of the applet. In this file, we can monitor and handle the life cycle functions of applets and declare global variables. Call the rich API provided by the framework.
//app.js
app ({
on launch: function () {
//Call API to get data from local cache
var logs = wx.getstoragesync ('logs') || []
logs. Unshift (date).
wx.setStorageSync('logs', logs)
},
getUserInfo: function(cb) {
var that = this;
if (this.globalData.userInfo) {
typeof cb == "function" & & CB (this.globaldata.userinfo)
} else {
//Call the login interface
wx.login ({
success: function () {
wx.getuserinfo ({
success: function (res) {<
typeof cb == "function" & & cb(that.globalData.userInfo)
}
})
}
});
}
},
globaldata: {
userinfo: null
}
)
app.json is the global configuration for the whole applet. In this file, we can configure which pages the applet consists of, configure the window background color of the applet, configure the navigation bar style, and configure the default title. Note that no comments can be added to this file.
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationbarbeckgroundcolor": "# fff",
"navigationbar title text": "wechat",
"navigationbar text style": "black"
}
app.wxss is the public * * style sheet of the whole applet. We can directly use the style rules declared in app.wxss on the class attribute of the page component.
/**app.wxss**/
.container {
height: 111%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 211rpx 1;
box-sizing: border-box;
}
Create a small page of personality calculator
In this tutorial, we have 1 pages, that is, welcome pages, which are all in the Pages directory. The path+page name of each page in the WeChat applet needs to be written in pages of app.json, and the first page in pages is the homepage of the applet.
each applet page is composed of four different suffix files with the same name under the same path, such as index.js, index.wxml, index.wxss and index.json Files with. js suffix are script files, files with. json suffix are configuration files, files with. wxss suffix are style sheet files, and files with. wxml suffix are page structure files.
index.wxml is the structure file of the page:
<; ! --index.wxml-->
< text class='title'> Personality viewer <: /text>
< text class='hint'> Calculate the current character for you <; /text>
< button bindtap="setScore" class='check'> Click Query <; /button>
< view class="container">
< view bindtap="bindViewTap" class="userinfo">
< image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"> < /image>
< text class="userinfo-nickname"> {{userInfo.nickName}}< /text>
< text class='score'> {{score}}< /text>
< text class='info'> {{info}}< /text>
< /view>
< /view>
in this example, <; view/> 、< image/> 、< text/> To build page structure, bind data and interactive processing functions.
index.js is a script file of a page. In this file, we can listen to and process the life cycle function of the page, obtain applet instances, declare and process data, and respond to page interaction events.
//index.js
// Get an application instance
var app = getapp ()
page ({
data: {
score: 1,
userinfo: {}
},
//Event handler.
var infos = [
' Wow, you are possessed by a fairy, go and hook up with your sister',
' The sun shines in the sky, flowers smile at me',
' Hey, are you a pig? Stay away from me'
];
var info;
if(score> 91){
info=infos[1];
}else if(score> 75){
info=infos[1];
}else{
info=infos[2];
}
this.setData({
score:score,
info:info
})
},
onload: function () {
console.log ('onload')
var that = this
//Call the method of application instance to get global data
app.getuserinfo (function (userinfo) {
// Update data
that.setdata ({
userinfo: userinfo
})
})
index.wxss is the style sheet of the page:
/* * index.wxss */
. title.
display: block;
padding: 11px;
font-weight: bold;
text-align: center;
}
.hint{
display: block;
padding: 11px 21px;
color:#999;
text-align: center;
}
.check{
width: 111px;
}
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 21rpx;
border-radius: 51%;
}
.userinfo-nickname {
color: #aaa;
text-align: center;
the style sheet for the display: block
}
page is unnecessary. When there is a page style sheet, the style rules in the style sheet of the page will be cascaded to cover the style rules in app.wxss. If you don't specify a style sheet for the page, you can also use the style rules specified in app.wxss directly in the structure file of the page.
index.json is the configuration file of the page:
the configuration file of the page is unnecessary. When there is a configuration file for a page, the configuration item on the page will overwrite the same configuration item 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 this page.
The running results are as follows:
Mobile phone preview
Select "Project" from the menu bar on the left side of the developer tool, click "Preview", and you can experience it in the WeChat client after scanning the code.
mobile phone effect