因为公司需求，需要为现有产品开发小程序版，本文为记录开发中遇到的问题以及解决方案。具体小程序语法&wepy语法就不占用空间了，大家都会看文档。
项目依赖:
"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"
}
//babel配置
babel: {
sourceMap: true,
presets: ['env'],
plugins: ['transform-class-properties', 'transform-decorators-legacy', 'transform-object-rest-spread', 'transform-export-extensions', 'syntax-export-extensions']
}如果想去除严格模式（不推荐，但是如果要使用如callee等严格模式下不允许使用的特性的话，就有这个必要），可以安装"babel-plugin-transform-remove-strict-mode-tags"这个插件来去除特定文件的严格模式，在需要使用的文件头上添加
// no use strict
or
/* no use strict */或者直接使用"babel-plugin-transform-remove-strict-mode"来去除全部文件的严格模式(不推荐)
组件循环
wepy的组件循环渲染功能在实现是有问题的（wepy官方自己也不推荐使用），具体大家可以看一下wepy的源码，他是通过$+名称来分隔各个方法和变量，所以在组件循环过程中，是不存在每个组件自己单独的生命周期的(这块只是愚见，如果有问题还请指出)。
那么如何使用循环组件呢，所幸的是小程序官方在1.6.3之后新增了自定义组件功能，但是在wepy里使用小程序原生写法还是比较费劲的，所以我们可以“欺骗”下wepy。通过看wepy的源码，我们可以得知他是通过compile模块把wepy文件抽成小程序所需要的js，json，wxml，wxss4个文件，而小程序的自定义组件也是由这4个文件组成，这样我们便可以"欺骗"wepy了。下面是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">起1</span> <span wx:show="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}}">起2</span> <span wx:show="unit && originalPrice != 0.0001">{{('/' + unit)}}</span> </view> <view class="vip-price"> <span>会2员价:</span>￥<span class="price-num food-price">{{(vipPrice != 0.0001 ? (vipPrice | number) : '时价')}}</span> <span wx:if="{{showStart}}">起3</span> <span wx:show="unit && vipPrice != 0.0001">{{('/' + unit)}}</span> </view> </view> </view></template><script> let config = { 'component': true } Component({ properties: { // 这里定义了innerText属性，属性值可以在组件使用时指定 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) { // 套餐菜品合计价格 if (food.foodproperty && food.pricingType === 1) { return food.startPrice; } else { return food.dishesPrice; } }, setVipPrice(food) { // 套餐菜品合计价格 if (food.foodproperty && food.pricingType === 1) { return food.startVipPrice; } else { return food.dishesVipPrice; } }, showStartPrice(food) { // 套餐菜品合计价格 if (food.foodproperty && food.pricingType === 1) { return true; } else { return false; } }, // 这里是一个自定义方法 customMethod: function() {} } })</script><style> .inner { color: red; }</style>
指的注意的是，我们如果是在webpy的component里使用小程序的自定义组件，那么需要在componet的page里引入组件:
config = {
navigationBarTitleText: '分类',
usingComponents: {'component-tag-name': '../Com/ddd'}
}原因和wepy的组件的实现有关，这里就不详述了。
组件传值，状态管理
会有这个问题和组件渲染也算有点关系，wepy提供了wepy-redux来解决状态的问题，但是在自定义组件里却可能会有问题(本质原因是开工的时候没发现wepy-redux),大家可以直接改写redux或者使用笔者所编写的这个小库“mayako-wex”来解决状态管理和组件传值问题。
按照eventbus来实现，尽量参照了vuex，redux的api来编写，基本没有侵入性，无论是wepy还是原生小程序都可以实现互通。具体使用请戳github.com/mayako21126…，如果出现绑定后页面未响应改变，那么需要使用小程序的$apply()方法
分包加载
请将wepy升到最新版本即可解决
