duduname01 / weapp-mark

🔥 仿 Mark 影单、豆瓣的小程序，附学习笔记

Mark

仿 Mark 应用页面的微信小程序。

作为学习项目一步一步走来，我会记录下我是如何从零完成此小程序的，以及途中遇到的所有问题，以后不定期更新，尽量做到更好，如果你有什么建议也请告诉我（issues）。项目中自己有封装一些组件，可在项目结构查看。

影视数据全部由豆瓣 API 提供。 目前豆瓣搜索接口已经没有免费的可以使用了，我改用了时光网的接口。小程序个人开发功能限制太多，无法完全上线。如若喜欢可以下载原生应用 Mark 体验全部功能。

Branches

1. cloud - 采用微信小程序云开发，无需后台也能开发一款完整的小程序。
2. master - 后台服务由 LeanCloud 云服务支撑。
3. cdn-ui - 没有后台服务支撑，全部采用 HTTP 请求的个人博客的静态 JSON 文件。

在线思维导图

注意事项：

使用自定义组件 Component，小程序基础版本库要在 1.6.3 以上；

使用 wxParse，小程序基础版本库要在 1.6.6 及以上。

Logs

2018-09-16

• 微信小程序云开发初体验

2018-01-15

• 新增 LeanCloud 云服务
• 修复没有预告时显示空白视图问题

Skills

• 图片显示预览、视频加载播放、背景音乐播放
• 本地数据存储
• CSS3 属性动画
• template、Component 分别实现自定义组件
• ES6、Promise
• LeanCloud

Run

没有使用其它打包工具，无需额外的环境配置，直接 clone 本项目，使用微信 Web 开发工具打开即可看见效果。

注意： 如果你没有 AppID 可能看不到数据，手机无法预览。开发工具需要关闭安全域名的校验，工具栏 --> 详情 --> 项目设置 --> 勾选不校验安全域名...以及 HTTPS 证书。

Docs

云开发关联表（集合）案例

写项目时的想法

边写边记

小程序使用外部字体

小程序自定义评分组件 - tempalte 实现（精度 0.1）

小程序自定义评分组件 - Component 实现（精度0.1）

Contents

├── assets 静态资源
│    ├── libs 三方支持库
│    ├── images 图片资源
│    └── styles 公用样式
├── components  组件化 Component，小程序基础版本库 1.6.3 以上
│    ├── pre-image 图片预加载
│    └── rating 评分
├── cloudfunctions  云函数
├── pages  页面
│    └── common  模板 template
│        ├── rating  评分
│        ├── wxParse  富文本、HTML 和 MD 解析，小程序基础版本库 1.6.6 及以上
│        └── component.js  wux 针对 template 的组件化，写得挺好，借鉴一下
├── style  静态样式资源
│    ├── weui.wxss
│    ├── animate.wxss CSS 动画
│    └── font-awesome.min.wxss Font Awesome 字体图标
├── utils  封装的工具
│    └── apis.js API 配置及网络请求
├── app.js  应用入口
├── app.json  页面路径及窗口配置
└── app.wxss  应用共用样式

TODO

• 自定义轮播
• ScrollView 下拉刷新
• 数据本地存储工具
• 绘制卡片且保存
• 分组列表

Sources

1. 微信官方UI样式 weui-wxss
2. 富文本、HTML 和 Markdown 解析 wxParse
3. 针对 template 的自定义组件 wux
4. LeanCloud 云服务提供后台支撑
5. 云服务开发环境（官方）
6. 小程序解决方案（官方）