The WEPY framework borrowed the syntax style and functionality of Vue, but it was found to be quite different from Vue during its use. Now summarize the problems encountered in their development, a total of everyone for reference. If you are developing with Weby for the first time, I strongly recommend that you read this article carefully. It will definitely help you save a lot of valuable time. During the development process, it is also recommended that you come back to read it from time to time to consolidate and strengthen your memory.

  • Components in Weby

Component inside the pit is not the general more! Let’s start with data sharing between components. You can also do this in Vue by writing data as an object. Of course, you don’t want all the subcomponents to share the same data. The solution in Vue is to write data as a function that returns all the data so that no data is shared between components. But you can’t do it in Weby. It is explained in the document: all components in WEPY are static components, which are uniquely identified by component ID. Each ID corresponds to an instance of the component. When two components with the same ID are introduced into the page, the two components share the same instance and data. So if multiple components are referenced on the same page, you can only define different IDs for each component, and so on

import Child from '.. /components/child'; Export Default class Index extends Weby.page {components = {// Assignment of two different instances of the same component to different IDs. Child, anotherchild: Child }; }

Doesn’t it look stupid. But you have to use it that way. It’s fine if I only reference two or three components of the same type on the page, but what if I’m in a loop and I don’t know how many components I need to reference? Next, there’s the component loop. The Weby official documentation states that when you need to render a Weby component through a loop (similar to rendering native WXML tags through a wx:for loop), you must use the helper tag

defined by Weby. However, features such as props, computed, watch, and so on are not supported in the components of the repeat. What? Props not to use them? How does a parent pass arguments to a child component? Practice later found, if the data in the props in the template is to be able to take, but wouldn’t take it in the method or event, you say god is not magic! So the final solution is to use the weby-redux, similar to Vuex, in the store implementation.

  • Asynchronous data for rendering the view

It is also important to remember that asynchronously fetched data requires a manual call to the this.$apply() method to rerender the view. The beginning of the time is in the page data write false data, rendering well. However, when the data is read from the interface, the dead or alive view does not come out. It took me a while to realize that I needed to call this.$apply() manually. Vue doesn’t have to do that.

  • Method definition

Events on pages in WEPY need to be in methods, handlers between components need to be in events, and custom methods need to be in the same level as methods. Unlike vue, which can be written in methods. If a function is written in events, it does not need to be written in the child component when it is called. The child $emit will automatically look for the method of the same name in events to execute. This is also different from Vue.

  • Event pass arguments

Weby optimizes the way native applets pass arguments in events. For example, there’s a method on the page called getIndex, which is going to take the index property of a loop, but in the native world you have to define an additional data-index property, And then through the event in getIndex. CurrentTarget. Dataset. The index to obtain. In WEPY, you can pass it directly in the event, but you need to add {{}}, and write it as getIndex({{index}}), which is also different from Vue.

  • Data binding

This is the bane of the applet native method, and WEPY can’t carry the pot. Data binding also uses {{}}, but {{}} can only carry out simple operations in the {{}}, which specific operations can be supported by the official documentation. The requirement is a list, and if it is selected, change the style. The normal way to do this is to fire a method when it is selected and assign index to currentActive. If currentActive == index, apply the active style. Naming is a simple requirement. But write good is not good, look for a long time also did not find which wrong, finally look at the document, the original is not support this way of writing!! Only support the simple operation, this does not belong to the simple scope!! Arr [index] is true. Arr [index] is true. Arr [index] is true. To sum up: {{}} is not powerful at all.

  • Dynamic binding class

Weby needs to follow the native binding of small programs, which is also different from Vue.

< / div >.

  • Mixins hybrid

There are two kinds of mixins in Weby. For Component Data data, ComponentContents components, Events events, and other custom methods are mixed by default, that is, if they are not defined in the component, they take effect in the mixin, if they are defined in the component, they take precedence over those defined in the component, and those defined in the mixin do not take effect. For methods events and applet page events, however, there will be a compatible mix that takes effect whenever defined. But the response is defined in the component first, and then in the mixin. An event in methods in a Vue component that has the same name as an event in a mixin takes the event in the component. The hook function for the lifecycle responds first in the mixin, in the response component.

  • WXS is a good thing

WXS is a scripting language for small programs. With WXML, you can build the structure of the page. For cases where props do not work with methods, or for slightly more complex statements, you can write them in WXS. However, it has its own syntax, and the JS method as a whole works, but there are a few caveats.

You can define the required functions individually on a page, using import, and then define them in a class, similar to how you would import components. Then you can happily use it in the template. Specific documents address: https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/

WXS file contents

module.exports = {
  getClassName : function(item){
      retrun item.className
  }
}

The component content

<template>
  <view>{{ wxs.getClassName(item) }}</view>
</template>

import wxs from './wxs/wxs.wxs'

export default class demo extends Wepy.component {
  data = {}
  wxs = {
   wxs : wxs
  }
}

Note: The above problems are all wepy1.7.2 version, I wish you a happy development, less pit.

Finally, I attach the link to the official document for your reference: small program official document WEPY official document