{"id":20010083,"url":"https://github.com/bxm0927/my-douban","last_synced_at":"2025-05-04T19:35:59.788Z","repository":{"id":85449294,"uuid":"101401093","full_name":"bxm0927/my-douban","owner":"bxm0927","description":":four_leaf_clover::pencil::package:这是一个微信小程序，用户可实现查阅电影、阅读和听歌等功能。媲美 native 体验、项目完整、UI 美观、交互一流。","archived":false,"fork":false,"pushed_at":"2020-05-27T07:30:56.000Z","size":204,"stargazers_count":27,"open_issues_count":1,"forks_count":15,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-08T11:38:09.664Z","etag":null,"topics":["css","es6","html","js","mina"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/bxm0927.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-25T12:21:15.000Z","updated_at":"2024-06-13T09:30:54.000Z","dependencies_parsed_at":null,"dependency_job_id":"9f6643fa-80ac-45e4-ad3a-182b6e8fa050","html_url":"https://github.com/bxm0927/my-douban","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bxm0927%2Fmy-douban","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bxm0927%2Fmy-douban/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bxm0927%2Fmy-douban/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/bxm0927%2Fmy-douban/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/bxm0927","download_url":"https://codeload.github.com/bxm0927/my-douban/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252390786,"owners_count":21740385,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","es6","html","js","mina"],"created_at":"2024-11-13T07:18:19.761Z","updated_at":"2025-05-04T19:35:59.779Z","avatar_url":"https://github.com/bxm0927.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\r\n# :mortar_board: 我的豆瓣\r\n\r\n![](https://user-gold-cdn.xitu.io/2020/5/27/17254f6d98265f04?w=414\u0026h=894\u0026f=png\u0026s=329804)\r\n\r\n## :book: 技术栈\r\n\r\n- `微信小程序`：一种无需下载即可使用的内嵌在微信中的 APP，用户扫一扫或者搜一下即可打开应用。\r\n- `Flex 布局`：大量使用 `flex` 布局，结合 `rpx` 响应式单位，适配移动端全屏幕尺寸\r\n- `Sass(Scss)`：`css` 预编译处理器 `sass --watch a.scss:a.wxss`\r\n- `ES6`：`ECMAScript` 新一代语法，模块化、解构赋值、`Promise`、`Class` 等方法非常好用\r\n- `Moment.js`：时间日期格式化插件\r\n\r\n## :closed_book: 收获\r\n\r\n1. 熟悉了微信小程序 `MINA` 框架，这个框架为小程序的运行提供了丰富的组件和API、响应的数据绑定、模板机制、数据缓存等\r\n2. 复用 `template`，更好的封装 UI 和业务逻辑\r\n3. 体会到了微信小程序与目前火热的 MVVM 框架的共同特性：组件、数据绑定、淡化 DOM ...\r\n\r\n\r\n## :pushpin: TODO\r\n\r\n1. 微信官方 API 非常不稳定，经常废弃一些 API，所以要经常维护代码\r\n2. 利用豆瓣提供的接口可以实现很多电影相关功能，本案例只使用了其中几个\r\n3. 由于没有配置 https 等原因，本案例并未上线\r\n4. 以后有空根据这个小程序做出对应微信公众号\r\n\r\n\r\n## :pencil: 实现细节\r\n\r\n主要页面：启动页、新闻列表页、新闻详情页、电影详情页、电影搜索页\r\n\r\n**启动页**\r\n\r\n主要是熟悉微信小程序的目录结构、文件类型\r\n\r\n使用微信提供的响应式单位 `rpx`\r\n\r\n使用 `flex` 弹性盒子布局\r\n\r\n微信小程序 `\u003cView\u003e` `\u003cImage\u003e` 组件的应用，类似 HTML 的 `\u003cdiv\u003e` 和 `\u003cimg\u003e`\r\n\r\n**电影页**\r\n\r\n抽象出嵌套的 `\u003ctemplate\u003e`，模板化实现界面\r\n\r\n调用[豆瓣API](https://developers.douban.com/wiki/?title=movie_v2)请求网络数据\r\n\r\n```\r\nwx.request()\r\n```\r\n\r\n电影搜索页是调用豆瓣接口来完成搜索的\r\n\r\n**新闻列表页**\r\n\r\n使用了微信小程序提供的 `\u003cswiper\u003e` 轮播图组件\r\n\r\n熟悉 `MINA` 框架在其各个生命周期时的任务\r\n\r\n使用 `\u003ctemplate\u003e` 模板化编程(*注意：不是模块化，因为不能注入js逻辑*)，类似 MVVM 框架中的组件\r\n\r\n**新闻详情页**\r\n\r\n使用自定义属性 `data-` 实现点击不同文章跳转到不同详情页的功能\r\n\r\n```\r\nlet id = event.currentTarget.dataset.id\r\n\r\nwx.navigateTo({\r\n  url: `../news-detail/news-detail?id=${id}`\r\n})\r\n\r\n// 接受\r\nconsole.log(params.id)\r\n```\r\n\r\n使用微信小程序提供的 `Storage` 缓存机制，对收藏功能进行缓存\r\n\r\n```\r\nwx.setStorageSync(key, data)\r\nwx.getStorageSync(key)\r\nwx.removeStorageSync(key)\r\nwx.clearStorageSync()\r\n```\r\n\r\n使用界面交互反馈 API `showToast` `showActionSheet` 完成收藏、分享交互效果\r\n\r\n使用音乐播放控制 API 实现音乐播放，播放等状态在 `app.js` 的 `globalData`内集中管理，类似 Vue 中的 Vuex\r\n\r\n理解了微信小程序中的页面私有data、全局globalData、缓存机制Storage 在存储状态及数值时的优势与劣势\r\n\r\n\r\n## :four_leaf_clover: License\r\n\r\nThe code is available under the [MIT license](https://opensource.org/licenses/MIT).\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbxm0927%2Fmy-douban","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbxm0927%2Fmy-douban","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbxm0927%2Fmy-douban/lists"}