A small program page consists of four files, namely:
File Type Required Function
js is page logic
wxml is page structure
json no page configuration
wxss no page style sheet wxss no page style sheet @[TOC]
But we create a page, the fastest way is to name a file in app.json, and after saving the file, a page with js/wxml/json/wxss will be generated. No need to create individual files.
For example , index page, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
JS logic Interaction
For details, please refer to the document https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
It is not enough for a service to only display the interface, it also needs to interact with the user: respond to the user's clicks, get the user's location, etc. In the applet, we handle user operations by writing JS script files.
{
{ msg }} When
I click
the button button, we want to display the msg on the interface as "Hello World", so we declare an attribute on the button: bindtap, and declare the clickMe method in the JS file to respond to this click operate:
Page({ clickMe: function() { this.setData({ msg: “Hello World” }) } }) ,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,, JSON configuration Please refer to the document https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/page.html for details The applet page can also use the .json file with the same name to configure the window performance of this page, and the configuration items in the page will override the same configuration items in the window of app.json.
For example:
{ "navigationBarBackgroundColor": "#ffffff", //Navigation bar background color "navigationBarTextStyle": "black", //Navigation bar text color "navigationBarTitleText": "WeChat interface function demo", //Navigation bar title text content "backgroundColor ": "#eeeeee", //The background color of the window "backgroundTextStyle": "light" //Drop-down loading style, only supports dark / light } ,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,, WXML template details, please refer to the document https://developers.weixin.qq.com/miniprogram/dev/framework /view/wxml/ People who have been engaged in web programming know that web programming uses a combination of HTML + CSS + JS, where HTML is used to describe the structure of the current page, CSS is used to describe the appearance of the page, and JS is usually Used to handle the interaction between this page and the user.
For the same reason, it also has the same role in applets, where WXML plays a role similar to HTML. Open pages/index/index.wxml, you will see the following:
Get avatar nicknameThe label name is a bit different
When writing HTML, the tags that are often used are div, p, and span. When writing a page, developers can combine different components based on these basic tags, such as calendars, pop-up windows, and so on. Another way of thinking, since everyone needs these components, why can't we package these commonly used components to greatly improve our development efficiency.
As can be seen from the above example, the WXML tags of the applet are view, button, text, etc. These tags are the basic capabilities packaged by the applet for developers. We also provide components such as maps, videos, and audio ability.
For more detailed component descriptions, refer to the next chapter about the capabilities of applets
There are more attributes like wx:if and expressions like { { }}
In the general development process of web pages, we usually manipulate the DOM (corresponding to the tree generated by the HTML description) through JS to cause some changes in the interface to respond to user behavior. For example, when a user clicks a button, JS will record some status into JS variables, and at the same time manipulate DOM properties or behaviors through the DOM API, thereby causing some changes in the interface. When the project gets bigger and bigger, your code will be filled with a lot of interface interaction logic and various state variables of the program. Obviously this is not a good development model, so there is an MVVM development model (such as React , Vue), advocating the separation of rendering and logic. To put it simply, do not let JS directly manipulate the DOM, JS only needs to manage the state, and then use a template syntax to describe the relationship between the state and the interface structure.
The framework of the applet also uses this idea, if you need to display a Hello World string on the interface.
WXML is written like this:
,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
WXSS style
details please refer to the document : https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
WXSS has most of the features of CSS, and the mini program has also made some expansions and modifications in WXSS.
Added dimension units. When writing CSS styles, developers need to consider that screens of mobile devices have different widths and device pixel ratios, and use some techniques to convert some pixel units. WXSS supports the new size unit rpx at the bottom layer. Developers can avoid the trouble of conversion. They just need to hand it over to the bottom layer of the applet for conversion. Since the conversion uses floating-point calculations, the calculation results will be slightly different from the expected results.
Provides global styles and local styles. The concept is the same as app.json and page.json above, you can write an app.wxss as a global style, which will be applied to all pages of the current applet, and the local page style page.wxss will only take effect on the current page.
In addition, WXSS only supports some CSS selectors