Shulou(Shulou.com)05/31 Report--

This article mainly introduces the relevant knowledge of "how to develop in WeChat Mini Programs". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "how to develop in WeChat Mini Programs" can help you solve the problem.

I. preface

WeChat Mini Programs, it is estimated that everyone is no stranger, now there are a lot of application scenarios. Today we will systematically introduce the development of Mini Program. Note that here only from the project code to do analysis, does not involve how Mini Program application, packaging, release of things. (just follow the flow of Wechat's official documentation.) All right, let's cut the crap and look at the catalogue.

Note: Mini Program is a special set of things that combines native and web end. He is an incomplete browser object, so a lot of DOM and BOM things cannot be used, but he implements multithreading through Wechat APP.

How to create Mini Program

Very simple, first download Wechat developer tools, download a stable version of it. Download and then create Mini Program, you can refer to the following pictures:

Note that formal Mini Program needs approval. Get the formal APPID. We can click on the test appid that we have tested or do not have temporarily. It is good to choose Mini Program template by default. After following this process, we have finished creating a Mini Program.

III. Webstrom supports Mini Program development.

After creating the mini program, we are in no hurry to develop it. If you want to do good work, you must first sharpen its tools. Wechat developers' tools are a bit stuck, and they have few functions, and the development efficiency is very low. So let's modify our own compiler, and here are only two methods. One is hbuilderX, he has a module that supports Mini Program, a very small compiler; the other is webstorm, I used him, here to introduce the method of configuration, the rest of you google it.

1. File types that support wxml and wxss, with syntax highlighting. Open the webstorm compiler, click File-Settings-Editor-File Type, find the html file, add * .wxml; find Cascading style Sheet, and add * .wxss. Just OK.

2. Support Mini Program code reminder. Download the file, then put it in a conspicuous place; then, webstorm click File-Import Settings, find the downloaded file, and click OK.

These are the operations in which webstorm supports Mini Program syntax.

IV. Detailed explanation of the basic file catalogue

Then explain the directory structure of Mini Program.

Project.config.json: Mini Program configuration file, including project packaging configuration, automatic compression of upload code, etc., is some development, packaging and other configurations.

App.json: the configuration file for the current project. Including the project page introduction, navigation bar color, navigation bar title and so on, is the project specific to the code development configuration. Introduce several configurations:

Pages: the included page. Each new page must be introduced here, otherwise the json configuration of the new page will not take effect. Notice that the page in pages is written first and rendered first, so the first item in the array is our home page.

Window: configure all page navigation bar fonts, colors, background colors, etc.

App.js: Mini Program entry file. Generate Mini Program instance, App ({}), which is usually used to obtain user information, authorization information, define global variables, and so on.

App.wxss: Mini Program global style file. Effective for the entire project page. Usually specify the font of the project, the base color, and define some common styles.

Utils: tool function catalog. It is usually used to put some common js methods. For example, encapsulated request requests, some other ways to deal with data.

Pages: the page directory of Mini Program. All the Mini Program pages are written in here.

Fifth, improve the project catalogue

The above roughly explained the basic documents of Mini Program, now according to common norms to improve the project directory, which contains some personal opinions, need reference. Let's take a look at the results:

Now explain these catalogs:

Components: we encapsulated Mini Program reusable components.

Constants: Chang Liang in some projects.

Image: the pictures used.

Services: directory of all interfaces used

Roughly built these, if there are other needs, according to their own situation to increase.

VI. detailed explanation of basic grammar

Now give a general explanation of the grammar of Mini Program. First of all, create a new page and create * .wxml * .wxss * .js * .json by default, which is similar to the code we usually write, which is html js css, with an extra json configuration file.

* .json: commonly used attributes have 2 chunks, navigationBarTitleText-related settings top title, usingComponents referenced components

* .js:getApp () gets Mini Program instance, takes global variables, etc.; Page ({}) creates a page; variables of the current data page; onLoad lifecycle. The page is loaded.

* .wxml: note that Mini Program supports few tags, such as span, but not div. Generally, view is used instead of block level, and span and text are used instead of line level.

* .wxss: most css selectors are not supported, but only 5 are supported. If you want to support less, you have to configure it yourself.

/ / json file {"navigationBarBackgroundColor": "# fff", "navigationBarTextStyle": "black", "navigationBarTitleText": "my", "usingComponents": {"menu": "/ components/menu/index"}} / / js file const app = getApp () Page ({data: {}, onLoad: function () {},})

Seventh, realize the page jump

As with normal web development, Mini Program page jump pages are divided into 2 pages, the vavigator tag in wxml, and the navigator-related api in js. There are several ways to jump routes, but I won't repeat them here, the commonly used ones are direct jumps.

Wx.navigateTo, redirect wx.redirectTo, etc., see the official documentation for details. Here is an emphasis on routing parameters, which is simple:

1. Small amount of data. Direct question mark to pass parameters. It is then received through the options parameter in the onLoad method of the target page.

2. Large amount of data. Directly into the global variable.

/ / wxml jump page {{item.name}} / / js jump page wx.navigateTo ({url: `/ pages/my/appointDetail/index?_id=$ {this.data.marker.id}`}) / / routing parameters how to receive onLoad: function (options) {console.log (options)}

VIII. Packaging of wx.request

Create a new request.js in utils, simply encapsulate it, bring in some data that needs to be configured globally, and then do some wrong unified processing, which is not difficult, but pay special attention to the carrying of cookie. The specific code is as follows:

Const app = getApp () export default function request (url, options = {}) {return new Promise (function (resolve, reject) {wx.request ({url: `${app.origin} ${url}`, method: 'GET',... options, data: options.data, header: {' content-type': 'application/json',' cookie': wx.getStorageSync ("cookie")} Success: function (res) {/ / re-authorize login if (res.statusCode = 401) {wx.redirectTo ({url:'/ pages/login/index'}) return} else if (res.statusCode! = = 200) {reject ({error: 'server busy Please try again later', code: 500}) Return} else {if (url = ='/ api/cdz/user/weixin/login') {const cookie = res.header ["set-cookie"] | | res.header ["Set-Cookie"]; if (cookie) wx.setStorageSync ("cookie", cookie);} resolve (res.data) }, fail: function (res) {/ / fail failed to call the interface if (url = ='/ api/cdz/user/weixin/login') {const cookie = res.header ["set-cookie"] | | res.header ["Set-Cookie"]; if (cookie) wx.setStorageSync ("cookie", cookie);} reject ({error: 'network error', code: 0});}})})}

Then we use the encapsulated request method directly when we use it, so that all api is encapsulated into functions. We can just import the call directly in the page.

Import request from ".. / utils/request"; import {stringify} from ".. / utils/util" export function testPost (data) {return request (`/ api/test/ post`, {method: 'PUT', data,})} export function testGet (data) {return request (` / api/test/ get`)}

Use npm (introduce plug-ins such as weui, moment, etc.)

Because Mini Program uses incomplete browser objects, many js packages don't work well, such as jquery. So npm is basically useless, can use the dependency package is very few, specific which can be used to explore their own. Here is a brief introduction to how Mini Program uses npm. After all, some packages still need to be used.

1. Open Wechat developer tools, click on details, and check the use of npm module.

2. Open the command line, go to the root directory of the project, and npm init initializes npm

3 、 npm i . Install the dependencies you need

4. Open Wechat developer tools-Click tools-click build npm. At this point, Mini Program will compile and package the node_modules file to generate a new directory miniprogram_npm.

5. In the js file of the page to be used, const moment= require ('moment') is introduced and can be used directly.

6. Finally, remember to ignore the file. Create a new .gitignore file. Node_modules, package_lock.json and other files do not need to be uploaded. It is best to keep only Mini Program's npm build package and download it with the same dependency. This is not necessary.

Ps: pay special attention to the introduction of weui, this ui library is pure css, there is no js file, so he can not use npm to import, but directly download the file, I directly drop it into the root directory, and then introduce it at the beginning of the app.wxss file

@ import 'weui.wxss';, is used like this

That's all for the content of "how to develop in WeChat Mini Programs". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.