This is the first day of my participation in Gwen Challenge

Wepy profile

WePY makes applets support componentized, vue.js-like development mode by means of precompilation, allowing developers to develop applets just like normal Web applications. It is a Github open source framework.

The installation

Install or update the WePY command-line tool globally

npm install wepy-cli -g
Copy the code

Generate the Demo development project in the development directory

Wepy new myProject $wepy init standard myProject $wepy init standard myProjectCopy the code

Switch to the project directory

$ cd myproject
Copy the code

Install dependencies

$ npm  install
Copy the code

Enabling real-time compilation

$ wepy build --watch
Copy the code

Development mode transformation

Wepy is closer to the development mode of vUE, which is encapsulated again in the original small program development mode, and is closer to the existing MVVM framework development mode. The framework was developed with reference to some of the features of the current framework and incorporated into it. Below is a comparison of the code before and after using Wepy.

Official DEMO code:

Var app = getApp() Page({data: {motto: 'Hello World', userInfo: {}}, function bindViewTap: {motto: 'Hello World', motto: 'Hello World', motto: 'Hello World', motto: 'Hello World', motto: 'Hello World', motto: 'Hello World', motto: 'Hello World', motto: 'Hello World', motto: 'Hello World', motto: 'Hello World') function() { console.log('button clicked') }, onLoad: Function () {console.log('onLoad')}}) import wepy from 'wepy'; export default class Index extends wepy.page { data = { motto: 'Hello World', userInfo: {} }; methods = { bindViewTap () { console.log('button clicked'); }}; onLoad() { console.log('onLoad'); }; }Copy the code

Implementation based on Wepy:

import wepy from 'wepy'; export default class Index extends wepy.page { data = { motto: 'Hello World', userInfo: {} }; methods = { bindViewTap () { console.log('button clicked'); }}; onLoad() { console.log('onLoad'); }; }Copy the code

Support componentized development.

The component development of small program is realized in WePY. All the business and functions of the component are realized in the component itself, and the components are isolated from each other.

// index.wpy <template> <view> <panel> <h1 slot="title"></h1> </panel> <counter1 :num="myNum"></counter1> <counter2 :num.sync="syncNum"></counter2> <list :item="items"></list> </view> </template> <script> import wepy from 'wepy'; // Introduce List, Panel and Counter components import List from '.. /components/list'; import Panel from '.. /components/panel'; import Counter from '.. /components/counter'; Export default class Index extends wepy.page {config = {"navigationBarTitleText": "test"}; Components = {panel: panel, counter1: Counter, counter2: Counter, list: list}; {myNum: 50, syncNum: 100, items: [1, 2, 3, 4]}} </script>Copy the code

Single file mode, directory structure is clearer, more convenient development

Native applets require that the app instance must have three files: app.js, app.json, app.wxss, while the page page generally has four files: Page.js, page.json, page.wxml, page.wxss, and also requires that the three files of the app instance and the four files of the Page must have the same name except the suffix.

In WePY, the single file mode is used to unify the three files of the native applet app instance as app.wpy and the four files of the page as page.wpy. The structure of the development directory before and after WePY development is compared as follows:

Official DEMO:

 project
   pages
     index
       index.json
       index.js
       index.wxml
       index.wxss
     log
       log.json
       log.wxml
       log.js
       log.wxss
     app.js
     app.json
     app.wxss
Copy the code

Directory structure with the Wepy framework:

 project
   src
     pages
       index.wpy
       log.wpy
     app.wpy
Copy the code

Compiled using Babel by default, some new features of ES6/7 are supported

Users can configure their familiar Babel environment for development by modifying the wepy.config.js configuration file. Default enabled uses new features like Promise, async/await, etc.

Optimize the native API

Promise processing to the existing API, and fix some existing API flaws such as wx.request concurrency issues.

Native code:

onLoad = function () { var self = this; wx.login({ success: function (data) { wx.getUserInfo({ success: function (userinfo) { self.setData({userInfo: userinfo}); }}); }}); }Copy the code

Wepy-based code:

import wepy from 'wepy';

async onLoad() {
    await wepy.login();
    this.userInfo = await wepy.getUserInfo();
}
Copy the code

The assignment method is easier

Frequent use of setData affects page fluency

Native applet assignment

this.setData ({   a:b})
Copy the code

Wepy assignment

this.a = b
Copy the code