1. Development language
The main development language of
WeChat applet is javascript; wxml + wxss files are used to describe the interface;
app.json + app.wxss files are used to configure the project;
2. What are wxml and wxss?
For Android, the description of the page is basically defined in xml, such as:
<FrameLayout
android:id="@+id/layout"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textViewHello"
android:textSize="20sp"
android:textColor="#f00"
android:layout_width="200dp"
android:layout_height="wrap_content"
android:text="Hello World!"/>
</FrameLayout>Page structure: A FrameLayout with an id of layout, which contains a TextView with an id of textViewHello.
Page style: The respective attributes of FrameLayout and TextView: width, height, TextView and font size, color, text content, etc.
The wxml + wxss method used by the WeChat applet:
some.wxml:
<view class="userinfo">
<image class="userinfo-avatar" />
<text class="userinfo-nickname">张三</text>
</view>some.wxss:
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-nickname {
width: 128rpx;
color: #aaa;
}Obviously, it can be seen that: wxml is responsible for the display of page structure; and wxss is responsible for the definition of page style.
This separation of structure and style is actually a continuation of the habit of web development (html + css).
There are at least two benefits of doing so:
One is to make the code division of responsibilities more clear and structure clear.
The second is to avoid many duplicate codes. (When you are writing Android xml files, do you often encounter many repeated attributes that need to be separated into a style? This is basically the idea of a style sheet)
3、app.js
app.js is basically equivalent to the Application class in Android. There is mainly an App() function in the file to initialize the applet.
It provides some callback functions about the entire applet life cycle: onLaunch, onShow, onHide, onError, etc. For example, if the developer has some operations that need to be executed when the applet is started, they can execute it in the onLaunch function.
[Compared with Android] Our initialization operation in Application's onCreate function.
It provides a globalData to store public data throughout the use of the applet.
[Compared to Android] Sometimes we also put some data in a custom Application for different pages to use.
The applet provides a global getApp() method to get the App instance of the applet.
[Compared to Android] Think about the getApplication() method~ :-D
4、app.json
The role of app.json is very similar to the AndroidMainifest.xml file in Android-both are static configuration files.
- Declare and set the path of each page: the page must be declared here before it can be used.
- Configure the style of the page (navigation bar color, text font, etc.)
- Configure the Tab bar at the bottom
- Set the general TimeOut time, whether it is debug mode, etc.
[Compared with Android] Activity also needs to be declared in the AndroidMainifest.xml file, and the theme of the App can also be set here.
5、app.wxss
app.wxss defines the global style-the style defined will be applied to each page. For example, add in app.wxss:
text {
padding:5px;
}You can add 5px padding to all text controls.
Of course, the xxPage.wxss of the page itself can define a local style to override the global style.
[Compared to Android] There is no global setting similar to app.wxss in Android. We need to define the attributes of each control in each layout.xml. Even if we can use style files to extract some uniform styles, we still need to Set the attributes of each View to use this style-from this perspective, using wxss is more advantageous.
6, util folder
There is a util.js file in the utils folder under the root directory, which is named as it is, and is similar to the existence of some tool classes in Java.
The utils folder is actually a non-essential structure, and the reason why it appears in the official HelloWorld project is as a representative, indicating that developers can customize new folders and structures here. As a platform developed using js, WeChat applets can use many third-party js libraries. For these third-party libraries and other image resources, they can be placed in a custom folder.
7, pages folder
The pages folder contains two subdirectories: index and logs. The structure of the two directories is basically the same, and both contain four files with the same main name: xx.js, xx.wxml, xx.json, xx.wxss These few files.
Such a typical structure shows that it is a page of a small program. The functions of the four files are:
- xx.js: The main logic of the page [equivalent to xx.Activity of Android]
- wxml: the structure of the page [equivalent to the structure of the Android layout file activity_xx.xml]
- wxss: page style [equivalent to the style part of the Android layout file activity_xx.xml]
- json: The configuration of the page is similar to the app.json mentioned above, but only window-related properties can be configured, which will override the configuration
of the same name in app.json . In Android, xx.Activity and the layout file
activity_xx.xml are not in the same directory, you need to use setContentView to associate them.
However, in the WeChat applet, this work does not need to be done manually. WeChat mandates that four files related to a page need to be named consistently and placed in the same folder.
8. Android's business logic is written in Java files, and small programs are written in js; the same Android-like page life cycle, small programs also have a life cycle:
onLoad: function(options) {
// 页面初始化
},
onReady: function() {
// 页面渲染完成
},
onShow: function() {
// 页面显示
},
onHide: function() {
// 页面推到后台
},
onUnload: function() {
// 页面关闭
},Small programs are not like Android which can monitor the return key of the page, so you can handle the business when the page returns in onUnload.
9. Similar to the Application class in Android, the app.js in the applet is equivalent to the global entry. If the developer has an operation that needs to be performed when the applet is started, it can be executed in the onLaunch method.
app.js also provides a globalData, which is used to store public data during the entire use of the applet.
In other pages, you can use the getApp() method to obtain the App instance of the applet to use the global public data.
10. If some simple data needs to be stored, similar to SharedPreferences in Android, the applet can use wx.setStorageSync("key", value); to store; wx.getStorageSync("key"); to retrieve;
11. The data transfer between pages can only be through routing in the applet, which is the data to be transferred on the jump link splicing:
transfer data:
//let obj = JSON.stringify(obj);
wx.navigateTo({
url: '/pages/index/index?id=' + id,
})accept:
onLoad: function(options) {
// let obj = JSON.parse(options.obj);
let id = options.id；
}If you want to pass an object, you can use JSON.stringify(obj); to convert the data into a string before passing it, and use JSON.parse(obj); to convert back to an object when receiving;
12. Data refresh; after processing the data, we will use this.setData({...}) to update the data source, but many beginners will make a mistake, see the following error code:
wx.request({
url: "request_url",
success: function (res) {
this.setData({...})
}
});According to the above program, an error will be reported, and then look at the correct code:
let that = this;
wx.request({
url: "request_url",
success: function (res) {
that.setData({...})
}
});The difference between the two is that there is an extra variable that, and it is assigned a value in the onLoad() method to make it equal to this. In fact, to put it plainly is a scope problem; in fact, we have also encountered in Android, that is, when jumping to set this in the click event, we will write the class name, similar to: Intent intent = new Intent(MainActivity.this ,TestActivity.class);.
13: Event interception: There are many event interception processing in Android; applets are no exception. Look at the following small program layout:
<view bindtap="onclick">
<image bindtap='tapclick'></image>
</view>As above, I set the bindtap click event for both the child and parent views. At this time, when you click down, you will find that both events are executed. This is called event bubbling in the applet; if the image is clicked, the view is not clicked. catchtap attribute; modify as follows:
<view bindtap="onclick">
<image catchtap='tapclick'></image>
</view>Summarized some information on the Internet, I hope it will be helpful to everyone!