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 前后的代码对比与组件化示例。

GitHub仓库

echarts-for-weixin

ECharts 的微信小程序版本。

使用方式参照 demo.wpy，更多案例看仓库代码。

GitHub仓库

候选工具

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

转载请注明：OnlyLing - Web 前端开发者 » WePY 开发小程序一些小笔记