用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

1

主题

1

帖子

36

积分

攻城狮

Rank: 2

积分
36
2017-12-17 13:03:20 Honye 攻城狮 楼主 13678
本帖最后由 Honye 于 2018-1-17 16:56 编辑

weapp-mark


仿 Mark 应用页面的微信小程序(小程序名:HONYE)


小程序个人开发功能限制太多,无法完全上线。将项目克隆下来运行程序体验全部功能。



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




在线思维导图

为了节省篇幅,效果图就不一一展示了,扫小程序码基本能体验全部了

效果图1  效果图2  效果图3

注意事项:


此小程序是采用的 LeanCloud 云服务支撑,除了豆瓣影视数据外其余数据不会实时更新,偶尔我勤快也会更新一点数据的。



运行


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


项目结构


├── assets 静态资源

│    ├── libs 三方支持库

│    ├── images 图片资源

│    └── styles 公用样式

├── components  组件化 Component

│    ├── pre-image 图片预加载

│    └── rating 评分

├── pages  页面

│    └── common  模板 template

│        ├── rating  评分

│        ├── wxParse  富文本、HTML 和 MD 解析

│        └── 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  应用共用样式


技术


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

技术

  • 写项目时的想法
  • 边写边记
  • 小程序使用外部字体
  • 小程序自定义评分组件template(精度0.1)
  • 小程序自定义评分组件Component(精度0.1)


资源


  • 微信官方UI样式 weui-wxss
  • 富文本、HTML 和 Markdown 解析 wxParse
  • 小程序使用外部字体,本人使用的是 Font Awesome
  • 针对 template 的自定义组件 wux


GitHub:https://github.com/Hongye567/weapp-mark

非常棒!
发新帖
您需要登录后才可以回帖 登录 | 立即注册