Eyepetizer

使用 wepy 开发的小程序 Demo

安装 wepy 命令行工具。

npm install wepy-cli -g

安装依赖包

npm install

实时编译

npm run dev

生产压缩

npm run build

wepy 开发文档地址

https://tencent.github.io/wepy/

小程序文档地址

http://mp.weixin.qq.com/debug/wxadoc/dev/

开发使用说明(重要)

1、使用微信开发者工具-->添加项目，项目目录请选择 dist 目录。
2、微信开发者工具-->项目-->关闭 ES6 转 ES5。重要：漏掉此项会运行报错。
3、微信开发者工具-->项目-->关闭上传代码时样式自动补全。重要：某些情况下漏掉此项也会运行报错。
4、微信开发者工具-->项目-->关闭代码压缩上传。重要：开启后，会导致真机 computed, props.sync 等等属性失效。<br>

目录结构

├── api
│   └── api.js             //接口
├── app.wpy                 //入口文件
├── components          //组件
│   ├── tab.wpy            //滑动导航栏组件
│   ├── tabContent.wpy     //滑动导航栏对应内容组件
│   ├── 。。。.wpy         // wepy-cli 集成练习基础组件
├── assets                 //图片文件夹
├── pages               //页面
│   ├── home.wpy          //首页
│   ├── index.wpy         //wepy-cli集成首页
│   ├── follow.wpy        //关注
│   ├── my.wpy            //个人中心
│   ├── detail.wpy        //详情页面
│   ├── classify.wpy      //单个分类首页
├── store                  //redux 数据流
│   ├── actions
│   ├── reducers
│   ├── types
│   └── index.js
└── utils                //工具类
     ├── md5.js             //md5
     ├── tip.js             //提示弹框组件
     ├── util.js            //工具
     └── wxRequest.js       //ajax请求

Demo 截图

开发手记

首先，此 demo 为 wepy 框架练习手册，抱歉没有深入下去，项目间隙，花了点时间效仿了一下，
在这里要感谢 Eyepetizer 提供的外放 API,让我可以抓到真实数据

1.同时打开两个文档 wepy,小程序，摸索式进行，滑动 tab 组件查看 zanUI 源码实现

2.在调用接口时，看到了请求成功，但是 console 出来的数据一直是为 undefined，调试了好久，最后在 wepy 中的常见问题发现需要安装和引用 promise-polyfill

3.组件化，抽出了 tabContent,达到了复用效果，参考了开眼视频的小程序，全部分类下，单个分类跳转的和 tab 切换跳转的页面，只是在 header 处有点不一样，于是 tabContent 诞生了，但 tabContent 不是一个纯组件，它是有状态的，在组件调用后进行请求获取内容，不是父组件传值而进行渲染

4.像这样的抽离，就会衍生一系列的问题，组件中如何调用其他组件内的方法--$invoke，当然还有不同场景的不同方法；组件之间的通信，无论是方法间参数通信，还是 url 路径上参数通信

5.增加了在 video 标签上显示指定图片的功能

6.增加了在项目中使用 canvas 绘图

miroku-y/Eyepetizer