一个微信小程序(应用号)开发示例(豆瓣电影)
很多朋友最近都在反馈豆瓣接口 403 的问题,我抽空仔细排查了一遍,豆瓣官方应该是限制了第三方小程序对豆瓣接口的调用,对于这一行为我认为“无可厚非”,因为你没有为豆瓣的免费服务“买单”,请各位不要骂街。
为了帮助更多初学者或是爱好者,我个人准备了一个反向代理服务器(免费开放)。希望各位珍惜资源切勿滥用,谢谢!
接口地址:https://douban.uieee.com (支持 HTTP / HTTPS)
接口限流:10000 次 / 1 小时,由于是豆瓣官方的限流,所以所有使用我搭建的这个反向代理服务的朋友都是共享这 10000 次请求的,我也没办法再去提高这个数字(普通个人用户是 100 次 / 1 小时),所以还是希望大家不要滥用。
当然如果还是不幸超出额度的话,就只能等待下一个整点,不明白为什么的朋友,可以自己 Google 一下接口限流:API Rate Limit。
如果你可以的话,建议你自己参考我的配置文件配置一个自己的反向代理服务(这样就没人跟你抢了😀)
接口配置文件仓库:https://github.com/zce/douban-api-proxy (包括解决方法)
- 将豆瓣的 API 地址更改为以上地址
- 修改微信小程序后台的白名单
很多朋友给我发消息说希望可以真机体验一下,所以前段时间我抽空把这个小程序发布了,大家可以通过微信扫码体验:
源码我放在了:https://github.com/zce/weapp-douban
- zce/weapp-demo - 包含开发工作流版本的豆瓣电影
- zce/weapp-todos - 一个简单的任务清单小程序
- zce/weapp-locally - 本地生活,本地吃喝玩乐
- zce/weapp-beauty - 拍拍测颜值,AI
zce/weapp-boilerplate - 一个小程序的快速开发骨架
Welcome PR / Issue / WeChat!
微信群垃圾广告和无意义的分享链接太多,最近狠下心清理了~ 改用 QQ 群,单独审核,禁止广告,我的目的很简单,就是留出一个感觉的环境,让志同道合的一起玩,谢谢大家
如果你不喜欢热闹,或者加不进去,可以告诉我(注意我不收红包!有问题直接留言就行,只求描述到我能看懂!我尽快回复)
- 开发阶段与生产阶段分离。
- 自动化生成新页面所需文件并添加到配置中。
- 以
Standard Code Style
校验全部的js
和json
文件。 - 开发阶段
json
配置文件可以有注释,方便备注。 - 代码中集成部分文档内容,减少查文档的时间。
- 开发阶段可以使用
less
完成样式编码,原因你懂得~ (如果你了解这些,当然可以支持sass
等其他预处理样式)。 - 借助
babel
自动进行ES2015
特性转换,放心使用新特性。 - 开发阶段用
xml
文件后缀取代wxml
后缀,避免在开发工具中配置代码高亮。 - Source Map
- Travis CI
用到了GIT
环境,没有环境的话请自行解决吧。
# 定位到任意目录
$ cd path/to/root
# 克隆仓库到指定的文件夹
$ git clone https://github.com/zce/weapp-demo.git [project-name] -b master --depth 1
# 进入指定的文件夹
$ cd [project-name]
用到了Node
环境,没有环境的话也请自行解决吧。
$ npm install
执行如下命令
# 启动监视
$ npm run watch
通过微信Web开放者工具
打开项目根目录下dist
文件夹,预览~
- 打开
微信Web开放者工具
,选择添加项目
,填写或选择相应信息- AppID:点击右下角
无AppID
(个人用户可以申请) - 项目名称:随便填写,因为不涉及到部署,所以无所谓
- 项目目录:选择项目根目录下
dist
文件夹 - 点击
添加项目
- AppID:点击右下角
- 可以通过任意开发工具完成
src
下的编码,gulp
会监视项目根目录下src
文件夹,当文件变化自动编译
执行如下命令
# 启动生成器
$ npm run generate
? Input the page name (index) [page-name]
? Do you need a configuration file (y/N) N
? Select a style framework (Use arrow keys)
> less
# 自动生成...
由于微信小程序的每一个页面有特定的结构,新建工作比较繁琐。可以通过此任务减少操作。
执行如下命令
# 启动编译
$ npm run build
生产阶段的代码会经过压缩处理,最终输出到dist
下。
同样可以通过微信Web开放者工具
测试。
- 自动化生成新页面所需文件;
- 自动生成新页面时,自动添加配置到
app.json
; - 加入
ES2015
的Polyfill
,支持类似Promise
的新API
; - 自动刷新
微信Web开放者工具
中的预览; -
HTML
toWXML
转换器,让大家可以直接使用HTML
元素开发;
for 新手同学
这段时间有很多人反映代码看不懂,没法看下去。
可能有很多刚入门的同学,刚开始学习没有接触太多,而我的这个仓库也旨在服务大众。
为此特地创建多个分支,每个分支的特点和复杂程度各不相同(计划,请持续关注):
- 最基本的微信小程序项目结构
- 一个简单页面的工作
- 包含
NavigationBar
和TabBar
的设置 - 多标签页面切换
- 划分程序中的各个页面
- 分别完成各个页面的结构和布局
- 页面与页面之间的跳转
- 使用假数据的方式完成数据绑定
- 改用
wx.request
接口调用豆瓣API
完成数据加载 - 增加加载过程界面体现(loading)
- 封装操作
豆瓣API
的模块 - 二次封装
微信API
为Promise
的实现
- 上拉加载(数据分页)
- 其他
微信API
的使用 - ..
- master
- 主线版本,包含全部功能和特性!