wepy is a small micro-channel program framework, support for modular development, similar to the style of development Vue.js. It can be used with redux use, and can pack a web applets at the same time.
Official documents address
Directory Structure:
sotre: (use if you create a project redux words) redux
wepy.config.js: webpack profile
app.wpy: entry file
project.config.json: applet project configuration files
index.template.html: entry file web page
pages: store home page
components: storage components
mixins: hybrid components
mixins:
where mixins is the place to put hybrid components, such as many page should be used in wx.showToast method. And are loading method. Then we can create a toast.js
Method wx wepy which inherited the objects, methods, do not use wx objects in wepy development framework suggested, although the run-time effect is the same, but will cli error (wepy no wx objects) when packaging.
After mixins methods defined, the mixins can be used in the assembly.
First registration toast in mixins, and then you can call itself like a method called directly like this.showToast ()
wepy the components used in a class, vue is used in the object.
methods, events:
in vue, all the methods which are defined in the method. In wepy, a common method is defined directly in the class inside a static method. The events are defined method among components interact. only the methods defined event method.
About computed:
wepy is also computed, props, data, watch, etc. Some of vue attributes (no filter, directive).
props, data, watch and basic vue no different.
But in wepy the computed attribute can not be calculated parameter passing (I could not find a way to pass the Senate, and official documents not mentioned), some dynamic data processing time can only be operated by other methods.
For example, the server acquired pieces JSON object has timestamp data needs to be converted into a string, my approach is to pass values to a timestamp further subassembly, and then counted using props to punch computed in the subassembly.
Event traditional values:
wepy events may pass some basic types of parameters, but the need to use double quotes. Otherwise acquired parameter is a string type.
Parameter reference type attribute can be used micro-channel data- native binding data, then acquires the function using e.currentTarget.dataset
Components by value:
pass design ideas similar component values wepy vue 1.0. This put it in more detail in the official documents. It should be noted that the data transfer if you need props to follow the parent component data changes, you want to use sync modifier. If the server is asynchronous data acquisition, it is necessary to use this in the parent component. $ Apply () method to trigger a refresh sub-assemblies.
wepy attribute data transfer can not be transmitted directly to the image vue objects, such as: data = "data.someData" (vue )
such wording not visually read the data wepy (wepy the like take no direct observation lifecycle data), I use is: data.sync = "data", then to the subassembly using the calculated property calculation.
Dynamic binding class:
Vue used in the: class = "{.........}" , you can achieve the purpose.
In wepy, to use micro-channel binding syntax native class = "test-class {{..... }}"
wherein the test-class is a class not require dynamic binding, double brackets is to be bound class
Rendering cycle components:
wepy cycle rendering components, you must use the <repeat> tag, or micro-channel official <block> tag (these two labels are not rendered to the dom) or they will not render successfully.
wx:if:
wepy used wx: if the method will only prevent the view rendering, and does not prevent component initialization.
If the parent pass over some dynamic data in the life cycle of the subassembly onLoad or computing properties, it will be given.