Skip to content

Honye/weapp-mark

Repository files navigation

Mark

Honye license

纯属娱乐学习项目,偶尔记录下开发中遇到的问题和想法,不定期更新,如果你有什么建议也请告诉我(issues)。项目中自己有封装一些组件,可在项目结构查看。

影视数据全部由豆瓣 API 提供。 目前豆瓣搜索接口已经没有免费的可以使用了,本人提供的接口部署在 Vercel,未备案不可添加到微信后台,项目同时提供了 mock 数据可使用。小程序个人开发功能限制太多,无法完全上线。如若喜欢可以克隆项目自己运行看看。

💥 扫码体验

小程序码

🔱 分支 Branches

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

在线思维导图

注意事项:

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

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

小程序简易双向绑定,小程序基础版本库 2.9.3 及以上

🎨 功能 Features

  • 云函数实现微信登录
  • 云函数定时任务实现每日卡片
  • 云函数聚合查询实现卡片收藏
  • Grid 多列表格布局
  • Grid 布局实现瀑布流
  • 云函数爬取 GitHub Trending
  • 关于页背景音频播放
  • 分别使用 template 和 Component 实现公用组件
  • CSS3 属性动画

🐢 规范 Code of conduct

时间久了自己都忘记了以前给自己定的规范是啥,导致代码很不统一,给自己备份个项目规范🥱

CODE_OF_CONDUCT.md

🛠 运行 Run

克隆本项目,使用微信 Web 开发工具打开项目根目录

安装依赖

yarn # or npm install

菜单栏 工具 --> 构建 npm

云开发环境

开通云开发环境后将项目 /cloudfunctions/ 同步至云(参考 云开发环境初始化),修改 app.js

wx.cloud.init({
  traceUser: true,
  env: 'dev-oucwt' // 此处替换为你自己的云环境 ID
});

注意:真机预览开发环境时需打开调试

Mock API

参考官方文档 API Mock/规则导入导出,导入 mock/mock.config.json开发工具提供的 Mock 能力暂不支持手机预览

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

🪶 笔记 Notes

Vercel 托管 Next 实现 GitHub Trending API

小程序使用 IconFont

云开发关联表(集合)案例

写项目时的想法

边写边记

小程序使用外部字体

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

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

📐 结构 Structure

├── apis
├── assets
├── components  组件化 Component
│    ├── cover-page 可下拉关闭的半屏组件
│    ├── pre-image 图片预加载
│    ├── rating 评分
│    └── tabs
├── cloudfunctions
├── pages
│    └── common  模板 template
│        ├── actionsheet 操作菜单
│        ├── cell 列表单元
│        ├── dropmenu 下拉菜单
│        ├── loading 加载/加载更多
│        ├── rating  评分
│        ├── share 底部分享菜单
│        ├── wxParse  富文本、HTML 和 MD 解析,小程序基础版本库 1.6.6 及以上
│        └── component.js  wux 针对 template 的组件化,写得挺好,借鉴一下
├── style
│    ├── weui.wxss
│    ├── animate.wxss CSS 动画
│    └── font-awesome.min.wxss Font Awesome 字体图标
├── utils
│    └── wxCloud.js 云函数二次封装
├── app.js
├── app.json
└── app.wxss

痛点

  • 小程序不支持全局组件,需每个页面都引入组件。如自定义全局提示框

🔗 参考 Reference

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