一个微信小程序开发示例

article/2025/9/17 22:14:39

一个微信小程序开发示例（豆瓣电影）

新版本（不包含工作流）请移步至：https://github.com/zce/weapp-douban
当前仓库会暂缓更新，主要留下来给大家答疑
需要基础教程的朋友们稍等一阵吧，目前有计划重新去写一套更系统的。最近有很多要屈服于现实的问题，谢谢理解 ?

Build Status Dependency Status devDependency Status js-standard-style

关于豆瓣API限制第三方小程序调用问题说明

很多朋友最近都在反馈豆瓣接口 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-demo/tree/tutorial

有想法？

Welcome PR / Issue / WeChat！

交流群

微信群垃圾广告和无意义的分享链接太多，最近狠下心清理了~ 改用 QQ 群，单独审核，禁止广告，我的目的很简单，就是留出一个干净的环境，让志同道合的一起玩，谢谢大家

IT BETTER群二维码

我的微信

如果你不喜欢热闹，或者加不进去，可以告诉我（注意我不收红包！有问题直接留言就行，只求描述到我能看懂！我尽快回复）

我的微信

预览

豆瓣电影演示

视频演示

完整特性

开发阶段与生产阶段分离。
自动化生成新页面所需文件并添加到配置中。
以Standard Code Style校验全部的js和json文件。
开发阶段json配置文件可以有注释，方便备注。
代码中集成部分文档内容，减少查文档的时间。
开发阶段可以使用less完成样式编码，原因你懂得~ （如果你了解这些，当然可以支持sass等其他预处理样式）。
借助babel自动进行ES2015特性转换，放心使用新特性。
开发阶段用xml文件后缀取代wxml后缀，避免在开发工具中配置代码高亮。
Source Map
Travis CI

操作步骤

for English

README.en.md

将项目克隆到本地

用到了GIT环境，没有环境的话请自行解决吧。

# 定位到任意目录
$ cd path/to/root# 克隆仓库到指定的文件夹
$ git clone https://github.com/zce/weapp-demo.git [project-name] -b master --depth 1# 进入指定的文件夹
$ cd [project-name]

安装项目`NPM`依赖

用到了Node环境，没有环境的话也请自行解决吧。

$ npm install

使用说明

for English

README.en.md

开发阶段

执行如下命令

# 启动监视
$ npm run watch

通过微信Web开放者工具打开项目根目录下dist文件夹，预览~

打开微信Web开放者工具，选择添加项目，填写或选择相应信息 + AppID：点击右下角无AppID（个人用户可以申请）
- 项目名称：随便填写，因为不涉及到部署，所以无所谓
- 项目目录：选择项目根目录下dist文件夹
- 点击添加项目
可以通过任意开发工具完成src下的编码，gulp会监视项目根目录下src文件夹，当文件变化自动编译
注意在微信公众平台后台添加域名白名单设置或者关闭开发阶段对请求域名安全的校验
- https://api.map.baidu.com
- https://douban.uieee.com

创建新页面

执行如下命令

# 启动生成器
$ 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
# 自动生成...

由于微信小程序的每一个页面有特定的结构，新建工作比较繁琐。可以通过此任务减少操作。