1. Introduction

Wechat mini program developed based on van and MPvue recorded the technology selection before development, how to build the environment during development, start projects, step on pits, etc.

Page 2.1.

• The login
• My. – Personal information
• Home page

Nav navigation, fill in the log, modify the log, fill in the expense report, expense report review, export the log to the designated mailbox, select the date to view my log

2.2.1. Framework

The above image is from a technical selection article in Nuggets.



I choose thempvueHowever, the most recent GitHub update was a year ago, and the team has not maintained much. This issue also needs to be noted.

Official website: github.com/Meituan-Dia… Mpvue (see Github address) is a front-end framework for developing applets using vue.js. The framework is based on vue. js core, and MPvue modifies the runtime and Compiler implementation of vue. js to enable it to run in the environment of small programs, thus introducing a whole set of vue. js development experience for small program development. Using MPVue to develop applets, you gain the following capabilities based on the applets technical architecture:

• Radical componentized development capabilities: improved code reuse
• The completeVue.jsDevelopment experience
• convenientVuexData management solution: Easy to build complex applications
• quickwebpackBuild mechanism: custom build strategy, hotReload during development
• Support for using NPM external dependencies
• useVue.jsCommand line tool vue-CLI quickly initializes the project
• H5 code conversion ability to compile into small program object code

• throughmpvueHow does the generated project use the likesvanUI components, and it will display properly?

After importing the UI components, we can test them in the project book. Before that, we need to package the project to make the UI components work, that is, we need to open the terminal and run the NPM run build in the root directory of the project, so that the Vant UI components will work properly in the page

Positioning and objectives

Fly is positioned to be the ultimate solution for Javascript HTTP requests. That said, Fly can run on any environment that can execute Javascript, as long as it has the ability to access the web, providing a unified API.

website

For detailed documentation, please go to Flyio’s official website. Fly is used in HTTP requests on the official website. In order to facilitate the verification of fly functions and features, the official website introduces fly globally. You can directly verify fly by opening the console on the official website.

The installation

NPM install flyio NPM install flyio<script src="https://unpkg.com/flyio/dist/fly.min.js"></script>UMD (browser) https://unpkg.com/flyio/dist/umd/fly.umd.min.jsCopy the code

3. Get started

This article assumes that you know neither vUE nor applets, so if you’re too slow, skip ahead.

3.1. Initialize an MPVue project

Node.js is required for modern front-end development frameworks and environments. If not, download nodeJS and install it. Then open the command line tool:

Matters needing attention

1. The new page needs to be re-creatednpm run devTo compile

4. Develop code

I developed the code is based on MPvue + van, new page need NPM run dev restart record some commonly used coding, and matters needing attention open source code reference:

• Netease Yan Xuan Mall based on MPVUE

4.1.1. For loop nesting

<! Index and itemIndex must be specified and their aliases cannot be the same.<template>
    <ul v-for="(card, index) in list">
        <li v-for="(item, itemIndex) in card">
            {{item.value}}
        </li>
    </ul>
</template>
Copy the code

4.1. How to design mock data and real interface

Set the first loading page

At the compile site, you just need to set the path of the page, check “use the above criteria to compile”, if the page needs parameters, then you can also upload parameters. This launches the page you set up. The first page load of the small program can be set in app.json. The first page is the first page loaded

Later consider adding the startup page (the first time open small program will load) = “login page =” home page

4.3. Introduce aliyun icon

4.5. Customize the Nav-bar header

Nav-bar can also be customized in applets, but it is not necessary, as applets have their own headers

4.7. Too much data in cyclic rendering is stuck

Scroll through the virtual DOM

5. Common problems with applets

WeChat open community communication: developers.weixin.qq.com/community/d…

5.1. The API request

5.3. Different page transfer methods

Skipping domain name verification

In the wechat developer tool, you can temporarily enable the development environment not to verify the requested domain name, TLS version, and HTTPS certificate, skipping the server domain name verification. In this case, the server domain name will not be verified in the wechat developer tool or when the mobile phone is in debug mode. After the server domain name is configured successfully, you are advised to disable this option and test the server domain name on each platform to ensure that the server domain name is correctly configured.

If a request can be sent when debugging mode is enabled but cannot be sent when debugging mode is disabled is displayed on the mobile phone, check whether domain name verification is skipped and whether the server domain name and certificate are correctly configured.

Solution: developers.weixin.qq.com/miniprogram…

network

Please be aware of the following issues when using web-based apis in your mini-program/mini-game.

1. Configure the server domain name

Each wechat mini program needs to set up a communication domain name in advance, and the mini program can only communicate with the designated domain name. The options include ordinary HTTPS request (wx.request), uploadFile (wx.uploadfile), downloadFile (wx.downloadfile), and WebSocket communication (wx.connectsocket). As of base library 2.4.0, network interfaces are allowed to communicate with LAN IP, but be careful not to communicate with native IP. As of 2.7.0, UDP communication is provided (wx.createudpsocket).

The configuration process

Note Configure the server domain name in the “Applet Background – Development – Development Settings – Server Domain name” area. Note the following when configuring the server domain name:

• Domain name onlyhttps (wx.request,wx.uploadFile,wx.downloadFile) andwss (wx.connectSocket) agreement;
• Domain names cannot use IP addresses (except small program LAN IP) or localhost;
• You can configure a port, such as MyServer.com :8080, but only requests can be sent to myServer.com :8080. If you contact myserver.com, https://myserver.c… The URL request will fail.
• If no port is configured. In the case of myServer.com, the requested URL cannot contain the port, even the default port 443. A request to myserver.com:443 will fail.
• Domain name must be registered by ICP;
• For safety reasons,api.weixin.qq.comCannot be configured as a server domain name, and the associated API cannot be called within the applets.Developers should save AppSecret to a backend server and use it through the servergetAccessTokenInterface to getaccess_tokenAnd call the relevant API;
• You can configure a maximum of 20 domain names for each interface.

timeout

• The default timeout duration and maximum timeout duration are 60s.
• The timeout period can be inapp.json 或 game.jsonThrough thenetworktimeoutConfiguration.

Return value encoding

• It is recommended that the server return value be utF-8 encoded. For non-UTF-8 encodings, the applet will try to convert, but the conversion may fail.
• The applet automatically filters the BOM (only one BOM).

3. Frequently Asked Questions

Certificate validity can be verified using the openssl s_client-connect example.com:443 command, or by using other online tools.

In addition to the network request API, if other HTTPS requests in the applets are abnormal, follow the preceding procedure to check them. For example, HTTPS images cannot be loaded, and audio and video cannot be played.

6. My stomping record

Record some problems that took me a long time, and also attach my time of stepping pits, hoping to help those in need. Where is the small program pit? Select the third-party framework MPvue and van, then pay attention to the problem of writing. Developer tools need to be updated to the latest version, and the expected effect does not appear during compilation. It may need to clear the cache of developer tools, or rm -rf dist, run NPM run dev command to recompile. Follow the prompts to the wechat development community, or other search engines to search the problem, one by one, do not panic.

UsingComponents importing van components globally has no effect

** 2020-03-02: ** Mpvue constructs the project, in app.json, global importvanThe component doesn’t work. It has nothing to do with the awesome component, because the developer tools on my computer were installed a long time ago, andusingComponentsThank you for solving my problem with this article.link

undefined is not an object(evaluating ‘document.getElementsByTagName’)

Solution:link

Because there is no document small program, I introduced the ali cloud icon, there is a document. The getElementsByTagName code,

This problem occurs when you get to the demo version. /static/iconfont/ iconfont +demo.html…. Caused by these unrelated documents; The iconfont folder is as follows

Delete irrelevant files

sudo rm -rf dist
npm run dev
Copy the code

Delete the entire dist file = “recompiling =” clear the cache in the developer tools = > click compile = “click preview =” sweep phone code = “correctly solved the problem, my mobile phone preview hang problem is solved, when the development of the program must console error is solved, then to locate some strange questions.

An error occurs when the developer tool is started after the computer restarts

wx.nextTick is not a function

Solution: BecauseSet the base library, has not updated the base library, change the base library to the latest 2.10.2, it can work normally.

Objects in a two-dimensional array share a memory address

As a result, when filling in the reimbursement details form, the value of two-way data binding will affect the value of other details forms, resulting in submission failure. The problem is solved by dynamically creating memory addresses that do not point to an address.

let parmas = [];
// let obj = {}; Get rid of this line of code
      console.log(this.formsDetails, "====> this.formsDetails");
      for (let i = 0; i < this.formsDetails.length; i++) {
        let detail = this.formsDetails[i];
        let index = i;
        // params.push(obj) removes this line of code
        // Create objects dynamically instead of sharing a memory space
        parmas.push({});
        parmas[i]["sno"] = ++index;
        parmas[i]["expenseuid"] = this.mainObj.expenseuid;
        for (let j = 0; j < detail.length; j++) { parmas[i][detail[j].field] = detail[j].value; }}console.log(JSON.stringify(parmas, null.2), "insertPmemExpenseDetail=====>datas");
    
Copy the code

Solution 1: Combine the two components into one

The simplest and most crude way is to merge the two components into one, and update the data within one component, so that there is no data synchronization between the components. The problem with this, however, is that the current component is large, and we split the component in the first place for decoupling, so we can’t go back to the past.

Solution 2:watch

In the ununit. vue component, watch is used to listen for changes in an attribute, so that when external data changes, watch can listen:

watch: { 'user.age': function(val, oldVal){ this.render(); // When the age property in user changes, call the render method}}Copy the code

Multidimensional array changes length view not updated

Solution:

this.businesstypes = [...this.businesstypes];
Copy the code

7.1. Upload code

The premise of uploading the code in the wechat developer tool is that when the project is imported, the binding to the AppID (non-test AppID) is consistent with the developer background to appID, and the submission record can only be seen in the background after the code is uploaded

8.1. Do not customize nav-bar

• Is not the custom

Wechat has its own nav-bar, which also supports returning to the previous page. I did not choose to customize nav-bar, but chose wechat’s own navigation bar and dynamically set title. ** My starting point: ** small program, the more lightweight the better, not the pursuit of flashy, is the function of ease of use, fluency, convenience, namely go.

8.2. The submit button is fixed at the bottom

** My starting point: ** Users can operate the submit button in the process of filling out the form without scrolling again. The button is obvious and easy to use.