Personal Mini Program Application Development Guide

Mini programs are dependent on major platforms. Mini programs such as Alipay, WeChat, Toutiao, and Baidu are all developed on the platform. The platform provides corresponding technical support and user environment. For individual developers, this is quite convenient. It has traffic attributes and is easy to spread.

Convenient development

---

I have been working on my own small program recently, so I will summarize it in this whole article. If you have already developed a small program, you don’t need to read this article.

Mini program development is quite convenient. With official documents, WeChat Mini Program Documentation, Alipay Mini Program Documentation, it can be run locally. If it is just simple For display, you only need to upload it after development and wait for review. With just a little front-end basics, you can develop your own small program, and students with ideas can take action.

If you encounter problems during development, you can also ask for help in Mini Program Community , WeChat Mini Program Community.

is not for official promotion. If you want to develop your own application, a mini program is a quick solution that can be easily developed, quickly released, and comes with its own dissemination function. Below I will select the WeChat applet to explain.

WeChat native mini program development

<!-- 项目目录结构 -->

|—— component               组件目录
|—— pages                   page页面目录
|   ......more dir           
|   |—— index               index页面
|   |  |—— index.js         index.js- js逻辑文件     
|   |  |—— index.json       index.json- json配置文件
|   |  |—— index.wxml       index.wxml- wxml页面结构
|   |  |—— index.wxss       index.wxss- wxss页面样式
|—— app.js                  全局js文件
|—— app.json                全局json配置文件
|—— app.wxss                全局样式文件
|—— project.config.json     项目配置
|—— sitemap.json            爬虫文件

Import the project into the mini program development tool and you can start development. To add a page, add a new file directory directly to the pages directory. For specific details, please refer to the WeChat Mini Program Document

Grammar support:

• The latest version of the library currently supports Es6/Es7, async/await and Promise;

• The development tool will convert the code into Es5 syntax to ensure style adaptation for various models;

• Part of the syntax is similar to vue and react;

Component support:

• Provide template support, WeChat applet template;

• Component custom component support, there is a life cycle inside the component, Component custom component;

API support:

• You can call encapsulated system native methods, such as Bluetooth, network information, code scanning and other API methods;

• Conventional methods such as: Storage, Reqeuest, Animation, Canvas, etc. For more information, you can view WeChat Mini Program API;

In addition to native development of mini programs, of course you can also use frameworks. I personally think Taro The framework is good and supports multi-terminal small program development

Taro development

---

##TaroDevelopment documentation, Taro supports multi-terminal development, including WeChat/Baidu /Alipay/Toutiao Mini Program, H5, React-Native. At present, I have only used and developed WeChat Mini Program and Alipay Mini Program, H5, and have not tried the others.

|—— config                              开发配置文件
|—— dist                                目标文件目录
|—— src                                 开发目录
|   |—— actions                         redux action文件
|   |—— constants                       常量文件
|   |—— pages                           page页面目录
        ......more dir
|   |   |—— index
|   |   |   |—— index.scss
|   |   |   |—— index.txs
|   |—— reducers                        redux reducers文件
|   |—— store                           redux store文件
|   |—— app.scss                        app全局样式
|   |—— app.tsx                         app全局js
|   |—— index.html                      html文件
|—— .editorconfig                       editor配置文件         
|—— .eslintrc                           eslint配置文件
|—— global.d.ts                         global配置
|—— tsconfig.json                       ts配置文件
|—— package.json
|—— project.config.json
|—— readme.md

Grammar support:

• ts grammar support;

• React grammar specification;

• Support the use of CSS precompiler;

• Es6/Es7 syntax support, if you need updated syntax, you can configure it in the configuration config;

Component support:

• react component development, but it will eventually be compiled into a native applet;

npm package:

• Supports npm/yarn management;

• Can use Redux for state management;

API:

• Encapsulate the mini program API and H5 API once, which is more convenient;

react ts npm package, basic This is the normal rhythm of front-end development. No matter which small program you develop, you only need to run the corresponding command, and at the same time, import the dist directory file into the development tool to see the effect.

taro and native mini programs

---

Native mini programs: Get started quickly. For students who have been exposed to front-end development, they can get started immediately. There are technical barriers. Programming forWeChat Mini Program Document.

Taro development: react syntax specification, react component development, ts syntax support, and redux support. Highly recommended for students who have a preference for react. If you like react, it is recommended to use Taro for development. (Easy for team collaboration).

Mini program development issues

WeChat mini program Cookies cannot be used

WeChat mini program Non-HTTPS domain names are not supported

WeChat Mini ProgramThe sharing API is a synchronous operation, and the callback cannot be monitored if it succeeds or fails

WeChat Mini Program The APIs of wx.setStorageSync and wx.getStorageSync frequently report errors

WeChat appletThe 1M limit of setData data can be solved by data splitting

WeChat Mini ProgramThe limit of the main package is 2M, which makes it impossible to introduce too many external files (using Taro will rely on npm packages)

WeChat Mini ProgramWeChat development tools occupy too much CPU. Causing computer lag

Of course, the problems are definitely not limited to these, and there are also issues such as native components, APIs, official plug-ins of WeChat mini programs, etc. I will not go into details here, but for students who want to make their own mini programs , these are basically enough.

But some people may ask, hasn’t the framework not been discussed yet? In fact, when you use Tora to develop small programs, you are just using different syntax when writing small programs. Finally, the command tool will convert the file into the file format of the native small program.

Personal Application

No matter which method you use to develop your personal application, you will eventually return to the product itself. Using technology to complete the personal application in your mind and provide the application to users is the ultimate goal. (Technology is just a means, and the product is the goal) However, I personally use Taro for development, which is just a taste.

Not much nonsense, I hope the personal project source code can help everyone

github: wxSapp personal applet source code

Recommended tutorial: "WeChat Mini Program"

The above is the detailed content of Personal Mini Program Application Development Guide. For more information, please follow other related articles on the PHP Chinese website!