Shulou(Shulou.com)06/02 Report--

This article will explain in detail how to use the MINA framework in the development of WeChat Mini Programs. The content of the article is of high quality, so the editor shares it for you as a reference. I hope you will have some understanding of the relevant knowledge after reading this article.

MINA is the framework for Wechat to develop Mini Program:

MINA's goal is to make it as simple and efficient as possible for developers to develop services with a native APP experience in Wechat.

The project running MINA must have Wechat web developer tools and WeChat Mini Programs's AppID. Because it is still in the internal testing stage, most people do not have AppID yet. Fortunately, some gods have cracked IDE, so you can experience it first. For more information, please refer to WeChat Mini Programs's development materials collection.

There are four types of files in the MINA framework:

The logical layer framework of .js file based on JavaScript

.wxml view layer file, which is a set of tagging language designed by MINA

.wxss style file, which describes the component styles of WXML

.json file, configuration file, for the configuration of a single page and for the configuration of the entire project

Directory structure

To reduce the number of configuration items, four files on one page of Mini Program must have the same path and file name. Create a project using Wechat web developer tool, and you can see that its directory structure is as follows:

App.js is the entrance to the program, app.json is the configuration file of the project, app.wxss is the style file of the global configuration, logs and index folders are files of a single page, and utils is used to store commonly used tool folders.

App.js

App.js uses the App () function to register a Mini Program, which can specify the life cycle of Mini Program.

There are three events in Mini Program's App () life cycle that you can listen to: onLaunch,onShow,onHide.

OnLaunch: this is called after Mini Program is loaded, and is triggered only once globally.

OnShow: Mini Program starts, or triggers once from the background to the foreground

OnHide: Mini Program triggers once from foreground to backstage.

For example:

App ({onLaunch: function () {console.log ('App Launch')}, onShow: function () {console.log (' App Show')}, onHide: function () {console.log ('App Hide')}, globalData: {hasLogin: false}})

The globalData of app.js can set global variables, the instance of Mini Program can be obtained through the getApp () function on a page, and the instance of the current page can be obtained by using getCurrentPage () of App.

App.json

App.json is Mini Program's global configuration including: page path, window performance, setting network timeout, development mode and so on.

Page configuration pages: sets the path to the page

"pages": ["pages/index/index", "pages/logs/logs"]

Configure the path of the index and logs pages, where the relative path is used to configure the page path.

Window configuration windows: used to configure the color of the status bar, the style and color of the navigation bar, the title, and the background color of the window:

"window": {"backgroundTextStyle": "light", "navigationBarBackgroundColor": "# ffffff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle": "black"}

The Color used is a hexadecimal color value, such as "# ffffff"

Note:

The color of navigationBarTextStyle and navigation bar only supports black/white.

For backgroundTextStyle, the drop-down background style only supports dark/light.

TabBar: set tab application. TabBar is an array, which requires at least 2 configurations. A maximum of 5 tab,tab can be configured to sort the data in order:

"tabBar": {"color": "# dddddd", "selectdColor": "# 3cc51f", "borderStyle": "black", "backgroundColor": "# ffffff", "list": [{"pagePath": "pages/index/index", "iconPath": "image/wechat.png", "selectedIconPath": "image/wechatHL.png", "text": "Home Page"} {"pagePath": "pages/logs/logs", "iconPath": "image/wechat.png", "selectedIconPath": "image/wechatHL.png", "text": "log"}]}

Two tab pages, index and log, are set up here, and the results are as follows:

NetworkTimeout sets the timeout for network requests. Mini Program has four types of network requests.

Wx.request normal http request, configured as request

Wx.connect stock link, configured as connectSocket

Wx.uploadFile uploads files, configured as uploadFile

Wx.downloadFile download file, configured as downloadFile

Configuration unit is millisecond, for example:

"networkTimeout": {"request": 10000, "connectSocket": 10000, "uploadFile": 10000, "downloadFile": 10000}

Debug: debug mode is turned on in the development tool, and debugging information can be seen on the console panel. We can also use console.log ('onLoad') to enter log to help us debug the program.

"debug": true

App.wxss

The style defined in app.wxss is a global style, acting on every page, the .wxss file defined in page is a local style, acting only locally, and the definition of local style will override the style defined in app.wxss.

Definition of the style:

.container {height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;}

The rpx in 200rpx is reponslve pixel, which can be adapted according to the width of the screen and 1rpx=0.5px=1 physical pixels on iPhone6. WeChat Mini Programs suggested that the design should be based on iPhone6.

Use of styles:

Page

Use the Page () function to register a page and specify the page's initial data, life cycle function, event handling, and so on.

The initial data of the data page, and the defined data can be updated using setData

OnLoad page load event

OnReady page rendering completed

OnShow page display

OnHide page hiding

OnUnload page uninstall

For example:

Page ({data: {logs: []}, onLoad: function () {this.setData ({logs: (wx.getStorageSync ('logs') | | []) .map (function (log) {return util.formatTime (new Date (log))})}))

In addition, the file .wxml used by page is a page file, which uses a defined set of tag language, and .wxss is a local style file. For example, a .json partial configuration file, such as setting its navigationBarTitleText in a separate page, can be set in the .json file:

{"navigationBarTitleText": "log file"} about how to use the MINA framework in WeChat Mini Programs's development is shared here. I hope the above content can be helpful to you and learn more knowledge. If you think the article is good, you can share it for more people to see.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.