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

This article introduces the relevant knowledge of "what are the problems encountered in the development of Mini Program by mpvue and how to solve them?" in the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Project structure

| |-build |-pages.js file directory |-src |-- implementation sub-component |-pages |-Business page |-store,vuex storage |-utils |-- request api.js |-format format plug-in. Mini Program cannot use the format provided with vue. You can only manually modify the timestamp and price returned by the backend. Order status, etc. |-request encapsulates fly to intercept request response |-wx.js

Environment and dependence

Less-loader, which provides nested styles, who knows who uses them

Flyio provides request to facilitate the rapid conversion of request module H6 (flyio provides H6, Mini Program request encapsulation, refer to an example provided in mpvue to write interceptor, which is used to process backend returning unlogged status jump page), wx.request encapsulation in Mini Program is the same, but to transfer H6 you need to do an axios.

ReverseGeocoder provided by Tencent Map qqMap (wx.getLocation only provides longitude and latitude positioning, and the product needs to obtain the city after confirming the location and search the goods in the same city)

Aliyun's oss object storage handles file upload. Surprisingly, Tencent has blocked Aliyun's oss domain name prefix and cannot be configured at the backend. The solution is to let the backend use the domain name as a server domain name proxy. Mention it. At first, Qiniuyun didn't have this problem. If you think it's troublesome, you can use Qiniu.

Rich text processing, using the mpvue-wxparse provided in the mpvue example, of course, you can also write it yourself

Problems encountered in the development process of Mini Program

Using mpvue is a very cool process. The syntax of vue can be used normally, but there are several problems that need to be paid attention to.

The parameters passed on the page are similar to the get request-key=value. The next page is obtained using $mp.query.key, but it can be switched many times in the same type of page, such as product details. Since the page cache key will remain unchanged, depending on the business situation, the solution I take is to clear key in onUnload. Although the cycle of using Mini Program is not officially recommended for mpvue documents, pages that need to be switched multiple times can be handled this way.

At first, I only intended to do Mini Program, but later I need to supplement app. I need to use unionId after the Mini Program is associated on the open platform to make the three end users the same. If the product is not well positioned, the table structure needs to be re-set. The acquisition method is to use wx.login to obtain iv,sessionkey parsing encryptedData

Session is required for image verification code, so you cannot send a get request directly with an img tag. Instead, you need to download the binary file through the filedownload request address and then transfer the link to bind to img.

The focus triggered by the input function needs to be set first: focus focuses first for false and then for true

Because the child component is bound only once and will not trigger the OnShow cycle, the parent component cannot get the this.$children during the onshow cycle acquisition.

If Mini Program is closed for 5 minutes, some pages will not be erased. You still need to drop down and refresh this function. You can enable enablePullDownRefresh: true in main.js, but it will conflict with the drop-down in scroll-view. You can only choose one of the two.

We can make tab bar components through swiper nested scroll-view. The height of this component needs to be set by js, and the height can be obtained by getSystemInfo. If the elastic layout of flex:1; may cause some of the old versions of ios to be too high, more nesting will not stick to the code.

By default, the native icons of all kinds of Mini Program are white. If the background color is white, you may not find the reason why the loading image disappears. Configure backgroundTextStyle:'dark' in window

Mini Program has a lot of reserved words to be careful not to repeat. Check Qizha.

The previous submission for audit seems to be a machine audit, and code exceptions can also be passed.

Watch global vuex will be executed on non-current pages. If you take the parameters in $mp, you may report a global error.

!!! Sharing needs to pay attention to the sharing out of the single page did not return to the home page, can only click on the upper right corner of three points, if you have not yet done the operation suggested should first take the page parameters to the home page, after the home page jump to the sharing purpose page, this will be a little more natural, at present my project is basically completed, in order not to affect the entire process, I judge getCurrentPage () .length > 1 in several key pages? To judge whether it is the first page, if it is the first page, it is helpless to display a button to return to the home page.

Transfer to H6 practice

Wx this object, we can combine router and vux to encapsulate navigateTo,redirectTo and other routing, mode box and toast, and configure wx in webpack.base.conf to point to this file, so that we can directly use the method of wx object surface without modification.

Map (using vue-amap), not much to say, programming for api

Pull-up load uses betterscroll to encapsulate a scroll component for slot,slot article reference point to the left

Rpx is replaced by @ rpx in less+flexible. You only need to replace all rpx with @ rpx. If you don't understand, you can take a look at rem.

/ * mpvue*/ # index {padding:100rpx 20rpx 110rpx;} / * vue*/ @ charset "utf-8"; @ rpx: 117.188remt; # index {padding:100/@rpx 20/@rpx 110max RPX;}

Flyio's move from mpvue is basically the same.

The oss upload of Aliyun mentioned in mpvue just now needs to modify the uploadFile in the configuration file to upload files for FormData in H6.

The two input focus function business is different, in H6 ios does not allow the function to hoist focus requires users to click, Android can still be carried out by el.focus ().

About 30% of the pages that Mini Program and H6 need to replace are easy to render, but component replacement takes some time. The more complex ones include the following common parts of the vue project. If one or two vue projects believe to have already operated these parts, replacing these components will change the business logic. The ui framework is close to weui's vux.

/ * webpack.base.conf*/resolve: {extensions: ['.js', '.vue', '.json'], alias: {'vue$':' vue/dist/vue.esm.js','@': resolve ('src'),' wx': resolve ('src/utils/wxSimulate.js')}}, / * simulate wx's own wxsimilate.js*/ import router from'.. / router' import Vue from 'vue' import {ConfirmPlugin ToastPlugin} from 'vux' Vue.use (ConfirmPlugin) Vue.use (ToastPlugin) const wx = {navigateTo ({url}) {console.log (url) router.push ({path: url})}, redirectTo ({url}) {router.replace ({path: url})}, navigateBack () {router.go (- 1)} ShowToast ({title}) {Vue.$vux.toast.show ({/ / component properties other than show text: title})}, / / Mode box displays showModal ({title, content, success}) {Vue.$vux.confirm.show ({title, content) / / component properties other than show onConfirm () {success & & success ({confirm: true, cancel: false})}, onCancel () {success & & success ({confirm: false) Cancel: true})} window.wx = wx export default wx, what are the problems encountered by mpvue in developing Mini Program and how to solve them? Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.