background

Because the company wants to use just small program to develop old projects. It took a month. Let’s talk about the pit.

Mpvue+ Vant project template,github address.

The technology used

  • mpvue
  • vant(weapp)

1. About the UI frameworkweappThe introduction of

    

  • A. Download the vant static file fromapp.jsonConfiguration.
  • B. Download the Vant module from NPMapp.jsonConfiguration.

See the official website link to the official website tutorial.

2, app. Json

  • This is equivalent to a wechat profile, which can be configured to add pages, add plug-ins (such as the introduction of additional components), and add pages every timenpm run devOtherwise, it will not take effect.

3. Mpvue, there is no routing concept.

  • To use, please installmpvue-router-patch, this plugin.
  • router.push({ path: '/pages/news/list', reLaunch: true }), can only jump 7 times (or 5 times, specific forget), can use instead$router.replace(But this item does not support the jump of wechat native TAB.)

4. V-html is invalid

  • htmlIn want to parse'<p>213</p>'String tags, withv-htmlBe null and void.
  • Solution: Usempvue-wxparseThis plugin.

5. Dom issues

  • There is no DOM concept in applets, and all plug-ins that use DOM report errors.querySelector.$refsNone of these will do.

6. Value transmission problem of parent and child components

  • Parent -> child, props pass value, child componenthtmlThis value is available for internal rendering.
  • inonShow().mounted()You can’t get it in the method, in themethodsThe method can be obtained. (Lifecycle issues)
  • Solutions:vuex.watchThis parameter.

7. Textarea problem

  • This one really fucked up,textareaSet up theplaceholderProperty, this is the highest level, if there is a popover, it will overwrite that popover. The following figure,z-indexIt doesn’t work any way you set it.

  • Solution: Hide this when popovers opentextareaThis is displayed when closedtextarea.

8. Picture problems

1, wx. ChooseImage

  • If multiple images are uploaded, array operation is used.push()Can’t show.
  • witharray.concat()To solve.

2. Add mode=’widthFix’ to the img tag if you want the image to match the width of the source file. Wx. PreviewImage: static directory: wx. PreviewImage: static directory: wx.

9. Lazy loading of images

  • vue-lazyloadThis one doesn’t work.
  • mpvue-img-loadWith a.

About Web-view

  • As long as the page introduces web-view, all other HTML pages are invalid.
  • Only the components of wechat will appear in the headernavigation, configurable background color…

11, the subcontract

  • Mpvue subcontract

12, cookies

  • Applets do not support cookies, please use plug-insweapp-cookie

13. Sometimes bidirectional binding fails

  • this.$set(this.imgList, this.imgList)Let me reset it

13,computedThe problem

  • mpuveDoes not supportcomputedClosure: return does not return.

14,scssEnvironmental problemssass-loader

  • I’ve been trying to build a mini program latelympvueTemplate environment, discoveredmpvueAdvanced versions are not supportedsass-loaderTrue tm pit.
NPM uninstall sass-loader -d NPM install [email protected] --save-devCopy the code

15,scssConfiguration of global files

1, Install sass-resources-loader

    npm sass-resources-loader -D
Copy the code

2. Configure build/utils.js

2-1. Add in cssLoaders method

var sassResourceLoader = {
    loader: 'sass-resources-loader'.options: {
      resources: [
        // Modify the corresponding path
        path.resolve(__dirname, '.. /src/scss/entrance.scss')]}}Copy the code

2-2 added in the generateLoaders method

// Add sassResouceLoader when using sass-loader
    if ('sass' === loader) {
      loaders.push(sassResourceLoader)
    }
Copy the code

16. Small programs are not supportedsvg

  • soicon-fontThe multicolor icon of the
  • Recommend a plug-inmini-program-iconfont-cli, similar to conversion.

17,mpvuethetemplateGlobal variable problem in

  • Binding to thevue.prototypeCan be obtained in JS,templateNot on a template.
  • Solution: UsecomputedEvaluates the property to return the binding invueGlobal variable on.
computed:{
            getDoMain(){ // Obtain the interface domain name
                return this.$doMain
            }
        },
Copy the code

18,mpvueObject views at more than two levels cannot be modified.

  • withthis.$setAlso invalid.
  • this.$forceUpdate()Refresh also does not work.
  • Solution: Use deep copy and reassign to the object.

19,mpvueAdd the left and right slide event to

reference

20,mpvueIntroduction of Tencent mapsdk

1. SDK download

2. In sdK.js

module.exports = QQMapWX;
/ / to
export default QQMapWX
Copy the code

Import QQMapWX from ‘XXX/qqmap-wx-jssdk.js’

Step reference

21,mpvueThe page in resets cached data.

onLoad() {
            Object.assign(this.$data, this.$options.data())
        },
Copy the code

Small program ios page can slide around the problem

  • Through information search, online methods:
  overflow-x:hidden;
  width:100%;
Copy the code
  • After testing,iosDo not supportoverflow-x:hidden, only supportoverflow:hidden;
  • Finally found sub content due tooverflow-x:hiddenDoes not take effect, word content is out, so can slide;
  • To solveaddbox-sizing:border-box

Swiper height can’t adapt to the problem

Refer to the address

I’ve just started, so please point out any questions.