The following text uses wXApp to refer to applets
1. Project introduction
Wxapp is a wechat applets project based on uni-App and developed using vue.js syntax.
2. Development tools
-
Devtools: wechat developer tool. download
After installation, log in the wechat developer tool using the developer account wechat and open the service port in the security Settings of the developer tool
-
HBuilderX: Web development IDE from DCloud. download
After the installation is complete, you need to modify the correct installation path of the wechat developer tool in the operation configuration
Recommended plug-ins: NPM, built-in terminal, UNI-app compilation, ESlint-JS, JS compression, CSS compression, less compilation, SCSS/SASS compilation
3. Preparation before development
3.1 Applet account Registration
Register a mini program account on wechat public platform.
3.1 Development environment construction
Node.js: Download and install Node.js and NPM. Reference documentation
Vue-cli: Globally install vue-CLI scaffolding. Reference documentation
npm install -g @vue/cli
Copy the code
3.2 Creating uni-App
vue create -p dcloudio/uni-preset-vue wxapp
Copy the code
Modify manifest.json to configure the registered applets appId
3.3 uni – UI library
Uni-ui is a cross-end UI framework provided by DCloud based on VUE components and Flex layout.
Easycom component mode: global introduction of registered components according to configuration rules, without additional introduction, registration can be used.
Pros: Pack as needed
-
Uni-ui Installation (VUE-CLI + Easycom)
npm i @dcloudio/uni-ui --save npm i sass -D npm i sass-loader -D Copy the code
-
Edit pages. Json in the root directory to add the easycom node
// pages.json { "easycom": { "autoscan": true."custom": { // uni-UI configuration rules "^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue"}},// Other configurations pages: [ // ...]}Copy the code
4. Project files and directories
- API: Restful request directory, using fly.js to send HTTP requests.
- Components: Custom global component directory.
- I18n: Internationalization directory.
- Static: Indicates the static resource directory. Due to the package size limitation of applets, necessary static resources need to be migrated to the OSS server.
- Store: vuEX status management directory. Reference documentation
- Utils: directory for custom utility classes.
- Baseurlconfig. js: custom environment configuration file.
- Pages: main package page directory.
- App.vue: Main component, entry file for all pages, used to configure global styles and monitor the application lifecycle. But you can’t write view elements because you’re not a page.
- Main.js: entry file for the project, mainly used for initialization
vue
Instance that defines the global component. - Manifest. json: configuration file of wXApp application.
- Package. json: WxApp application extension node configuration.
- Pages. Json: WxApp application pages manage global configuration files.
5. Development process
The following development process uses HBuilderX as an example.
The main package and sub-package pages follow the same component development process. Use the Pages directory for page development and the Components directory for component development.
5.1 Component Development
- select
components
Right-click the target location in the directory and choose New Component. It is recommended to use the SCSS template page. - Component logic code development, can introduce related utility classes, services, other components, etc.
5.2 Page Development
-
Right-click in the Pages directory and choose New page from the shortcut menu. It is recommended to use the SCSS template page.
-
Add pages under the Pages node of pages. Json to configure the registration page. If registered in pages. Json is selected in the previous step, the configuration is automatically added when the page is created. You can directly edit the page without manually configuring it. Reference documentation
{ / /... Other configuration // The first item of the node is the entry page of the application (i.e. the home page) "pages": [{"path": "pages/xxx".// Page path "style": {} // page window representation}}]Copy the code
-
Page logic code development, can be required to introduce related tools, services, components, etc.
In most cases, whether it’s a component or a page, you need to add the scoped attribute to the
Added 6.
6.1 Importing and Registering User-defined Components
<template> // ... </template> <script> // 1. Import components import XXX from '@/components/ XXX 'export default {// 2. {XXX}, //... } </script> <style lang="scss" scoped> /* * ... */ </style>Copy the code
6.2 tabBar configuration
If you want to add a TAB at the bottom of an application for switching, tabBar is recommended. TabBar configuration is provided in pages. Json for rapid development and improved performance. Reference documentation
6.3 Route and Page Redirect
Uni-app provides a series of routing and page-hopping apis and personalized routing configurations for rapid development. Reference documentation
6.4 subPackages and preloadRule for subcontracting optimization
Due to the volume limitation and resource loading limitation of small programs, the subcontracting loading mechanism of small programs should be used to split applications and configure subcontracting loading rules.
When the small program starts, it will load the main package and open the page in the main package by default. When the user enters a page of the subpackage, the subpackage will be automatically loaded and displayed after completion. The subcontracting configuration can effectively reduce the number of JS loaded during application startup and improve the application startup speed.
SubPackages are subPackages. They receive an array of objects. Each item in the array corresponds to a subpackage of the application.
The attribute name | type | If required | describe |
---|---|---|---|
root | String | is | Subpackage root directory, relative path |
pages | Array | is | Sub-package page configuration, the same as the main package Pages |
name | String | is | The child package name |
PreloadRule configures a node for subloading. When a page of the applet is opened, the subpackage required is automatically preloaded to improve the startup speed when entering the subpackage page. It receives an object with the property name key being the path to the current page and the property value value being the configuration preloaded by the subpackage. The subpackage preloading configuration is as follows:
The attribute name | type | If required | The default value | describe |
---|---|---|---|---|
network | String | no | wifi | Specifies the network type for preloading Optional values: ALL (unlimited network), wifi (wifi only) |
packages | Array | is | There is no | An array of strings for the root or name property of the subpackage when entering the page APPSaid the package |
Small program subcontracting operation steps:
-
Create a subpackage in the root directory of the application
Wxapp:
- Account_module: Account subpackage directory.
- Components: subpackage custom component directory.
- Pages: subpackage page directory.
- Static: indicates the subpackage static resource directory.
- Order_module: order subpackage directory.
- Components: subpackage custom component directory.
- Pages: subpackage page directory.
- Static: indicates the subpackage static resource directory.
- Account_module: Account subpackage directory.
-
Modify the pages. Json subcontracting configuration
{ // ... // Subcontract configuration "subPackages": [{"root": "account_module"."name": "account_module"."pages": [{"path": "pages/***"."style": {}}// ...] {},"root": "order_module"."name": "order_module"."pages": [{"path": "pages/***"."style": {}}// ...]}],// Subpackage preloading rule configuration "preloadRule": { "pages/***": { "network": "all"."packages": ["account_module"]},"pages/***": { "network": "all"."packages": ["order_module"]},"pages/***": { "network": "all"."packages": ["account_module"."order_module"]}}}Copy the code
7. Preview and release
Support real-time preview throughout the development of small programs. Preview by opening the simulator of wechat developer tools and release the new mini program experience version through HBuilderX.
Prerequisites: Install and configure development tools as required (Sections 2 and 3).
7.1 Debugging and Preview
Click on the HBuilderX top navigation bar run -> Run to Mini Program Emulator -> wechat Developer Tools or Publish -> Mini Program – wechat to evoke wechat Developer Tools and automatically open the mini program to complete the debugging preview.
Operation and distribution differences:
- The release model compresses the project, making the finished application smaller, but not running it.
- Run mode Open the mini program, emulator can preview in real time, do not have to run repeatedly, release will only compress and open the current state of the project.
In general, when you are in the development phase, use run mode to facilitate development and debugging. After the development, open the wechat developer tool using the release mode, and test the function and compatibility of the small program with the help of preview and real machine debugging functions.
7.2 release
- Click on the HBuilderX navigation bar at the top
Distribution -> small program - wechat
Open the wechat developer tool. - Click upload in the upper right corner of wechat developer tool and enter the correct version number to complete the release of the mini program experience version.
8. The appendix
- uni-app:uniapp.dcloud.net.cn/
- vue-cli:cli.vuejs.org/zh/guide/
- vue.js:cn.vuejs.org/v2/guide/
- vuex:vuex.vuejs.org/zh/
- node.js:nodejs.org/zh-cn/
- fly.js:github.com/wendux/fly