Because the company needs to develop small program version for the existing product, this article is to record the problems encountered in the development and the solutions. The concrete applet syntax &wepy syntax takes up no space, everyone will read the document.

Project dependencies:

"dependencies": {
"wepy": "^ 1.6.0." "."wepy-async-function": "^ 1.4.4." "."wepy-com-toast": "^ 1.0.3"
}, "devDependencies": {
"babel-eslint": "^ 7.2.3." "."babel-plugin-transform-class-properties": "^ 6.24.1"."babel-plugin-transform-decorators-legacy": "^" 1.3.4."babel-plugin-transform-export-extensions": "^ 6.22.0"."babel-plugin-transform-object-rest-spread": "^ 6.26.0"."babel-preset-env": "^ 1.6.1." "."cross-env": "^ 5.1.3"."eslint": "^ 3.19.0"."eslint-config-standard": "^ 7.1.0"."eslint-friendly-formatter": "^ 2.0.7." "."eslint-plugin-html": "^ 2.0.3"."eslint-plugin-promise": "^ 3.6.0"."eslint-plugin-standard": "^ 2.3.1." "."immutable": "^ 3.8.2"."mayako-wex": "^ 0.3.1"."wepy-compiler-babel": "^ 1.5.1." "."wepy-compiler-less": "^ 1.3.10"."wepy-eslint": "^ 1.5.3." "."wepy-plugin-filemin": "^ 1.3.11"."wepy-plugin-imagemin": "^ 1.5.2." "."wepy-plugin-uglifyjs": "^ 1.3.6." "} // configure Babel: {sourceMap: true,
presets: ['env'],
plugins: ['transform-class-properties'.'transform-decorators-legacy'.'transform-object-rest-spread'.'transform-export-extensions'.'syntax-export-extensions']}Copy the code

If you want to remove strict mode (not recommended, but necessary if you want to use features like Callee that are not allowed in strict mode), You can install the “babel-plugin-transform-remove-strict-mode-tags” plug-in to remove the strict mode of a particular file and add it to the header of the file you want to use

// no use strict 
or
/* no use strict  */Copy the code

Or simply use “babel-plugin-transform-remove-strict-mode” to remove strict mode from all files (not recommended)

Component loop

Wepy components circulation rendering functions in the implementation is problematic (wepy official yourself is not recommended, as you can see wepy source, specific he is separated by $+ name of each method and variable, so in the process of component cycle, there is no life cycle of each component in separate (this just humble opinion, Please point out any questions).

As for how to use looping components, fortunately, applets have added custom components since 1.6.3, but using applets in their native form is still a bit of a drag in Wepy, so we can “cheat” Wepy. By looking at the source code of Wepy, we can know that wepy files are extracted into js, JSON, WXML, wXSS4 files by compile module, and the small program custom component is also composed of these 4 files, so we can “cheat” Wepy. Here’s a demo:

<template>    <view class="list-price food-price-wrap">        <view class="normal-price" wx:if="{{! showVip || vipPrice == originalPrice}}"> $< span class ="price-num food-price">{{(originalPrice(food) != 0.0001 ? (originalPrice(food) | number) : '时价')}}</span>            <span wx:if="showStart"<span style = "max-width: 100%; clear: both; min-height: 1em"unit && originalPrice ! = 0.0001" wx:bind="::('/' + unit)"> {{('/' + unit)}}</span>        </view>        <view wx:if="{{showVip && vipPrice ! == originalPrice}}">            <view class="original-price">                <span wx:if="{{showVip && vipPrice ! == originalPrice}}"<span > <span class="price-num food-price">{{(originalPrice != 0.0001 ? (originalPrice | number) : '时价')}}</span>                <span wx:if="{{showStart}}"<span style = "max-width: 100%; clear: both; min-height: 1em"unit && originalPrice ! = 0.0001"> {{('/' + unit)}}</span>            </view>            <view class="vip-price"<span> <span> ￥<span class="price-num food-price">{{(vipPrice != 0.0001 ? (vipPrice | number) : '时价')}}</span>                <span wx:if="{{showStart}}"<span style = "max-width: 100%; clear: both; min-height: 1em"unit && vipPrice ! = 0.0001"> {{('/' + unit)}}</span>            </view>        </view>    </view></template><script>    let config = {        'component': true} Component({properties: {// We define the innerText property, which can be used by the Component to specify food: {type: Object,                observer: function(food, oldVal) {                    if (food) {                        if(! food.dishesUnit) { this.setData({ unit:'份'})}else {                            this.setData({                                unit: food.dishesUnit                            })                        }                    }                    this.setData({                        'originalPrice': this.setOriginalPrice(food),                        'vipPrice': this.setVipPrice(food),                        'showStart': this.showStartPrice(food)                    })                }            }        },        data: {            showVip: true,            showStart: ' ',            originalPrice: ' ',            vipPrice: ' ',            unit: ' '        },        ready() {        },        methods: {            setOriginalPrice(food) {// Total price of a set menu itemif (food.foodproperty && food.pricingType === 1) {                    return food.startPrice;                } else {                    returnfood.dishesPrice; }},setVipPrice(food) {// Total price of dishesif (food.foodproperty && food.pricingType === 1) {                    return food.startVipPrice;                } else {                    returnfood.dishesVipPrice; }}, showStartPrice(food) {// Total menu priceif (food.foodproperty && food.pricingType === 1) {                    return true;                } else {                    return false; }}, // here is a customMethod customMethod:function() {}        }    })</script><style>    .inner {        color: red;    }</style>
Copy the code

Copy the code

If you’re using a widget’s custom component in a Webpy Component, you need to add a component to the Componet page:

config = {            
navigationBarTitleText: 'classification',            
usingComponents: {'component-tag-name': '.. /Com/ddd'}}Copy the code

The reason has to do with the implementation of wepy’s components, which I won’t go into here.

Component value transfer, state management

This problem is also related to component rendering, wepy provides wepy-redux to solve the problem of state, However, there may be problems with custom components (essentially because wepy-Redux was not discovered when we started). You can either rewrite Redux directly or use the library “Mayako-wex” written by me to solve the problem of state management and component transfer.

It is implemented in accordance with EventBus and written by referring to vuex and Redux API as far as possible. It is basically non-invasive and can be interworked with wePY or native small programs. Please click github.com/mayako21126… If the page does not respond after binding, you need to use the applet’s $apply() method

The subcontract to load

Please upgrade wepy to the latest version