Write at the beginning
I am a senior back-end code farmer. I have been in touch with WeChat applets for recent project needs. I have organized the learning process and shared it with my friends. Since I am learning and arranging, it is inevitable that there is something wrong with it. I hope you can correct me in time. Thanks.
WeChat group QR code Welcome to exchange
Apply for an account
Click https: //mp.weixin.qq.com/wxop ... to enter the applet registration page and fill in the relevant data according to the guidelines.
Download development tools
Developer tool download address , download the corresponding version according to your own operating system
hello world
Log https://mp.weixin.qq.com , 设置- 开发设置found AppID:
Run the installed 微信开发者工具, select 小程序项目, fill in the AppID and directory information of the previous step.
Create the following files in the project directory:
/app.json
{
"pages": [
"pages/index/index"
]
}/pages/index/index.js
Page({
data: {
hello: "这里将显示Hello文字"
},
handleDisplayHello() {
this.setData({
hello: "Hello WeChat MiniProgram"
})
}
})/pages/index/index.wxml
<view class="container">
<view class="content">{{hello}}</view>
<button bindtap="handleDisplayHello">显示Hello</button>
</view>/pages/index/index.wxss
.container {
display:flex;
flex-direction: column;
align-items: center;
}
.container .content{
margin: 50rpx;
color: #0000cc;
}Click the 编译button in the toolbar to preview the effect in the simulator, and click the button in the applet 显示Helloto preview it Hello WeChat MiniProgram, as shown in the figure:
The above is the simple preparation work for the development of small programs and the demo implementation of HelloWorld. The next article will explain each file in detail.
Next notice
We will explain the structure and meaning of WeChat applet source files in detail, so stay tuned.
WeChat Exchange Group
Micro-channel group will be timing out a two-dimensional code, in order to facilitate the update, the two-dimensional code into the group placed on Github Portal >>>