WeChat Mini Program Development Guidelines

foreword

In this document, we mainly focus on the development and use of WeChat Mini Programs. WeChat applet is developed using WeChat developer tools, using its proprietary language WXML (WeiXin Markup Language is a set of tag language for framework design), WXS (WeiXin Script is a set of scripting language for applet), WXS combined with WXML can build a The structure of the page. But in order to lower the development threshold, we have researched and used mpvue, taro, and uni-app frameworks to develop WeChat mini-programs. Because mpvue is no longer maintained and there are many problems, the framework is abandoned, and taro is developed using react, vue, and Nerv. In the end, we temporarily chose uni-app. uni-app is a framework for developing all front-end applications using Vue.js. Developers write a set of codes that can be published to iOS, Android, Web (responsive), and various small programs. (WeChat/Alipay/Baidu/Toutiao/QQ/Dingding/Taobao), Quick Apps and other platforms.

Learn about WeChat Mini Programs

Official homepage

• Scan the QR code below on WeChat to view the applet example (including components, expansion capabilities, interfaces, and cloud development)

  
  

  

  image

Mini Program Development Guide

First of all, you should understand the application for small program account, server configuration, business domain name configuration, etc. Click to view

Any ordinary developer, after simple learning and practice, can easily complete the development and release of a small program, see Mini Program Development Guide

development tools

Tool IntroductionWeChat
Developer ToolsDownload and Installation

image

WeChat Developer Tools

frame

frame description

Project file description

For wxml and wxs syntax, we only need a simple understanding, because we finally use vue.js to develop

An applet page consists of four files, namely:

• JSON configuration file with .json suffix (page configuration)

• WXML template file with .wxml suffix (page structure)

• WXSS style files (page style sheets) with .wxss suffix

• JS script logic file with .js suffix (page logic)

Main configuration example

• pages: list of main package page paths

• subPackages: subpackage structure configuration

• window: the global default window behavior

• tabBar: The performance of the bottom tab bar

• usingComponents: import third-party components

{
  "pages": [
    "pages/home/home",
    "pages/commodity/commodity",
    "pages/message/message",
    "pages/user/user"
  ],
  "subPackages": [
    {
      "root": "pages-home",
      "pages": [
        "community-detail/index",
        "comment-detail/index",
        "release-dynamic/index",
        "user-center/index",
        "webview/index"
      ]
    },
    {
      "root": "pages-commodity",
      "pages": [
        "detail/index",
        "pay-sure/index",
        "mall-comment/index",
        "mall-comment-detail/index"
      ]
    },
    {
      "root": "pages-message",
      "pages": [
        "system-message/index",
        "interactive-message/index",
        "detail/index"
      ]
    },
    {
      "root": "pages-user",
      "pages": [
        "login/login",
        "edit-user-info/index",
        "setting/index",
        "about/index",
        "user-services/index",
        "address/my-address/index",
        "address/add-address/index",
        "order/my-order/index",
        "order/order-detail/index",
        "order/logistics-detail/index",
        "order/release-comment/index"
      ]
    }
  ],
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "uni-app",
    "navigationBarBackgroundColor": "#FFFFFF",
    "backgroundColor": "#FFFFFF"
  },
  "tabBar": {
    "color": "#808080",
    "selectedColor": "#1A1A1A",
    "borderStyle": "white",
    "backgroundColor": "#ffffff",
    "height": "50px",
    "fontSize": "12px",
    "iconWidth": "20px",
    "spacing": "3px",
    "list": [
      {
        "pagePath": "pages/home/home",
        "iconPath": "static/images/home_normal.png",
        "selectedIconPath": "static/images/home_selected.png",
        "text": "发现"
      },
      {
        "pagePath": "pages/commodity/commodity",
        "iconPath": "static/images/store_normal.png",
        "selectedIconPath": "static/images/store_selected.png",
        "text": "商城"
      },
      {
        "pagePath": "pages/message/message",
        "iconPath": "static/images/message_normal.png",
        "selectedIconPath": "static/images/message_selected.png",
        "text": "消息"
      },
      {
        "pagePath": "pages/user/user",
        "iconPath": "static/images/user_normal.png",
        "selectedIconPath": "static/images/user_selected.png",
        "text": "我的"
      }
    ]
  },
  "permission": {
    "scope.userLocation": {
      "desc": "位置信息"
    }
  },
  "useExtendedLib": {
    "weui": true
  },
  "runmode": "liberate",
  "usingComponents": {
    "painter": "/wxcomponents/painter/painter",
    "mp-slideview": "weui-miniprogram/slideview/slideview"
  },
  "sitemapLocation": "sitemap.json"}

components

Detailed usage

Use the original components of the relevant applet in combination with the applet expansion component library, see the expansion capability section below

API

Detailed documentation

ability to expand

When using uni-app to develop a WeChat applet, you can refer to the WeChat extension component in the
usingComponents
of the pages.json file. In the following way, the development tools will be automatically compiled into the project during compilation.

"usingComponents": {
  "mp-slideview": "weui-miniprogram/slideview/slideview"
}

debugging

Use WeChat developer tools to run and debug, similar to H5 debugging. The development tool comes with an emulator, which can be debugged on a real machine. If the background service uses a local ip, please open the development tool and click "Details" -> "Local Settings" -> "Do not verify legitimate domain names..." in the upper right corner, Check it. For more details, see Mini Program Debugging

image

image

Learn about uni-app

Official homepage

uni-app is a framework for developing all front-end applications using Vue.js. Developers write a set of codes that can be published to iOS, Android, Web (responsive), and various small programs (WeChat/Alipay/Baidu/Toutiao/ QQ/Dingding/Taobao), Quick Apps and other platforms

Quick study advice

• There is no need to learn the syntax of the applet. uni-app uses the syntax of vue, not the syntax of the applet.

• If you don't know vue yet, first learn to use vue from the official website

• The first step is to read the introduction of the homepage of the uni-app official website.

• The second step is to experience the uni-app by getting started quickly.

• The third step, read the "uni-app official tutorial", producer: DCloud, class time: a total of 3 sessions.

quick start

uni-app supports the rapid creation of projects through the visual interface and the vue-cli command line.

way of visualization

image

1. The visualization method is relatively simple. HBuilderX has a built-in related environment and is ready to use out of the box. Before starting, developers need to download and install the following tools

2. HBuilderX: Official IDE download address, download the App development version, you can
   create uni-app, run uni-app, publish uni-app, and publish as a small program out of the box

3. Precautions

• Run in WeChat Developer Tools: Enter the hello-uniapp project, click Run on the toolbar -> Run to Mini Program Simulator -> WeChat Developer Tools, you can experience uni-app in WeChat Developer Tools.

• If it is used for the first time, you need to configure the relevant path of the applet ide before it can run successfully. As shown in the figure below, you need to enter the installation path of the WeChat developer tool in the input box. If HBuilderX cannot start the WeChat developer tool normally, the developer needs to start it manually, and then copy the path of the uni-app to generate the applet project into the WeChat developer tool, develop it in HBuilderX, and you can see it in the WeChat developer tool real-time effects.

  

  image

• HBuilderX also provides a quick run menu, you can quickly select the device to run by number:

  

  image

way of command line

1. You can also use cli scaffolding, you can create uni-app projects through vue-cli

• Install nodejs
  nodejs download URL: https://nodejs.org/en/

• Environment installation

npm install -g @vue/cli

• Create uni-app (template project is stored in Github, due to domestic network environment problems, the download may fail)

vue create -p dcloudio/uni-preset-vue my-project

• At this point, you will be prompted to select a project template, and it is recommended to select the hello uni-app project template for the first experience, as shown below:

  

  image

• Custom template
  When selecting a custom template, you need to fill in the uni-app template address, which is actually the address of the warehouse hosted in the cloud. Taking GitHub as an example, the address format is userName/repositoryName, for example, dcloudio/uni-template-picture is to download a picture template.
  For more supported download methods, please refer to the description of this plugin: download-git-repo

• Run and publish uni-app

npm run dev:mp-weixin
npm run build:mp-weixin

frame

Click on the frame description to view

• Scan the QR code below on WeChat to view the applet example (including built-in components, interfaces, extension components, and templates)

  

  image

• A uni-app project contains the following directories and files by default:

  

  image

• The pages.json file is used to configure the uni-app globally, to determine the path of the page file, window style, native navigation bar, native tabbar at the bottom, etc.

• It is similar to the page management part of app.json in WeChat applet. Note that the content that originally belonged to app.json, such as positioning permission application, is configured in manifest.json in uni-app

• In manifest.json, if it is only for WeChat applet development, just pay attention to the mp-weixin configuration item

• When compiling to any platform, the files in the static directory will be completely packaged and will not be compiled. Files in non-static directories (vue, js, css, etc.) will only be packaged and compiled if they are referenced.
  The js files in the static directory will not be compiled. If there is es6 code in it, it will run directly without conversion, and an error will be reported on the mobile device.
  Resources such as css and less/scss should not be placed in the static directory. It is recommended that these public resources be placed in the self-built common directory.

• When static resources are introduced into the template, such as the src attribute of image, video and other tags, a relative path or an absolute path can be used, in the following form

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static目录 --><image class="logo" src="/static/logo.png"></image><image class="logo" src="@/static/logo.png"></image><!-- 相对路径 --><image class="logo" src="../../static/logo.png"></image>

• Development and production environments

if (process.env.NODE_ENV === 'development') {
  console.log('开发环境')} else {
  console.log('生产环境')}

Main configuration

• easycom configures the on-demand introduction of the uView component library. For details, see the components section below.

"easycom": {
  "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
}

page.json file

{
    "easycom": {
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#FFFFFF",
        "backgroundColor": "#FFFFFF",
        "app-plus": {
            "background": "#efeff4"
        },
        "usingComponents": {
            "painter": "/wxcomponents/painter/painter",
            "mp-slideview": "weui-miniprogram/slideview/slideview"
        }
    },
    "pages": [
        {
            "path": "pages/home/home",
            "style": {
                "navigationBarTitleText": "发现",
                "enablePullDownRefresh": false,
                "navigationStyle": "custom",
                "disableScroll":true
            }
        },
        {
            "path": "pages/commodity/commodity",
            "style": {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
        },
        {
            "path": "pages/message/message",
            "style": {
                "navigationBarTitleText": "消息",
                "enablePullDownRefresh": false
            }
        },{
            "path": "pages/user/user",
            "style": {
                "navigationBarTitleText": "我的",
                "enablePullDownRefresh": false,
                "backgroundColor": "#F0F0F0",
                "navigationStyle": "custom"
            }
        }
    ],
    "tabBar": {
        "color": "#808080",
        "selectedColor": "#1A1A1A",
        "borderStyle": "white",
        "backgroundColor": "#ffffff",
        "height": "50px",
        "fontSize": "12px",
        "iconWidth": "20px",
        "spacing": "3px",
        "list": [
            {
                "pagePath": "pages/home/home",
                "iconPath": "static/images/home_normal.png",
                "selectedIconPath": "static/images/home_selected.png",
                "text": "发现"
            }, {
                "pagePath": "pages/commodity/commodity",
                "iconPath": "static/images/store_normal.png",
                "selectedIconPath": "static/images/store_selected.png",
                "text": "商城"
            }, {
                "pagePath": "pages/message/message",
                "iconPath": "static/images/message_normal.png",
                "selectedIconPath": "static/images/message_selected.png",
                "text": "消息"
            }, {
                "pagePath": "pages/user/user",
                "iconPath": "static/images/user_normal.png",
                "selectedIconPath": "static/images/user_selected.png",
                "text": "我的"
            }
        ]
    },
    "subPackages": [
        {
            "root": "pages-home",
            "pages": [
                {
                    "path": "community-detail/index",
                    "style": {
                        "navigationBarTitleText": "详情",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path" : "comment-detail/index",
                    "style":{
                        "navigationBarTitleText": "全部回复",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                "path": "release-dynamic/index",
                "style":
                    {
                        "navigationBarTitleText": "发布动态",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path": "user-center/index",
                    "style": {
                        "navigationBarTitleText": "个人中心",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom",
                        "disableScroll":true
                    }
                },
                {
                    "path": "webview/index",
                    "style": {
                        "navigationBarTitleText": "",
                        "enablePullDownRefresh": false
                    }
                }
            ]
        },
        {
            "root": "pages-commodity",
            "pages": [
                {
                    "path": "detail/index",
                    "style": {
                        "navigationBarTitleText": "",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "pay-sure/index",
                    "style": {
                        "navigationBarTitleText": "订单确认",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path": "mall-comment/index",
                    "style": {
                        "navigationBarTitleText": "用户评价",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "mall-comment-detail/index",
                    "style": {
                        "navigationBarTitleText": "全部回复",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                }
            ]
        },
        {
            "root": "pages-message",
            "pages": [
                {
                    "path": "system-message/index",
                    "style": {
                        "navigationBarTitleText": "系统消息",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "interactive-message/index",
                    "style": {
                        "navigationBarTitleText": "互动消息",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "detail/index",
                    "style": {
                        "navigationBarTitleText": "",
                        "enablePullDownRefresh": false
                    }
                }
            ]
        },
        {
            "root": "pages-user",
            "pages": [
                {
                    "path": "login/login",
                    "style": {
                        "navigationBarTitleText": "登入",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "edit-user-info/index",
                    "style": {
                        "navigationBarTitleText": "个人资料",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "setting/index",
                    "style": {
                        "navigationBarTitleText": "设置",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "about/index",
                    "style": {
                        "navigationBarTitleText": "关于",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "user-services/index",
                    "style": {
                        "navigationBarTitleText": "服务协议",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "address/my-address/index",
                    "style": {
                        "navigationBarTitleText": "我的地址",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "address/add-address/index",
                    "style": {
                        "navigationBarTitleText": "添加地址",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "order/my-order/index",
                    "style": {
                        "navigationBarTitleText": "我的订单",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path": "order/order-detail/index",
                    "style": {
                        "navigationBarTitleText": "订单详情",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                },
                {
                    "path": "order/logistics-detail/index",
                    "style": {
                        "navigationBarTitleText": "物流详情",
                        "enablePullDownRefresh": false
                    }
                },
                {
                    "path": "order/release-comment/index",
                    "style": {
                        "navigationBarTitleText": "商品评价",
                        "enablePullDownRefresh": false,
                        "navigationStyle": "custom"
                    }
                }
            ]
        }
    ]}

components

• Similarly, WeChat extension components can be referenced in the usingComponents of the pages.json file. In the following way, the development tools will be automatically compiled into the project when compiling, which is really very flexible and can refer to multi-party components in all directions, which is perfect.

"usingComponents": {
  "mp-slideview": "weui-miniprogram/slideview/slideview"
}

• Click to use the component to view, uni-app itself has its own component library, and WeChat scans the QR code below to view the applet example (including built-in components, interfaces, extension components, and templates)

  

  image

• Here we also import the third-party component library uView
  WeChat scan the QR code below to view the applet example (including components, tools, templates)

  

  image

API

Detailed documentation

• In uni-app, compared to the WeChat applet, uni is used instead of wx, as shown in the following sample code.

• Note that if the project only runs on the WeChat applet, you can use wx or uni, if it runs on multiple terminals, you must use uni

wx.request({
  url: 'https://www.example.com/request',
  success: (res) => {
    console.log(res.data);
  }});

uni.request({
  url: 'https://www.example.com/request',
  success: (res) => {
    console.log(res.data);
  }});

Plugin Market

Plug-in market address
There are various templates and components in the plug-in market, which can be imported as needed (using HBuilder X to visualize a new project, you can choose to use HBuilder X to import the plug-in in the plug-in address, which is convenient and fast)

Author: tikeyc
Links:

https://www.jianshu.com/p/d98050a57949
Source:
The copyright of Jianshu belongs to the author. For commercial reprints, please contact the author for authorization, and for non-commercial reprints, please indicate the source.