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

This article introduces the relevant knowledge of "how to use mpvue to develop WeChat Mini Programs". 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!

Mini Program is downloaded locally as an offline package, loaded and started through the Wechat client.

Mpvue design

Vue.js

Quick start sample code can be provided through vue-cli

Component mechanism

Mini Program logic and view layer code are separated from each other, and common components cannot be aggregated into a single file entry after extraction. Components need to be introduced in the view layer and logic layer respectively, resulting in poor maintainability.

The component has no namespace mechanism, the event callback must be set to a global function, the component design has the risk of naming conflicts, and the data encapsulation is not strong.

Developers need a friendly code organization that can be imported at one time through the ES module.

Component data is well encapsulated

Multiterminal multiplexing

Common types of business:

Mini Program

Mini Program development framework can not achieve multiterminal reuse

Transform the existing H5 products into Mini Program applications

On the contrary

Supporting facilities

Mpvue-loader provides a webpack version of the loader

Mpvue-webpack-target webpack Construction goal

Postcss-mpvue-wxss style transcoding preprocessing tool

Px2rpx-loader style conversion plug-in

Mpvue-quickstart mpvue-quickstart

A tool for mpvue-simple to assist mpvue in the rapid development of Page / Component Mini Program pages

Other

Design ideas

Mini Program & vue.js are all logical view layer frameworks.

Data-> driver-> View change

Event-> response-> View change

Write Mini Program code with reference to vue

Mini Program is responsible for view layer display.

Vue.js centralized business logic

Synchronize vue data to Mini Program after change

Different lifecycles: trigger vue mounted after onReady

Be careful

Limit

V-html is not supported

Complex js expressions are not supported in templates-computed can be used

Filter not supported

There are fewer prompts on the console

In many cases, the cause of the error is not indicated.

Methods in methods are not supported in template syntax

Export default {data () {return {costList: []}}, methods: {formatCost (item) {return item.toFixed (2)}, getData () {let arr = [3.255meme 4.1min15] this.costList = arr}

Can be adjusted to change directly when getting data

GetData () {let arr = [3.255 this.formatCost 4.1jue 15] / / iterate through the elements in the array, then format it and add it to costList to arr.map (item = > {this.costList.push = this.formatCost (item))}

Use computed

Transfer changed data

All page created lifecycle functions, executed at once when loaded

Use mounted or onLoad or onReady instead

Code structure

Pages

The pages of Mini Program

Utils

Common tool code

This is the end of the content of "how to develop WeChat Mini Programs with mpvue". Thank you for 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.