共计 2218 个字符，预计需要花费 6 分钟才能阅读完成。
WePY 微信小程序
## 全局安装
## wepy 被 cli 工具带入
npm install wepy-cli -g
## 进入文件夹
cd yourdir
## 安装依赖
npm i
## 开发状态
npm run dev
## 如果点击预览，提示文件体积过大
## 先清除所有文件
npm run clean
## 构建上线版本 再预览
npm run build
自定义组件，使用时添加前缀 zd，命名以短横线链接。
自定义属性名以短横线链接，组件内转为驼峰。
基础模板
template、style 不多说，主要是 page、component。
在 WePY 中，小程序被分为三个实例：小程序实例 App、页面实例 Page、组件实例 Component。其中 Page 实例继承自 Component。各自的声明方式如下
import wepy from 'wepy';
// 声明一个 App 小程序实例
export default class MyAPP extends wepy.app {
}
// 声明一个 Page 页面实例
export default class IndexPage extends wepy.page {
}
// 声明一个 Component 组件实例
export default class MyComponent extends wepy.component {
}
Page 页面实例和 Component 组件实例
import wepy from 'wepy';
// export default class MyPage extends wepy.page {
export default class MyComponent extends wepy.component {customData = {} // 自定义数据 // 例如 cudata = 'aa';
customFunction () {} // 自定义方法 例如 showData() {}
onLoad () {} // 在 Page 和 Component 共用的生命周期函数
onShow () {} // 只在 Page 中存在的页面生命周期函数
config = {}; // 只在 Page 实例中存在的配置数据，对应于原生的 page.json 文件
data = {}; // 页面所需数据均需在这里声明，可用于模板数据绑定
components = {}; // 声明页面中所引用的组件，或声明组件中所引用的子组件
mixins = []; // 声明页面所引用的 Mixin 实例
computed = {}; // 声明计算属性（详见后文介绍）watch = {}; // 声明数据 watcher（详见后文介绍）methods = {}; // 声明页面 wxml 中标签的事件处理函数。注意，此处只用于声明页面 wxml 中标签的 bind、catch 事件，自定义方法需以自定义方法的方式声明
events = {}; // 声明组件之间的事件处理函数}
技术选型
WePY
WePY 框架在开发过程中参考了 Vue 等现有框架的一些语法风格和功能特性，对原生小程序的开发模式进行了再次封装，更贴近于 MVVM 架构模式, 并支持 ES6/ 7 的一些新特性。以下是使用 WePY 前后的代码对比与组件化示例。
echarts-for-weixin
ECharts 的微信小程序版本。
使用方式参照 demo.wpy，更多案例看仓库代码。
候选工具
zanui-weapp
ZanUI-WeApp 是有赞移动 Web UI 规范 ZanUI 的小程序现实版本，结合了微信的视觉规范，为用户提供更加统一的使用感受。
现已包含 badge、btn、card、cell、dialog、icon、label、noticebar、panel、popup、switch、tab、toast、toptips 等组件或元素。
zanui-weapp 可以通过自定义组件的方式与 WePY 搭配干活。
目前智店界面还算简单，暂时没有考虑引入。
关于 cookie
微信小程序中并没有 cookie 接口，在 wx.request 请求中的 header 中带有服务器主动返回的 cookie。
在其他接口中，并不会主动把携带的 cookie 返回，于是，在登录操作的时候解析好，存在本地，每次需要的时候去拿。
csrfToken 相关的内容，在每次接口返回的时候，单独存一遍。
最后能够模拟出普通浏览器携带 cookie 的状态。
条形码在线生成
其他内容
导航栏上的返回按钮
- navigate：跳转到新页面，有返回按钮
-
wx.redirect：在当前页打开，则无返回按钮
-
wx.navigateTo：保留当前页面，跳转到应用内的某个页面，有返回按钮
通过 onUnload 监听当前页面点击了左上角的返回箭头。
但，页面一旦使用 switchTab 的操作，当前路由队列都会关闭，触发 onUnload。
button 按钮的边框
小程序的边框是用 button::after 来设置的
button::after{border: none;}
自定义圆角的时候，就不会有阴影了。
wepy BUG
picker-view
低版本的 wepy 使用 picker-view 组件是，value 默认值无法还原，升级版本就好了。
globalData
文档上说
wxapp:Object: this.wxapp 等同于 getApp()
实际操作有出入，翻 issues 得到以下 方案：
如果当前组件是 page，那么 this.parent 是app
如果当前组件是 component, 那么 this.parent 是父层 component，this.root 是顶层的 page，所以你可以这么写 this.root.parent