活范儿电商微信小程序

使用 wepy + wxParse + sass + pug + async await + zanUI + MinUI 搭建的微信小程序实例项目

Start

npm install wepy-cli -g
cd myproject
npm install
wepy build --watch

重要提醒

1. 使用微信开发者工具-->添加项目，项目目录请选择 myproject/dist 目录。
2. 微信开发者工具-->项目-->关闭ES6转ES5。
3. 微信开发者工具-->项目-->关闭上传代码时样式自动补全。
4. 微信开发者工具-->项目-->关闭代码压缩上传。 wepy 文档 文档 wepy wiki wepy API

Build

npm run build

生成 web 版本

wepy build --output web

第三方 UI 库

minui zanui

小程序的坑

• 有些路径前面必须加斜杠，比如

usingComponents: {
  'wxc-icon': '/minui/@minui/wxc-icon/_dist/index'
},

• 书写 sass 时，> 选择器最多只能嵌套一层，否则报错

wepy 的坑

• 组件传参不支持传对象的子对象
• 使用 wx API 时，wx 可用 wepy 代替，比如 wx.redirect => wepy.redirect
• 最好不用使用 PUG，各种意想不到的 BUG
• 在 wepy 下使用 wxParse
• 页面之间通信
• selectComponent 方式是由 page 调用的，在 wepy 里使用 page 对象的方式： this.$wxpage.selectComponent()