项目文件构成
Foreword: The
Mini Program contains an app describing the overall program and multiple pages describing their respective pages.
The main part of a small program consists of three files (app.js, app.json, app.wxss files), which must be placed in the root directory of the project.
A small program page consists of four files (js page logic file, wxml page structure file) , json page configuration, wxss style file) composition
After the WeChat Mini Program project is successfully created, the following folders will be generated:
Different types of files are generated in this project:
.jsonSuffixed JSON configuration file.wxmlSuffixed WXML template file, similar to html file.wxssSuffixed WXSS style file, similar to css file.jsSuffixed JS script logic file
Next, take a look at the functions of these 4 files:
1. JSON 配置
JSONIt is a data format, not a programming language. It JSONplays 静态配置a role in a small program .
It can be seen in the root directory of a project app.jsonand project.config.json:
Applet configuration app.json
app.json is the global configuration of the current applet, including all page paths, interface performance, network timeout, bottom tabs, etc. of the applet. Templates created in app.jsonthe configuration as follows:
pagesField-used to describe the path of all pages of the current Mini Program, this is to let the WeChat client know which directory your Mini Program page is currently defined in.
windowField-define the top background color of all pages of the Mini Program, text color definition, etc.
Page layout:
each small page program can also use the same name as the .jsonfile to configure the window performance this page, the page configuration items will be covered by app.jsonthe windowsame configuration items.
"window": {
"backgroundColor": "#F6F6F6",
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#F6F6F6",
"navigationBarTitleText": "云开发 QuickStart",
"navigationBarTextStyle": "black"
}
Tool configuration project.config.json
Usually when you use a tool, you will do some personalized configuration according to your own preferences, such as interface color, compilation configuration, etc., when you change to another computer to reinstall the tool, you have to reconfigure it.
With this in mind, the Mini Program Developer Tool will generate one in the root directory of each project. project.config.jsonAny configuration you make on the tool will be written to this file. When you reinstall the tool or change your computer to work, you only need to download Enter the code package of the same project, the developer tool will automatically restore you to the personalized configuration when you developed the project at the time, which will include a series of options such as the color of the editor, automatic compression when the code is uploaded, etc.
Page configuration page.json
Under the pages page.jsonactually used to represent pages/logsdirectory logs.jsonof these pages and applets related configuration.
If the style of your entire mini program is blue, then you can declare the top color to be blue in app.json. But if each page in your applet has a different color tone to distinguish different functional modules, this is the role of page.json, allowing developers to independently define some properties of each page, such as the top color, Whether to allow pull-down refresh and so on.
2. WXML 模板
The front-end web page is composed of a static page through HTML + CSS + JS, where HTML is used to describe the structure of the current page, CSS is used to describe the style of the page, and JS is usually used to process the interaction between this page and the user.
In small programs, WXML plays a role similar to HTML. Project templates are as follows: which <view></view>is similar htmlin<div></div>
<view class="container">
<view class="userinfo">
<button wx:if="{
{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
<block wx:else>
<image src="{
{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{
{
userInfo.nickName}}</text>
</block>
</view>
<view class="usermotto">
<text class="user-motto">{
{
motto}}</text>
</view>
</view>
As above, let's talk about the differences:
标签名字有点不一样
Packing up commonly used components greatly improves development efficiency. Applet WXMLused tags are view, button, textand so on, these labels is a small program for developers packed basic capabilities, small micro-channel official program also provides maps, video, audio, etc. assembly capacity.
遵循Vue语法
There are more attributes such as wx:if and expressions such as { {}},MVVMthe development model used (such as React, Vue, which advocates the separation of rendering and logic. Don't let JS directly control the DOM, JS only needs to manage the state. Yes, and then use a template syntax to describe the relationship between state and 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:
<text>{
{
msg}}</text>
JS only needs to manage the state:
this.setData({
msg: "Hello World" })
Binding a variable to the interface through the syntax of { {}} is called data binding. Data binding is not enough just by complete description of the relationship between the state and the interface needs if/else, forsuch as the ability to control, in a small program inside, these control capabilities are used wx:to express the beginning of the property.
3. WXSS 样式
WeChat applets WXSShave CSSmost of the characteristics, and the applets have also been expanded and modified in WXSS.
- Added dimension units.
When writing CSS styles, developers need to consider that the screens of mobile devices will have different widths and device pixel ratios, and use some techniques to convert some pixel units. WXSS supports new size units at the bottom layer rpx. Developers can avoid the trouble of conversion and just leave the conversion to the bottom layer of the small program. Because of the floating point calculation used in the conversion, the calculation result will be a little bit different from the expected result.
- Provides global style and local style.
And front app.json, page.jsonthe same concept, you can write a app.wxssas a global style, it will act on all the pages of the current applets, partial page style page.wxssonly the current page to take effect.
- WXSS only supports some CSS selectors
For more detailed documentation, please refer to WXSS.
4. JS 逻辑交互
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 click, obtain the user's location, and so on. In the applet, we process user operations by writing JS script files.
<view>{
{
msg }}</view>
<button bindtap="clickMe">点击我</button>
Click the button button, we want to put on the screen msgdisplay to "Hello World", so we declare a property on the button : bindtap, in the JS file inside declares clickMemethod in response to the click operation:
Page({
clickMe: function() {
this.setData({
msg: "Hello World" })
}
})
In addition, we can also call in JS rich API applet provided by the API can be easily transferred from the ability to provide micro-channel, such as 获取用户信息, 本地存储, 微信支付and so on. In front of QuickStart example, the pages/index/index.jsis called the wx.getUserInfoacquired user's head and the micro-letter nickname, and finally by setDatathe acquired information is displayed on the screen. Learn more about WeChat Mini Program API
The article is referenced from the official website: https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html
No one who learns a programming language knows his own language better than the official one. The best way to learn is to look at the official documentation.