The core purpose of this article is to take a novice into the pit mpvue(no friends). If you fail to enter the pit after watching it, please watch it again. Thanks

Wechat applets

WeChat small Program referred to as “small programs, English name Mini Program, also known as WeChat application number, different from WeChat subscription, or the public, and WeChat applet is endowed with the ability of application, it is a kind of don’t need to download and install use applications, it implements the application” within reach “dream, users scan or search can open the application; It also embodies the concept of “use it and go”, and users no longer need to worry about installing too many apps.

Current development of small programs, most of them by looking at the small program’s website native development’s official website: https://developers.weixin.qq.com/miniprogram/dev/

No friends Mpvue

Mpvue is a front-end framework for developing small programs using vue.js. It was developed by Meituan-Dianping technical team and opened source in March 2018. 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.

Mpvue website: http://mpvue.com/ making address: https://github.com/Meituan-Dianping/mpvue

Why does a good applet native development need to add VUejs? 1. Small programs can not use NPM, the way of using third-party packages is too primitive 2. Development efficiency and learning cost (syntax unique to applets)

Mpvue vs. Wepy how did MPvue win? Wepy website: https://tencent.github.io/wepy/, with a figure to simple generalization mpvue wepy/native difference between small program:

More on mpVue (from meituan Dianping Technology Summit Get)

Mpvue usage scenarios can be divided into: 1. Mpvue alone (standard use, QuickStart) 2. Mpvue as the primary, supplemented by other 3. Mpvue for incremental development (using mpvueSimple lightweight build tool)

More stamp the following address: Meituan review technique salon 35) : Beijing station – hot technology enterprise practice – playback address: http://www.itdks.com/eventlist/detail/2061

How to take the first step to jump into MPVue

There’s a five-minute tutorial on the website, but of course you can watch the two-minute tutorial again

$Node -v v8.9.0 $NPM -v 5.6.0 # 2. Due to reasons known to all, can consider to switch the source to the taobao source $NPM registry https://registry.npm.taobao.org/ # 3. $NPM install --global vue-cli # 4. $vue init mpvue/ mpvue-quickStart my-project # 5. $CD my-project $NPM install $NPM run devCopy the code

After executing the command above, all the way down should look like this

Don’t forget NPM install. Now it’s time to open the build project

Well, now it’s time for you to show off

Douban reading :(1) book scanning code

The first step is to have a book next to you, turn to the B side of the book, see the bar code behind is the thing to scan

Start writing code, and code this API must be with this small program, open the small program document find scan code interface: https://developers.weixin.qq.com/miniprogram/dev/api/scancode.html#wxscancodeobject

The sample code provided can be copied directly in a moment

Wx. scanCode({success: (res) => {console.log(res)}}) true, success: (res) => { console.log(res) } })Copy the code

Change index.vue, which is the home page after all, to add click events as usual, except that the content in the method has been replaced by the applets API

When you are ready, click preview in the wechat developer tool, you can take out your phone and scan it. You can see the output ISBN code 9787535732309 on the console. Open the official website of Douban and search for it

This completes the process of scanning code, get the ISBN code of the book, save the database or whatever

Douban reading :(2) list of books

The data source for the book list uses easy-mock

Easy-mock (https://www.easy-mock.com) is a popular way to simulate the backend interface to complete data request binding. In fact, it is to write the JSON file that has been written to death locally, so that the front-end does not wait for the backend interface development to complete. The data format can be negotiated with the back end and then started

The following is the edit page after the Easy Mock interface is created. Write your JSON data with a knife

After the data is written, the URL in the address bar is the address of the interface to be accessed later. Go back to the project to send the request, again under index.vue

<template> <div> < button@click ="scanCode()"> </button> <h3> <div v-bind:key='book.isbn' v-for='book in books'>{{book.title}}</div> </div> </template> <script> import axios from "axios"; export default { data:{ books: [] }, methods: { scanCode() { wx.scanCode({ success: res => { console.log(res); }}); } }, mounted() { wx.request({ url: "https://www.easy-mock.com/mock/5b3ec93b119b373c0443793d/mpvuedata/list", success: res => { this.books = res.data.data; }}); }}; </script> <style scoped> h3{ font-size:60rpx; } div{ font-size: 40rpx; } </style>Copy the code

After running, the result will output the data dynamically

The last eggs

A little summary, through the above two functions (scan code, the book list data binding) can know how to use mpvue for the development of small programs, if you want to call other API usage with scan code function, do data request, like the book list function, hope this article helps mpvue friend success into the new pit pit ~

If this article is of any help to you, please click on a like before you leave. Every like is the motivation for me to continue writing