Wepy framework notes summary of WeChat applet

This framework is a development framework based on mini-programs in Tencent. The design ideas are basically referenced by VUE, and the development model and coding style are more than 80% close to VUE.

Advantages

Component development

Although mini programs have tags to implement component reuse, they are limited to template fragment reuse, and business code and interaction events still need to be processed on the page. The effect of component loose coupling and multiplexing cannot be achieved.

Wepy component example

 // 

 <template>

  <view>

   <panel>

    <h1 slot="title"></h1>

   </panel>

   <counter1 :num="myNum"></counter1>

   <counter2 :="syncNum"></counter2>

   <list :item="items"></list>

  </view>

 </template>

 <script>
 import wepy from 'wepy';

 import List from '../components/list';

 import Panel from '../components/panel';

 import Counter from '../components/counter';

 export default class Index extends  {

  config = {

   "navigationBarTitleText": "test"

  };

  components = {

   panel: Panel,

   counter1: Counter,

   counter2: Counter,

   list: List

  };

  data = {

   myNum: 50,

   syncNum: 100,

   items: [1, 2, 3, 4]

  }

 }
 </script>

Support loading of external NPM packages

The biggest flaw of mini programs is that they do not support NPM packages, which leads to the inability to directly use a large amount of excellent open source content. During the compilation process, wepy will recursively traverse the required in the code and copy the corresponding dependency file from node_modules, and modify the require to a relative path to achieve support for external NPM packages.

Single file mode makes the directory structure clearer

The official directory structure of the mini program requires that the app must have three files, , , , , , , . And the file must have the same name. So use wepy to develop the development directory before and after wepy to develop the following:

Official DEMO:

project

├── pages

| ├── index

| | ├──  index Page configuration

| | ├──  index Page logic

| | ├──  index Page structure

| | └──  index Page style sheet

| └── log

|  ├──  log Page configuration

|  ├──  log Page logic

|  ├──   log Page structure

|  └──  log Page style sheet

├──     Mini Program Logic

├──    Mini Program Public Settings

└──    Mini Program Public Style Sheet

Directory structure after using wepy framework:

project

└── src

 ├── pages

 | ├──  index Page configuration、structure、style、logic

 | └──   log Page configuration、structure、style、logic

 └──   Mini Program Configuration Items（全局style配置、Declare hooks, etc.）

How to develop

Get started quickly

Install

npm install wepy-cli -g 

Mini Program Framework Wepy Command Line Tool

Create a project

wepy new myproject

Switch to project directory

cd myproject

Real-time compilation

wepy build –watch

Directory structure ├── dist Directory specified by WeChat developer tools

├── node_modules

├── src     Directory of code writing

| ├── components   Component folder（Not complete page）

| | ├── com_a.wpy  Reusable components a

| | └── com_b.wpy  Reusable components b

| ├── pages    Page folder（Full page）

| | ├──   page index

| | └──   page page

| └──    Mini Program Configuration Items（Global style configuration、Declare hooks, etc.）

└──    package Configuration

Main differences between wepy and VUE

1. Both support props, data, computed, components, methods, and watch (watcher in wepy), but methods in wepy can only be used for page event binding, other custom methods must be placed in the outer layer, and all methods in VUE are placed under methods

In props, you need to add .sync modifier (similar) to achieve dynamic update of props, and after the parent component is changed and passed to the child component, you must execute this.$apply() method to update.

Supports two-way binding of data. When defining props, the child component adds twoway:true attribute value to realize that the child component can modify the parent component data.

4. It is recommended to use eventBus for component communication, while in wepy, it is used to realize communication through broadcast, broadcast, emit, and $invoke.

· First, event monitoring needs to be written ineventsUnder attributes：

``` bash

import wepy from 'wepy';

export default class Com extends  {

 components = {};

 data = {};

 methods = {};

 events = {

  'some-event': (p1, p2, p3, $event) => {

    (`${} receive ${$} from ${$}`);

  }

 };

 // Other properties

}

```
· $broadcast：Parent component triggers all child component events
· $emit：Child component triggers parent component event
· $invoke：Subcomponent triggers subcomponent events

The life cycle includes created, mounted, etc. Wepy only supports the life cycle of mini programs: onLoad, onReady, etc.

VUE feature technologies such as filters, keep-alive, ref, transition, global plug-in, routing management, server-side rendering, etc. are not supported.

Advanced introduction

.wpy file description

A .wpy file can be divided into three parts, each corresponding to a label:

The script part, that is, the content in the tag, can be divided into two parts:
The logical part, except the config object, corresponds to the native .js file;
The configuration part, that is, the config object, corresponds to the native .json file.

The structure part, that is, the template part, corresponds to the native .wxml file.

The style part, i.e. the style part, corresponds to the native .wxss file.

The script, template, and style in the .wpy file all support lang and src attributes. Lang determines its code compilation process. src determines whether to outsource the code. When the src attribute exists and is valid, the inline code will be ignored.

Normal component reference

When a page needs to introduce components or components need to introduce subcomponents, it must be in the .wpy file

<template>
 <!-- by`<script>`Components declared in the script sectionIDName custom tags，Thus in`<template>`Insert components in the template section -->
 <child></child>
</template>

<script>
 import wepy from 'wepy';
 //Introduce component files import Child from '../components/child';

 export default class Index extends  {
  //Declare the component and assign the component id as child  components = {
   child: Child
  };
 }
</script>

It should be noted that the components in WePY are static components, and are uniquely identified by component IDs. Each ID corresponds to a component instance. When two components with the same ID are introduced on the page, the two components share the same instance and data. When one of the components' data changes, the other will also change together.
If you need to avoid this problem, you need to assign multiple component IDs and instances.

Loop rendering of components

1.4.6 New

When we need to render WePY components in a loop (similar to rendering native wxml tags through wx:for loop), wePY-defined auxiliary tags must be used

<template>
 <!-- Notice，useforproperty，而不是usewx:forproperty -->
 <repeat for="{{list}}" key="index" index="index" item="item">
  <!-- insert<script>Script section declaredchildComponents，Passed in at the same timeitem -->
  <child :item="item"></child>
 </repeat>
</template>

computed compute properties

The computed calculation property is a function with a return value and can be used directly as bound data. Therefore, similar to the data attribute, the code can be referenced by this.calculated attribute name, and the template can also be bound by {{calculated attribute name}}.

It should be noted that as long as any data in the component changes, all computed properties will be recalculated.

 data = {
  a: 1
 }

 // Calculate the attribute aPlus, which can be referenced in the script, and interpolated in the template by {{ aPlus }} computed = {
  aPlus () {
   return  + 1
  }
 }

watcher listener

The monitor watcher can monitor the numerical update of any numerical attribute. The listener is declared in the watch object, and its type is a function. The function name is the same as the numerical attribute in the data object to be listened to. Whenever the numerical attribute being listened to is changed once, the listener function will be automatically called and executed once.
Listeners are suitable for situations where some additional processing is required when numerical properties change.

data = {
  num: 1
 }

 // The listener function name must be the same as the numerical attribute num in the data object to be listened to. // The newValue in its parameter is the new value after the numerical property is changed, and oldValue is the old value before the change watch = {
  num (newValue, oldValue) {
   (`num value: ${oldValue} -> ${newValue}`)
  }
 }

 // Whenever the numerical attribute num is being listened to is changed once, the corresponding listener function num() of the same name is automatically called and executed once. onLoad () {
  setInterval(() => {
   ++;
   this.$apply();
  }, 1000)
 }

props

Static value transmission

The static value is passed to the parent component to pass constant data to the child component, so only the String string type can be passed.

In the component label in the parent component template section, use the attribute name declared in the child component props object as its attribute name to receive the value passed by the parent component.

<child title="mytitle"></child>

// 
props = {
 title: String
};

onLoad () {
 (); // mytitle
}

Dynamic value transmission

Dynamic value transmission refers to the parent component passing dynamic data content to the child component, and the parent and child component data are completely independent and do not interfere with each other. However, the effect of data binding of parent component to child components can be achieved by using the .sync modifier, or the effect of data binding of child component to parent component can be achieved by setting the twoWay: true of child component props. Then if you use the .sync modifier and add twoWay: true in the child component props, you can realize two-way binding of the data.

Note: When twoWay in the following example is true, it means that the child component dynamically passes the value to the parent component in one-way, and when twoWay is false (the default value can be not written), it means that the child component does not pass the value to the parent component. This is where Vue is inconsistent, and the reason why twoWay is still used here is just to maintain consistency with Vue in identifier naming as much as possible.

In the child component label inserted in the parent component template section, use the :prop attribute (equivalent to the v-bind:prop attribute in Vue) to dynamically pass the value.

// 

<child :title="parentTitle" :="parentTitle" :twoWayTitle="parentTitle"></child>

data = {
 parentTitle: 'p-title'
};


// 

props = {
 // Static value transmission title: String,

 // One-way dynamic transmission of values ​​to children syncTitle: {
  type: String,
  default: 'null'
 },

 twoWayTitle: {
  type: Number,
  default: 50,
  twoWay: true
 }
};

onLoad () {
 (); // p-title
 (); // p-title
 (); // 50

  = 'c-title';
 (this.$); // p-title.
  = 60;
 this.$apply();
 (this.$); // 60. --- When twoWay is true, when the property value in the child component props changes, the corresponding value of the parent component will be changed at the same time. this.$ = 'p-title-changed';
 this.$parent.$apply();
 (); // 'p-title';
 (); // 'p-title-changed' --- There is a props attribute value of the .sync modifier. When it is changed in the parent component, the corresponding value of the child component will be changed at the same time.}

Component communication and interaction

Event handling functions used to listen for communication and interaction events between components need to be written in the events object of the component and the page.

- broadcastbroadcastbroadcast event is initiated by the parent component and all child components receive this broadcast event unless the event is cancelled manually. The order of event broadcasts is breadth-first search order

- emitmitmit is exactly the opposite of broadcast. All ancestor components of the event initiating component will receive broadcast in turn. All ancestor components of the event initiating component will receive emit events in turn.

- invokeinvokeinvoke is a direct call to a method in another component by a page or component. It finds the corresponding component by passing it into the component path, and then calls its methods.

For example, if you want to call a method of component ComA in the page Page_Index:

this.$invoke('ComA', 'someMethod', 'someArgs');

If you want to call a method of component ComG in component ComA:

this.$invoke('./../ComB/ComG', 'someMethod', 'someArgs');

Component custom event handling functions

You can bind events to custom components by using the .user modifier, such as: @=”myFn”

Where @ represents the event modifier, customEvent represents the event name, and .user represents the event suffix.

There are currently three event suffixes:

.default: Bind the bubble event of the applet, such as bindtap, and the .default suffix can be omitted and not written;

.stop: Bind the mini program to capture things, such as catchtap;

.user: binds user-defined component events and is triggered by $emit.

 // 

<template>
 <child @="parentFn"></child>
</template>

<script>
 import wepy from 'wepy'
 import Child from '../components/child'

 export default class Index extends  {
  components = {
   child: Child
  }

  methods = {
   parentFn (num, evt) {
    ('parent received emit event, number is: ' + num)
   }
  }
 }
</script>


// 

<template>
 <view @tap="tap">Click me</view>
</template>

<script>
 import wepy from 'wepy'

 export default class Child extends  {
  methods = {
   tap () {
    ('child is clicked')
    this.$emit('childFn', 100)
   }
  }
 }
</script>

slot component content distribution slot

The slot slot in WePY serves as the space placeholder for the content distribution tag, which facilitates the "plug and unplug" of the content distribution tag equivalent to the expansion board in the parent component, and provides more flexible and convenient content distribution to the child components.

The specific usage method is to first declare the slot tag as the content slot in the child component template part, and at the same time, the slot name must be specified in its name attribute, and the default label content can also be set; then declare the content distribution tag for "plug-out" in the parent component template part of the child component with the slot.
Note that the content distribution tags in these parent components must have a slot attribute and their value is the corresponding slot name in the child component, so that the content in the parent component's content distribution tag will overwrite the default content in the corresponding slots in the child component.

There are the following templates in the Panel component:

<view class="panel">
 <slot name="title">Default title</slot>
 <slot name="content">Default content</slot>
</view>

When using Pannel child components in parent components, you can use this:

<panel>
 <view slot="title">New title</view>
 <view slot="content">
  <text>New content</text>
 </view>
</panel>

mix

Default blending

For component data, components components, events events and other custom methods, the default mixing is used, that is, if the component does not declare the data, components, events, custom methods, etc., then the options in the mixing object will be injected into the component. Options declared for components will not be affected.

// mixins/
import wepy from 'wepy';

export default class TestMixin extends  {
 data = {
  foo: 'foo defined by page',
  bar: 'bar defined by testMix'
 };
 methods: {
 tap () {
  ('mix tap');
 }
 }
}

// pages/
import wepy from 'wepy';
import TestMixin from './mixins/test';

export default class Index extends  {
 data = {
  foo: 'foo defined by index'
 };
 mixins = [TestMixin ];
 onShow() {
  (); // foo defined by index.
  (); // foo defined by testMix.
 }
}

Compatible hybrid

The component methods response events and applet page events will be compatible with each other, that is, first responding to the component itself and then responding to the response events in the mixed object.

// mixins/
import wepy from 'wepy';

export default class TestMixin extends  {
 methods = {
  tap () {
   ('mix tap');
  }
 };
 onShow() {
  ('mix onshow');
 }
}

// pages/
import wepy from 'wepy';
import TestMixin from './mixins/test';

export default class Index extends  {

 mixins = [TestMixin];
 methods = {
  tap () {
   ('index tap');
  }
 };
 onShow() {
  ('index onshow');
 }
}


// index onshow
// mix onshow
// ----- when tap
// index tap
// mix tap

Interceptor

You can use the global interceptor to configure the API's config, fail, success, and complete methods. Refer to the example:

import wepy from 'wepy';

export default class extends  {

 constructor () {
  ('request', {
   config (p) {
     = +new Date();
    return p;
   },
   success (p) {
    ('request success');
    return p;
   },
   fail (p) {
    ('request error');
    return p;
   }
  });
 }
}

WePY data binding method

WePY uses dirty data checking to encapsulate setData, and performs dirty data checking at the end of the function run cycle. First, you don’t have to worry about whether the setData will have performance problems on the page many times, and second, you can modify the data to achieve binding more concisely, without repeatedly writing the setData method.

 = 'this is title';

To modify data in functions outside the function run cycle, you need to manually call the $apply method

setTimeout(() => {
  = 'this is title';
 this.$apply();
}, 3000);

Optimize event parameter delivery

// Official<view data- data-title="wepy" data-other="otherparams" bindtap="tapName"> Click me! </view>
Page({
 tapName: function(event) {
 ()// output: 1
 ()// output: wepy
 ()// output: otherparams
 }
});

// WePY versions after 1.1.8 are only allowed to pass strings.<view bindtap="tapName({{index}}, 'wepy', 'otherparams')"> Click me! </view>

methods: {
 tapName (id, title, other, event) {
  (id, title, other)// output: 1, wepy, otherparams
 }
}

Change the data binding method

Keep the setData method, but it is not recommended to use setData to perform binding, fix the undefined bug, and modify the parameter entry support: (target, value) (object)

// Official<view> {{ message }} </view>

onLoad: function () {
 ({message: 'hello world'});
}


// WePY
<view> {{ message }} </view>

onLoad () {
  = 'hello world';
}

Important reminder

1. Use WeChat Developer Tools –> Add a project, please select the dist directory for the project directory.
2. WeChat Developer Tools –> Projects –> Close ES6 to ES5. Important: Missing this item will cause an error to be reported.
3. WeChat Developer Tools –> Projects –> Close the styles automatically complete when uploading code. Important: In some cases, if you miss this item, you will also run an error.
4. WeChat Developer Tools –> Projects –> Close Code Compression Upload. Important: After turning on, the real machine computed, etc. will cause the real machine to fail. (Note: The compression function can be replaced by the build directive provided by WePY. For details, please refer to the relevant introduction in the following article and the files in the root directory of the Demo project.)
5. Run wepy build –watch in the root directory of the local project to enable real-time compilation. (Note: If you check the WeChat Developer Tools->Settings->Editor to automatically compile the applet when saving files, you will be able to preview in real time, which is very convenient.)

Notice

The methods attribute in WePY can only declare bind and catch events of the page wxml tag, but cannot declare custom methods.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.