Git Product home page Git Product logo

weapp-mark's Introduction

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

weapp-mark's People

Contributors

dependabot[bot] avatar honye avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

weapp-mark's Issues

潜在兼容性bug

在项目中,发现没有使用wx.getSystemInfo这个API去获取使用机型的系统信息。
然后通过windowWidth,windowHeight和safeArea来调整小程序的布局设置。

没有通过wx.getSystemInfo的适配,在部分机型上可能会出现一些样式问题。

您好,方便确认一下该问题吗。

跑不起来额。大家能跑起来嘛

跑不起来额。大家能跑起来嘛?

app.js错误:
Error: module "store/mobx-miniprogram" is not defined
at require (VM803 WAService.js:2)
at VM803 WAService.js:2
at index.js? [sm]:4

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.