This article does not completely from the perspective of development to describe how to develop a small program, after all the official documents already is complete Stamp here to see the official document: https://mp.weixin.qq.com/debug/wxadoc/dev/.

This article will be from the point of view of how to quickly put on line a small program to elaborate. The main money is the following aspects.

  • Build a small program from scratch
  • Small program test, on-line
  • Common problems in the process of small program development and on-line
  • Use third parties to quickly build applets.
  • Build applets using Wepy

Build a small program from scratch

This step basically depends on the official documentation, and the documentation is very comprehensive, mainly divided into four steps.

  • Register applet
  • Applets basic framework
  • External API

Register applet

Log in small program background register a small program, after registration, record APPID, and configure record background interface service domain name, server domain name and small program background service, small program is a project with high separation between front and back. In addition to calling the interfaces of the third party (mainly the API provided by wechat), all data is the interface of calling its own business system. This is the address of the service system interface.

Download the applets development tool, create a project, and enter the APPID. In addition, the applets require that the domain name of the background interface server must be HTTPS service. If the HTTPS certificate has not been applied for during the development project, there is no problem.

Specific, refer to the official document: https://mp.weixin.qq.com/debug/wxadoc/dev/

Applets basic framework

The official document has detailed information: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/MINA.html. Here is a simple explanation: the basic mode of small program development.

  • Global configuration:

    • Json configures the global parameters of the system, including but not limited to:
      • Pages, the path of all the pages contained in the applet
      • Window, the basic style of the applet window
      • TabBar: Main navigation menu for the applet (optional, no menu at the top or bottom if not configured).
      • Other configurations, as well as some optional options, are not described here
    • The global life-cycle actions of the app.js applet can be written here, such as when the applet is first started, when it is destroyed, and so on.
    • The global style of the app.wxSS applet, which is equivalent to a common style file in HTML that is referenced by all pages.

  • Each page development official specification applet page contains WXML, WXSS, JS three files, respectively corresponding to: page, style, JS (business logic). Of course, you can also uninstall everything in WXML and introduce styles and JS via style and script, but this is not recommended because it is not easy to maintain when the page is complex.

Small program test, on-line

Applet test

The small program development tool itself has a preview function, the development project can see the page effect in real time, but also through the “preview” button generated by the small program code, with wechat scan preview small program. Test process make full use of small program console, can be very convenient to do debugging.

Applets go online

Small program on-line process itself is very simple, click the “upload” button on the small program development tool will be uploaded to the small program management background; Then log in the mini program management background to release the version, and the rest is handed over to the wechat team for review. It generally takes 3-5 days, and holidays will be postponed.

Common problems in small program development and online process

Development process issues

  • Background interface adjustment During development To avoid frequent adjustment and make background services online, you can set the interface address to local during development and disable HTTPS authentication for development tools to improve development and debugging efficiency.
  • For the adaptation of different screens, in the development process, for the same page should often conduct a comprehensive test for different mobile phone type simulators, development tools provide different mobile phone type simulators, very convenient test.
  • Check pages configuration in app.json. You may have forgotten to add new pages to Pages. (Yes, I’m talking about myself.)

On-line problem

Just said that the online process itself is not complicated, but we should pay attention to the name, description and content covered in the small program, small program audit is very strict, to avoid being hit back, such as the following common call back situation.

  • The mini program of personal account cannot contain: news, forum, community, recruitment, etc
  • The category of the applet was chosen improperly
  • Do not put incomplete or experience functions in small programs, such as links can not be opened, music and video playback can not be played, pictures can not load, service interface response is too slow.

About the common problems encountered in the follow-up development process to supplement and improve.

Use third parties to quickly build applets

In fact, online a small program a lot of time do not need to develop their own, you can use the third party services online there are many other third party small program generator, at present I only tried light mang small program +, the experience is good; Later tried other home supplement.

Build applets using Wepy

Finally, WE recommend Wepy, a componentized development framework for small programs, which is closer to the current MVVM framework development model. The development process can discard wechat’s official small program development tools and only use it during the test preview. And later code migration to H5 is also more convenient. And wepy WeChat official product, don’t have to worry about support issues, specific usage does not go into here, you can view the official document: https://tencent.github.io/wepy/