weapp mark

Mark

This is purely an entertainment and learning project. I occasionally record the problems and ideas encountered during development and update it from time to time. If you have any suggestions, please tell me (issues). The project has its own encapsulated components, which can be viewed in the project structure.

All film and television data are provided by Douban API. At present, there is no free Douban search interface available. The interface I provided is deployed in Vercel. It cannot be added to the WeChat backend without registration. The project also provides mock data for use. The personal development functions of the mini program are too limited and cannot be fully launched. If you like, you can clone the project and run it yourself.

? Scanning experience

? Branches

1. main - Using WeChat mini program cloud development, a complete mini program can be developed without a background.
2. master - background service is supported by LeanCloud cloud service.
3. cdn-ui - There is no background service support, and all static JSON files of personal blogs are made using HTTP requests.

Online mind map

Things to note:

To use a custom component Component, the basic version library of the mini program must be above 1.6.3;

To use wxParse, the basic version library of the mini program must be 1.6.6 or above.

Simple two-way binding of mini programs, mini program basic version library 2.9.3 and above

? Features

• Cloud function implements WeChat login
• Cloud function scheduled tasks realize daily cards
• Cloud function aggregation query realizes card collection
• Grid multi-column table layout
• Grid layout implements waterfall flow
• Cloud function crawls GitHub Trending
• About page background audio playback
• Use template and Component respectively to implement public components
• CSS3 property animation

? Code of conduct

After a long time, I have forgotten what the specifications I set for myself before have caused the code to be very inconsistent. Can I back up the project specifications for myself?

CODE_OF_CONDUCT.md

? Run

Clone this project and use WeChat Web Development Tool to open the project root directory

Install dependencies

yarn # or npm install

Menu bar tools --> Build npm

Cloud development environment

After opening the cloud development environment, synchronize the project /cloudfunctions/ to the cloud (refer to Cloud Development Environment Initialization) and modify app.js

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

Note: debugging needs to be turned on when previewing the development environment on a real machine

Mock API

Refer to the official documentation API Mock/Rules for import and export, and import mock/mock.config.json. The Mock capability provided by development tools does not currently support mobile preview.

Note: If you do not have an AppID, you may not be able to see the data and cannot preview it on your phone. Development tools need to turn off verification of secure domain names. Toolbar --> Details --> Project Settings --> Check Do not verify secure domain names... and HTTPS certificates .

?NotesNotes

Vercel hosts Next to implement GitHub Trending API

Mini program uses IconFont

Cloud development association table (collection) case

Thoughts when writing a project

Note while writing

Mini program uses external fonts

Mini program custom scoring component-tempalte implementation (accuracy 0.1)

Mini program custom scoring component - Component implementation (accuracy 0.1)

? StructureStructure

 ├── 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

Pain points

• Mini programs do not support global components and require components to be introduced on every page. Such as customizing the global prompt box

? Reference

1. WeChat official UI style weui-wxss
2. Rich text, HTML and Markdown parsing wxParse
3. Custom component wux for template
4. LeanCloud cloud service provides background support
5. Cloud service development environment (official)
6. Mini program solution (official)