weapp mark

Mark

纯属娱乐学习项目，偶尔记录下开发中遇到的问题和想法，不定期更新，如果你有什么建议也请告诉我（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. 小程序解决方案（官方）