🔥 仿 Mark 影单、豆瓣的小程序,附学习笔记
Switch branches/tags
Nothing to show
Clone or download
Latest commit 920a409 Sep 29, 2018
Permalink
Failed to load latest commit information.
assets/images U: 移动文档. Sep 29, 2018
cloudfunctions U: 移动文档. Sep 29, 2018
components U: 移动文档. Sep 29, 2018
pages U: 移动文档. Sep 29, 2018
style U: 移动文档. Sep 29, 2018
utils U: 移动文档. Sep 29, 2018
.gitignore 修复因忽略文件导致错误的问题 Nov 18, 2017
LICENSE Initial commit Oct 25, 2017
README.md U: 移动文档. Sep 29, 2018
app.js U: 移动文档. Sep 29, 2018
app.json U: 移动文档. Sep 29, 2018
app.wxss U: 移动文档. Sep 29, 2018

README.md

Mark

Honye license

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

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

影视数据全部由豆瓣 API 提供。小程序个人开发功能限制太多,无法完全上线。如若喜欢可以下载原生应用 Mark 体验全部功能。

Branches

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

在线思维导图

注意事项:

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

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

Logs

2018-09-16

2018-01-15

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. 小程序解决方案(官方)