Applet using mpvue frame component library seamless access Vant Weapp

There are US group revenue out mpvue its vue grammar and good development efficiency and then with a good user experience UI component is undoubtedly the customized development of a micro letter applet, but because mpvue native development of micro-channel re-packaging, this we also introduced UI component adds a lot of trouble, man of few words said, and then show you a method of introducing vant-weapp.

1, first of all, we need to have a basic skeleton mpvue of project documents, namely to initiate a project with mpvue

Global installed vue-cli

$ npm install --global vue-cli

Create a new project based on a template mpvue-quickstart

$ vue init mpvue/mpvue-quickstart my-project

Installation depends

$ cd my-project
$ npm install

Start building

$ npm run dev

2, secondly, the new micro-channel in developer tools in the project, fill in the registration appid and file directory (knock on a blackboard to note here that the file directory is mpvue dist directory under the project), the root directory of directories is actually dist after each is mpvue (npm run build) is completed package directory, the file structure is inside the micro-channel MINA small town development program native file structure;

3. Next, we need to use vant-weapp open source projects vant UI components, so you want to download vant-weapp down after down dist file under its program to copy all we need to use the original project (that is, we started the initialization of the project), in order to facilitate management, it can create a new vant UI components used to store static files in the root directory;

git clone https://github.com/youzan/vant-weapp.git

Paste position as shown in Figure

4, the next is relatively simple, the specific use of the components can be viewed in an official document, we only need to introduce json file in the configuration we need to use the components of the page that the components we need
here is my Home json configuration

{ 
    // 页面配置，即 page.json 的内容
    navigationBarTitleText: '首页',
    'usingComponents': {
      'van-search': '/static/vant/search/index',
      'van-row': '/static/vant/row/index',
      'van-col': '/static/vant/col/index',
      'van-tab': '/static/vant/tab/index',
      'van-tabs': '/static/vant/tabs/index',
      'van-cell': '/static/vant/cell/index',
      'van-cell-group': '/static/vant/cell-group/index',
      'van-radio': '/static/vant/radio/index',
      'van-radio-group': '/static/vant/radio-group/index',
      'van-field': '/static/vant/field/index',
      'van-button': '/static/vant/button/index',
      'van-card': '/static/vant/card/index',
      'van-popup': '/static/vant/popup/index',
      'van-icon': '/static/vant/icon/index',
      'van-panel': '/static/vant/panel/index',
      'van-action-sheet': '/static/vant/cell-group/index',
      'van-switch-cell': '/static/vant/switch-cell/index',
      'van-area': '/static/vant/area/index',
      'van-dialog': '/static/vant/dialog/index'
    }
  }

4, after the UI components can be imported in the project book test before the entry into force in order to allow the UI components, we need to look at the project package, that is, we need to open a terminal and execute in the root directory of the project again (npm run build), such vant UI components will normally play a role in the pages
precautions
specific use in official documents vant-weapp in using wxml syntax, so we can not directly use the copy

1, how the data binding

value="{{value}}"

Native applets, data binding in the way the label

value="{{value}}"

As happened mpvue we use, so we need to change

v-bind:value="value"
//或者
:value="value"

2, binding the way events

Native applet use

bind:click="onClick"

mpvue use

@click="onClick"

3 references, interactive components

vant in this operation as feedback assembly notify class has two introduction, the introduction of one component, the incorporated main.json; the other is a method of introducing, incorporated vue requires import file Notably , incorporated herein absolute path can not be used, this may be similar to the relative path.

import Notify from '@/../static/vant/notify/notify'  //@是mpvue的一个别名，指向src目录

4, to obtain the value of the event object event

It is noteworthy that, mpvue acquire event and the value of small native program is different. For example:

onChange(event){ // 获取表单组件filed的值
  console.log(event.mp.detail) // 注意加入mp
}

Change 5, the snoop scheme

mpvue which can not use the @ click-icon This monitor name, so if there are such API documentation listener name appears, you need to manually modify the source code.

Camel can change the name of the listener.

eg: I encountered this problem in the field assembly, my approach is:

// static/vant/field/index.js

this.$emit('click-icon');

// 修改为:

this.$emit('clickIcon');

The error handling

General error error can be treated by what process.
1, whether to turn the ES6 micro-channel transfer function ES5 developer tools.
2, double-check the code than the document and see if there is improper use of place.
3, recompile or deleted npm run dev directory dist re npm run dev
4, restart or update the micro-channel developer tools.

After you add UI components, reported missing page, TypeError: Property of Can not the Read 'index' of undefined
1, the new page, do not repackage
2, add the path of the component in question, the path is wrong or duplicate add