使用 wepy 开发的小程序 Demo
npm install wepy-cli -g
npm install
npm run dev
npm run build
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 为 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 绘图