Skip to content

caoxile/zhms-miniprogram

Repository files navigation

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

About

No description, website, or topics provided.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published