一、项目前期介绍
1、项目运行
安装node，安装wepy . npm install wepy-cli -g
命令行执行 npm install 安装依赖包
命令行执行 npm run dev 编译，产生小程序项目目录 dist.开启实时编译。（注：如果同时在微信开发者工具-->设置-->编辑设置中勾选了文件保存时自动编译小程序，将可以实时预览，非常方便。）
使用微信开发者工具-->添加项目，项目目录请选择dist目录。
（1）微信开发者工具-->项目-->关闭ES6转ES5。 __ 重要：漏掉此项会运行报错。
（2）微信开发者工具-->项目-->关闭上传代码时样式自动补全。 __ 重要：某些情况下漏掉此项也会运行报错。
（3）微信开发者工具-->项目-->关闭代码压缩上传。 __ 重要：开启后，会导致真机computed, props.sync 等等属性失效。（注：压缩功能可使用WePY提供的build指令代替，详见后文相关介绍以及Demo项目根目录中的wepy.config.js和package.json文件。）
2、vscode配置
首选项-->设置
{
"git.ignoreMissingGitWarning": true,
"editor.fontSize": 14,
"files.associations": {
".vue": "vue",
".wpy": "vue",
".wxml": "html",
".wxss": "css",
"*.wxs": "javascript"
},
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
},
"vetur.validation.template": false,
"editor.tabSize": 2
}
安装工具插件wpy-beautify，vetur, Vue 2 Snippets,vscode wxml,vscode-wechat,WeApp Snippets,Prettier formatter for Visual Studio Code等js,html,css相关格式化和自动补全插件.
3、开发技术介绍
wepyjs 框架：wepyjs文档
vuejs：https://cn.vuejs.org/v2/guide/
es6:http://es6.ruanyifeng.com/
redux中文文档：http://www.redux.org.cn/
小程序文档：https://mp.weixin.qq.com/debug/wxadoc/dev/component/
ui使用weui：https://github.com/Tencent/weui-wxss
demo 参考官网组件demo和小程序UIdemo：https://mp.weixin.qq.com/debug/wxadoc/dev/demo.html
weweb小程序转h5/ios/android框架:https://github.com/wdfe/weweb
二、项目结构
大致结构如下，在src下编辑，dist是打包后的目录。
app.wpy是启动文件，相当于小程序中的app文件,设置全局配置。
page 是页面目录，components 是组件目录,mixins是混合组件目录，store是redux文件目录，iamges 是图片字体目录 ，style是全局样式目录，util是工具函数目录，test是mock数据目录。
├── dist
├── node_modules
├── src
├── component
├── images
├── pages
├── profile
├── profile.wpy
├── orderDetail
├── payedOrderDetail
├── payedOrderDetail.wpy
├── unpayedOrderDetail
├── unpayedOrderDetail.wpy
├── refundOrderDetail
├── refundOrderDetail.wpy
├── styles
├── util
├── app.wpy
├── template.wpy
三、注意事项：
1、页面
（1）一个页面要单独放在一个文件夹下，否则打包编译后会出错
（2）每个页面都要在app.wpy配置
// 页面结构
// 对应于原生的.wxss
// 对应于原生的.wxml
sdfdff
2、本地图片只能用标签才能显示。如用background-image，url应为线上地址。
3、this.$apply()
WePY使用脏数据检查对setData进行封装，在函数运行周期结束时执行脏数据检查。但异步函数中更新数据的时候，必须手动调用$apply方法才能触发脏数据检查。
4、组件的使用
（1）子组件
// child.wpy
（2）父组件：
（3）组件间通信方式
1）$emit ：子组件 ----> 父组件
2）$broadcast：父组件 ----> 子组件
3）$invoke：子组件 ----> 子组件
举个emit的栗子
// 子组件 （orderContent-cancelOrder为事件名， evt.currentTarget.dataset.item.pay为携带的数据）
methods = {
cancelOrder(evt) {
this.$emit('orderContent-cancelOrder', evt.currentTarget.dataset.item.pay)
},
}
// 父组件
events = {
'orderContent-cancelOrder': (args) => {
....
}
}
（4）组件slot
slot相当于一个插槽，在组件里先占位。在页面引入组件的时候，将页面中组件标签里对应的slot内容插入组件。
下面是引用一个弹窗组件的栗子
场景：需要一个【确认删除弹框】和一个【确认取消弹框】
思路：因为弹窗的样式一样，文案类似，只是按钮上绑定的事件不同，所以在组件中将slot留出来放置按钮。页面引用组件时，根据不同的情况判断用哪个slot。
// 组件 PopupComponent
{{popData.title}}
{{popData.text}}
// 页面引用
好处：这样可以将事件写在页面中，减少了页面与组件的通信，也使组件更具有通用性。
5、函数节流
场景：提交订单时重复点击造成短时间触发多次请求
思路：设置全局变量count，每次点击时根据count来决定是否发送请求（API.requestWrap(param3)）。count每次点击后10秒清零。
// 设置全局变量，避免段时间出发多次请求
if (this.count === 0) {
this.count += 1
this.$apply()
API.requestWrap(param3)
const that = this
setTimeout(() => {
that.count = 0
}, 10000)
}
5、ios真机border显示不全
如图，部分年级的上border显示不全（年级标签的border是1rpx）
反复尝试，发现问题是活动名称与课程名称之间的1rpx分割线问题，如果将分割线的高度改为2rpx则无此bug。猜想是1rpx渲染成0.5px之后四舍五入被挤掉了。
以下是修改之前的分割线的css
.horizontalLine {
margin: 0 auto;
width: 686rpx;
height: 1rpx;
background-color: #ece9e9;
margin-top: 22rpx;
margin-bottom: 22rpx;
}
经修改，将1rpx高度变为2rpx，设置显示1rpx的下边框，这样就解决了年级标签的border显示不全的问题。
.horizontalLine {
margin: 0 auto;
width: 686rpx;
height: 2rpx;
border-bottom: 1rpx solid #ece9e9;
margin-top: 22rpx;
margin-bottom: 22rpx;
}
四、待优化
1、异步嵌套的优化
使用async、await简化代码