1: A project to build a WeChat applet
2: Please refer to the following link, which is the official development guide for WeChat Mini Programs:
https://mp.weixin.qq.com/debug/wxadoc/dev/component/button.html?t=20161222
3: You can copy some example programs to the project you created and use the components of the WeChat applet, as shown in Figure 1:
We can write the layout of the first page in first.wxml. For example, in Figure 1, we wrote a string: "1234567890abcdefg". Below this character, we wrote a button of the WeChat applet, and the content displayed by the button is "default" ”, type=”default”---This means that the button is the default display effect, as shown in the simulator on the left of Figure 1 as a rounded light gray button with no borders on the left and right sides.
Note: Many netizens will find that after writing the code in the WeChat applet development tool and then clicking the "compile" button at the bottom left of the WeChat applet development tool, there is no response in the simulator. In fact, this is because you have finished writing the code. The code should hit Ctrl+s on the keyboard, save the code, and then click "Compile", so that the effect of the corresponding code can be displayed in the simulator.
figure 1
4: Binding of button display content and click event:
We implement a function below: after the button is clicked, the content of the button is replaced with the new content
1) Add the following code to first.wxml: where bindtap="btnClick" is the method to bind the click time of the button: btnClick(), {{btnText}} is the variable bound to the content displayed by the button: btnText
<button type="primary" bindtap="btnClick"> {{btnText}} </button>
2) Method: btnClick() and variable: btnText should be implemented in first.js, as shown in Figure 2
figure 2
3) Before and after the button is clicked, the simulator display effect is shown in Figure 3:
image 3
5: Preliminary use of text components:
We implement a function below: after clicking the button, modify the initial content of the text component, then click the button again, the content of the text component disappears, and then click the button again, the content of the text component appears. . . . . . And so on.
1) Add the following code to first.wxml:
<text wx:if="{{isTextShow}}">{{text}}</text>
Figure 4
6: Content List
Add the following code to first.wxml:
<view wx:for="{{news}}" wx:for-item="newsItem">
{{index}}: {{newsItem}}
</view>
data:{ }
Add the following code to:
news:['Line 1 information','Line 2 information','Line 3 information']
The result is shown in Figure 5:
Figure 5
7: Add header and footer to the page
Create a new folder templates, and create new files under the folder: footer.wxml and header.wxml
Add the code shown in Figure 6 to the file
Image 6
The simulator shows the result as shown in Figure 7
Figure 7