Shulou(Shulou.com)06/01 Report--

Today, the editor would like to share with you the relevant knowledge of the difficulties in developing Mini Program with mpvue. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

The choice of framework

I have not learned the native Mini Program myself, let alone used it to develop a commercial Mini Program. Just when I was in the former company, the front-end team at that time shared mpvue when mentioning the solution of Mini Program. After arriving at the new company, the technology boss also mentioned mpvue, and I myself have been writing vue for more than a year. I am familiar with vue writing, and the new company team has been waiting for Mini Program for a long time, hoping to get on the shelves as soon as possible. So choosing mpvue to develop is also the fastest and most reasonable!

The construction of the project

After reading the official documentation of mpvue, the construction of the project naturally chose the officially recommended vue-cli. After reading the hands-on tutorial for five minutes, use the command

Vue init mpvue/mpvue-quickstart my-project

The basic project was generated, and in later development, the configuration of the project was basically unchanged, but less-loader was added.

Directory structure

It is basically a directory structure generated by vue-cli, with some folders added, mainly the configuration folder (api folder) of the framework flyio used for data interaction with the background, and the vuex (store folder) used for the whole project data management. The overall directory structure is as follows:

Project └─── build └─── config └─── └─── node_modules └─── src └─── api | ajax.js / / flyio request and response interceptor configuration file | config.js / / request configuration file | index.js / / generate request api instance file | Server.js / / Project data request is unified Manage files └─── components └─── pages └─── store └─── modules / / vuex module folder | index.js / / vuex processing files | App.vue | config.js | main.js └─── static └─── images └─── lib └─── weui │ README.md │ package.json │ package-lock.json replication code stepped on the pit

I believe that many students who have used mpvue have more or less guessed some pits. I have also stepped on a lot of pits and wasted a lot of valuable time. Here are the pits I encountered in the development of Mini Program and the solutions to them:

# copy code for tabBar icon problem

When configuring the native bottom tabBar of Mini Program, I encountered the first problem: when the designer set the icon icon path to me correctly, the tabBar icon on the developer's tool would always be very large, and it almost occupied the entire height, which was quite ugly. I searched many blogs and did not find a solution. During this time, I tried to implement tabBar by myself, but after seeing that disgusting effect, I still gave up, went back to the original tabBar, and then calmed down to think about it. Finally, after comparing some mpvue projects on github, I found that it was the problem of icon icon, and finally successfully solved it: the size of the icon remained unchanged, and then left the appropriate transparency around. ) blank. It's simple, isn't it? This is a waste of a lot of my brain cells, forgive my stupid (retarded face). Of course, there is another problem with native tabBar, that is, the title text of tabBar will be very close to the bottom on the real machine. I didn't find a solution to this, except to implement tabBar myself.

# replication code for old data before data retention on the details page

I think many students have encountered this problem, and I see that many people in the issues on mpvue github have encountered this problem and are constantly following it, which shows that this is a pain point problem, and who makes it affect the user experience of Mini Program. The unified solution we have seen so far is to initialize and assign the data to be displayed on this page when you onLoad the page, for example: chestnut: as follows:

Import htmlText from xxxxx export default {components: {htmlText}, data () {return {htmltext:''}} OnLoad () {this.htmltext =''this.$http.get (' xxxxxxxx'). Then ((res) = > {this.htmltext = res.htmltext})} copy the code

It may be troublesome to deal with other array or object types, but the method is similar. You don't want to leave blank space for a period of time before the data request is returned. "to do some loading for users is always better than the experience of facing old data first and then jumping to new data.

# created hook function copies the code for all execution problems during project initialization

I think this is a bug of mpvue, right? It is better not to use the hook function casually on the page.

# mpvue's support for complex rich text currently has poor performance. Copy code # Wechat native route jump navigateTo (), redirectTo (), navigateBack (), switchTab (), reLaunch (), etc., which behaves strangely on real machines.

I have also encountered problems similar to the old data in the passing of parameters, which can only be solved with the help of vuex. In addition, the number of page stacks of Mini Program is really limited, so we must pay attention to the management of the page stack when developing.

# pay attention to copying code when using onShow ()

Keep in mind that the js code in this hook function will be executed not only when it first enters the page, but also when it is lit again after the screen.

Suddenly, I can't remember much of the pit of mpvue. I'll write so much for now, and update it later when I remember it.

The use of Flyio

In the development of Mini Program, the native wx.request () of Mini Program is not used for data exchange. Instead, we choose the recommended Flyio,Flyio in the mpvue document without much introduction. You can read the document for fighting. Here, I mainly talk about the construction of the request and response interceptor:

In fact, there is a very detailed introduction and code in the document, but when I encountered the login failure problem after I wrote it down according to the code, I did not solve the problem as expected: first lock the request, then re-request to get the new cookie and then redo the previous request, and then discuss with others and use promise to solve this problem. See the code for details:

Src/api/ajax.js:

/ * http request interceptor * / const Fly = require ('flyio/dist/npm/wx') const config = require ('. / config') const ajaxUrl = process.env.NODE_ENV = = 'development'? Config.Host.development: process.env.NODE_ENV = = 'production'? Config.Host.production: config.Host.test let fly = new Fly () let loginFly = new Fly () / / define public headersconst headers = {...} Object.assign (fly.config, {headers: headers, baseURL: 'xxxxxx', timeout: 10000, withCredentials: true}) loginFly.config = Local re-login after fly.config// session fails const login = () = > {return new Promise ((resolve) Reject) = > {wx.login ({success: res = > {let loginParams = {...} loginFly.post ('/ api/locallogin/url', loginParams). Then (d = > {if (d.headers & & typeof d.headers ['set-cookie']! = =' undefined') {/ / update session wx.setStorageSync ('sessionid') D.headers ['set-cookie'])} resolve ()} .catch (error = > {log (error) reject (res.data)})}, fail: res = > {console.error (res.errMsg)} Complete: res = > {}})} / / request interceptor fly.interceptors.request.use (request = > {if (wx.getStorageSync ('sessionid')) {request.headers.cookie = wx.getStorageSync (' sessionid')} return request}) / / response interceptor fly.interceptors.response.use (response = > {/ / session has failed Need to log in to Mini Program if (response.data.errCode = 100009) {/ / log ('session expires and re-request session...' based on the user information previously stored locally) / / lock response interceptor fly.lock () return login (). Then () = > {fly.unlock () / / log (`re-request: path:$ {response.request.url} BaseURL:$ {response.request.baseURL} `) return fly.request (response.request)}) .catch (err = > {log (err)})} else {return response.data.data}}, err = > {log ('error-interceptor', err) if (err.status) {wx.showToast ({title:' unknown error', icon: 'none' Duration: 3000})}}) the use of export default fly replication code vuex

Because it is a life shopping Mini Program, involving complex logic such as shopping cart + address selection, data sharing is needed in many places. Vuex plays an important role in this project, because there are many modules, and if all the data is written in one file, it will undoubtedly bring great difficulties for later maintenance, so divide the data of each module into separate files, so the overall process is much clearer. The following is the code that divides the module's main file

Src/store/index.js:

Import Vue from 'vue'import Vuex from' vuex'import modules1 from'. / modules/modules1'import modules2 from'. / modules/modules2'import modules3 from'. / modules/modules3'...Vue.use (Vuex) export default new Vuex.Store ({/ / modularize one store.js file for each function, and then uniformly introduce modules: {modules1, modules2, modules3,...}) copy the code here

Src/store/modules/modules1.js:

The request in import api from'@ / api' / / actions is const state = {aaaa,...} const getters = {aaaa (state) {return state.aaaa}, bbbb (state, getters, rootState) {return getters.aaaa},...} / / actions can perform asynchronous operations const actions = {async anExample ({state, getters, dispatch, commit}) {params}) {let res = await api.requestFunction ({params})... Return res},...} const mutations = {setStateX (state, Y) {state.X = Y},...} export default {namespaced: true, / / very important state, getters, actions, mutations} copy the code

Called in a .vue file

Src/pages/xxx.vue

Import {mapState, mapGetters} from 'vuex'export default {computed: {/ / call getters... mapGetters (' modules', ['aaaa',' bbbb'])}, methods: {/ / call action funcA () {this.$store.dispatch ('modules1/anExample') {params}) .then (res = > {...})}, / / call mutation funcB () {this.$store.commit ('modules1/setStateX', Y)} copy the code above is all the content of the article entitled "what are the difficulties in developing Mini Program with mpvue?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.