Register for WeChat Small Program
If you don't have an account on WeChat, go to theWeChat Public Platform HomeClick the "Register Now" button to register. The registered account type can be subscription number, service number, small program and enterprise WeChat, we choose "small program" can be.
Then fill in the account information, it should be noted that the mailbox filled in must not be registered by the WeChat public platform, not bound by the personal micro-signal mailbox, and each mailbox can only apply for a small program.
After activating the mailbox, select the subject type as "personal type" and register the subject information as required. The subject information cannot be modified after submission, and the subject will become the only legal and contracting subject for you to use the services and functions of WeChat Public Platform, and cannot be changed or modified when other business functions are opened subsequently.
Everything OK You can directly enter the management platform of the small program. If the direct jump fails, you can also log in manually from the WeChat public platform. Fill in the basic information of the small program, including the name, icon, description and so on. After submitting successfully, then add the developer. The developer is the administrator by default, and we can also add a new bound developer from here, which is an operation that only the administrator has the authority to do.
Then click on "Settings" in the left navigation bar and find the development settings to get the AppID of the applet.
WeChat Developer Tools
downloadingWeChat web developer toolsJust download the corresponding installation package according to your operating system and install it.
Open the developer tool, use WeChat to scan the code to log into the developer tool, and get ready to develop your first small program!
The first small program
New construction projects
Open Developer Tools, select "Applet Project" and click "+" in the bottom right corner to create a new project.
Select an empty folder as the project directory, fill in the AppID, and then fill in a project name, for example, I call it GoZeroWaster. click "OK" to enter the main interface of the tool.
Project Catalog Structure
The basic file construction and project directory structure of a WeChat applet is described below:
.
├── # Logic files for applets
├── # Applet profiles
├── # Global public style files
├── pages # Store the pages of the applet
│ ├── index # index page
│ │ ├── # Page Logic
│ │ ├── # Page structure
│ │ └── # Page stylesheets
│ └── logs # logs page
│ ├── # Page Logic
│ ├── # Page Configuration
│ ├── # Page structure
│ └── # Page stylesheets
├──
└── utils
└──
There are 3 files in the root directory: , , , , the applet must have these 3 files describing the APP and placed in the root directory. These 3 are application level files, and parallel to them, there is a pages folder, which is used to store the pages of the applet.
We can draw an analogy with web front-end development technologies:
- wxml is similar to the HTML file, used to write the tags and skeleton of the page, but only use the applet's own packaged components inside;
- wxss is similar to a CSS file in that it is used to style a page, except that the css file is replaced with a wxss file;
- A js file is similar to a JavaScript file in front-end programming and is used to write the page logic of an applet;
- The json file is used to configure the style and behavior of the page.
Target results
Let's start with the final goals and outcomes, which are simple and two pages long:
(I chose the theme of "Zero Waste Living" for the Demo so that programmers can also protect the environment and love life)
step by step breakdown
Demo code download:/luhuadong/Web_Learning/tree/master/WeChat/GoZeroWaster
Disaggregate the targeted outcomes:
- personal center
- Life Guide
- Simulate pop-up windows
- Preview Images
footer
In the preview of the target results we see that both pages have common parts -- the header and footer. So before we build the content of the page, let's take care of the header and footer. As we can easily guess, these two sections belong to the global configuration of the applet and therefore require modifications to the file.
The initial content was as follows:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "balack"
}
}
The pages property is used to set the page path, which is an array of items, each of which is a string specifying which pages the applet consists of. The first item in the array represents the initial page of the applet. Adding or subtracting pages from the applet requires changes to the pages array.
The window property is used to set the status bar, navigation bar, title, and window background color of the applet.
Let's change the title and color of the header, and at the end of the page let's make a tab bar to switch between pages, this property is called tabBar, the code is as follows:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#2f2f8f",
"navigationBarTitleText": "GoZeroWaste",
"navigationBarTextStyle":"white"
},
"tabBar":{
"color": "#bfc1ab",
"selectedColor": "#13b11c",
"backgroundColor": "#1f1f4f",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "Personal Center"
},
{
"pagePath": "pages/details/details",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png",
"text": "Guide to Life"
}
]
}
}
(The images used are in the image directory of the project, you can also use your own images)
The tabBar properties used here are color, selectedColor, backgroundColor and list, which is an array used to set the navigation path.
After CTRL + S saves it, the emulator will refresh itself and you can see the results right away.
personal center
For simplicity, we will implement the "Personal Center" page in the pages/index directory. Double-click it to open it, and the initial content will be as follows:
<!---->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> Get Avatar Nickname</button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{}}" background-size="cover"></image>
<text class="userinfo-nickname">{{}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
There's already some code here, and although it may not be readable at this point, we know that this is now the source code for the page. Let's comment out the "Hello World" part and add what we want to display:
<!---->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> Get Avatar Nickname</button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{}}" background-size="cover"></image>
<text class="userinfo-nickname">{{}}</text>
</block>
</view>
<!-- <view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view> -->
<view class="ID_Badge">
<view>
<text class="ID_info">{{company}}</text>
</view>
<view>
<text class='ID_info'>{{position}}</text>
</view>
<view>
<text class='ID_info'>{{lesson}}</text>
</view>
</view>
</view>
Here are the separate values for the{{company}}、{{position}} cap (a poem){{lesson}} is used as a placeholder, similar to Django's template language. Of course, you can replace it with the appropriate character, but we want to stick with the{{motto}} The practice of letting you know where to modify this data. That's right, it's in the file:
Page({
data: {
motto: 'Hello World',
company: "GoZeroWaste",
lesson: "The 21-Day Guide to Zero-Waste Living.",
position: "Junk Wizard.",
/* ... */
},
in the wxml file.<view> component is similar to the web development<div>but (not)<text> component is used to write text, it is important to note that the<text/> Only the<text/> Nesting. Of course, one can use the<image> Insert the image, the image should be saved to the image directory, otherwise it will not be uploaded during the test.
<view class="ID_Badge">
<! -- Omit -->
<view>
<text class='ID_info'>{{lesson}}</text>
</view>
<view>
<image class='pic' mode='widthFix' src='../../image/'></image>
</view>
</view>
mode='widthFix' means to keep the width unchanged, the height changes automatically, and the aspect ratio of the original image remains unchanged to scale to fit the screen size.
Next, you need to modify the file to set the style:
/****/
.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;
}
.ID_Badge {
padding-top: 20rpx;
color: blue;
}
.ID_info {
display: flex;
flex-direction: column;
align-items: center;
}
.pics {
width: 400rpx;
}
Save and refresh, and the "Personal Center" page is complete.
Life Guide
The original project only had index and logs in the pages directory, so we need to create a directory for the second page.
There are two ways to create a page:
- On the pages chart of the catalog structure, create a new directory and then create page composition files one by one under the directory.
- Under, just add
The second method is recommended, which is to modify the file:
{
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/details/details"
],
After saving and refreshing, you will see that this page is automatically created in the directory structure. Correspondingly, you should also change the link to the tabBar in (which we have already done):
{
"pagePath": "pages/details/details",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png",
"text": "Guide to Life"
}
Then modify Set the title of this page:
<!--pages/details/-->
<view>
<view class='title'>
<text>21-Day Guide to Zero-Waste Living</text>
</view>
</view>
Modify Sets the style:
/* pages/details/ */
.title {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 40rpx;
margin-bottom: 40rpx;
font-size: 40rpx;
}
This page is a list display page, and we'll prepare the data in the file first:
// pages/details/
Page({
/**
* Initial data for the page
*/
data: {
showModalStatus: false,
list: [
{
id: 0,
name : "Write a Trash Diary.",
introduce: "Zero waste is not a grand project, but is made up of small habits and choices in everyday life. The hardest part is taking the first step.",
src: '../../image/',
showModalStatus: false,
catalog: [
{ section: "1. xxx" },
{ section: "2. xxx" },
{ section: "3. xxx" },
{ section: "4. xxx" },
]
},
{
id: 1,
name: "Bring your own shopping bag.",
introduce: "At our house, plastic bags were the most common thing in the trash at the time, and all of those bags followed me home and pretty much escaped being thrown in the trash.",
src: '../../image/',
showModalStatus: false,
catalog: [
{ section: "1. xxx" },
{ section: "2. xxx" },
{ section: "3. xxx" },
{ section: "4. xxx" },
]
},
/* Omitted */
]
},
Next we're going to use list rendering (wx:for) method binds this data to an array and renders it repeatedly on the page. Modify Documentation:
<view>
<view wx:for="{{list}}" wx:key="id" >
<view class="lesson" id="{{}}">
<image class="lessonPic" mode='aspectFit' src="{{}}"></image>
<view class="lessonName">{{}}</view>
<view class="lessonIntroduce">{{}}</view>
</view>
</view>
</view>
The subscript variable name of the current item of the default array defaults to index, and the variable name of the current item of the array defaults to item.
Modify the file to add a style:
.lesson {
height: 190rpx;
padding-left: 20rpx;
}
.lessonPic {
position: absolute;
height: 150rpx;
width: 150rpx;
}
.lessonName {
position: absolute;
margin-left: 220rpx;
font-size: 35rpx;
}
.lessonIntroduce {
position: absolute;
margin-left: 220rpx;
margin-top: 60rpx;
margin-right: 20rpx;
color: rgb(185, 161, 161);
font-size: 28rpx;
}
Okay, the second page is also done.
Simulate pop-up windows
Next, we want to simulate a pop-up window on the "Life Guide" page, which does not show up normally, but only appears when you click on it, and disappears when you press "OK" at the bottom.
Finished to achieve this function, we have to bind an event handler function bindtap in the component, when clicking on the component, the applet will find the corresponding event handler function in the corresponding Page of the page.
We first introduce a boolean variable showModalStatus in each column of data to describe the status of the corresponding popup, with an initial value of false to indicate that it is not displayed. At the same time, we also add a showModalStatus variable to the outer layer with an initial value of false to realize the masking effect. It is as follows:
data: {
showModalStatus: false,
list: [
{
id: 0,
name : "Write a Trash Diary.",
introduce: "Zero waste is not a grand project, but is made up of small habits and choices in everyday life. The hardest part is taking the first step.",
src: '../../image/',
showModalStatus: false,
catalog: [
{ section: "1. xxx" },
{ section: "2. xxx" },
{ section: "3. xxx" },
{ section: "4. xxx" },
]
},
Then insert a popup window in and render it with a conditional (wx:if) to determine whether to render (display) the popup. Also add data-statu to each item to indicate the state of the popup. It is as follows:
<view>
<view wx:for="{{list}}" wx:key="id" >
<view class="lesson" bindtap='powerDrawer' data-statu='open' id="{{}}">
<image class="lessonPic" mode='aspectFit' src="{{}}"></image>
<view class="lessonName">{{}}</view>
<view class="lessonIntroduce">{{}}</view>
</view>
<! -- pop-up windows -->
<view class='drawer_box' wx:if='{{}}' id='{{}}'>
<view class="title">{{}}</view>
<view class='drawer_content'>
<view class='title' wx:for='{{}}' wx:for-item='catalog' wx:key='id'>
{{}}
</view>
</view>
<! -- OK button -->
<view class='btn_ok' bindtap='powerDrawer' data-statu='close' id='{{}}'>recognize</view>
</view>
</view>
<! -- Masking layer -->
<view class='drawer_screen' data-statu='close' wx:if='{{showModalStatus}}'></view>
</view>
In Add powerDrawer event handling, including display and close events:
powerDrawer: function (e) {
console.log("clicked");
var currentStatu = e.currentTarget.dataset.statu;
var index = e.currentTarget.id;
// Close
if (currentStatu == 'close') {
this.data.list[index].showModalStatus = false;
this.setData({
showModalStatus: false,
list: this.data.list,
});
}
// Show
if (currentStatu == 'open') {
this.data.list[index].showModalStatus = true;
this.setData({
showModalStatus: true,
list: this.data.list,
});
}
},
Finally, set the style of the popup and mask layers:
.drawer_box {
width: 650rpx;
overflow: hidden;
position: fixed;
top: 50%;
z-index: 1001;
background: #FAFAFA;
margin: -150px 50rpx 0 50rpx;
}
.drawer_content {
border-top: 1.5px solid #E8E8EA;
height: 210px;
overflow-y: scroll; /* Scrollable beyond parent box height */
}
.btn_ok {
padding: 10px;
font: 20px "microsoft yahei";
text-align: center;
border-top: 1.5px solid #E8E8EA;
color: #3CC51F;
}
.drawer_screen {
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 1000;
background: black;
opacity: 0.5;
overflow: hidden;
}
OK, the simulated popup is also implemented.
Preview Images
The final step is to implement the image preview and image saving functionality on the first page by adding a click event for the image in previewImage.
<image class='pic' mode='widthFix' src='../../image/' bindtap='previewImage'></image>
Add the imgalist item in (we have uploaded the QR code image of our public website directly to CSDN's image server), and implement the previewImage event handling. It is as follows:
Page({
data: {
motto: 'Hello World',
company: "GoZeroWaste",
lesson: "The 21-Day Guide to Zero-Waste Living.",
position: "Junk Wizard.",
imgalist: ['/'],
userInfo: {},
hasUserInfo: false,
canIUse: wx.canIUse('')
},
previewImage: function (e) {
wx.previewImage({
current: this.data.imgalist, // The http link to the currently displayed image
urls: this.data.imgalist // A list of http links to images to preview.
})
},
Once you're done, click "Preview" in Developer Tools and use WeChat to scan the generated QR code to view it on your phone.
That's it for the tutorial, see you soon!
