一个微信小程序开发示例
一个微信小程序开发示例(豆瓣电影)
- 新版本(不包含工作流)请移步至:https://github.com/zce/weapp-douban
- 当前仓库会暂缓更新,主要留下来给大家答疑
- 需要基础教程的朋友们稍等一阵吧,目前有计划重新去写一套更系统的。最近有很多要屈服于现实的问题,谢谢理解 ?
关于豆瓣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
相关演示
- 视频演示如何运行当前项目
- 豆瓣电影小程序真机测试
很多朋友给我发消息说希望可以真机体验一下,所以前段时间我抽空把这个小程序发布了,大家可以通过微信扫码体验:
源码我放在了:https://github.com/zce/weapp-douban
相关项目
- zce/weapp-douban - 不包含开发工作流版本的豆瓣电影
- 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
操作步骤
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
# 自动生成...
由于微信小程序的每一个页面有特定的结构,新建工作比较繁琐。可以通过此任务减少操作。
生产阶段
执行如下命令
# 启动编译
$ npm run build
生产阶段的代码会经过压缩处理,最终输出到dist
下。
同样可以通过微信Web开放者工具
测试。
开发计划
- 自动化生成新页面所需文件;
- 自动生成新页面时,自动添加配置到
app.json
; - 加入
ES2015
的Polyfill
,支持类似Promise
的新API
; - 自动刷新
微信Web开放者工具
中的预览; HTML
toWXML
转换器,让大家可以直接使用HTML
元素开发;
分支说明(WIP)
for 新手同学
这段时间有很多人反映代码看不懂,没法看下去。
可能有很多刚入门的同学,刚开始学习没有接触太多,而我的这个仓库也旨在服务大众。
为此特地创建多个分支,每个分支的特点和复杂程度各不相同(计划,请持续关注):
- level-00
- 最基本的微信小程序项目结构
- 一个简单页面的工作
- level-01
- 包含
NavigationBar
和TabBar
的设置 - 多标签页面切换
- level-02
- 划分程序中的各个页面
- 分别完成各个页面的结构和布局
- level-03
- 页面与页面之间的跳转
- level-04
- 使用假数据的方式完成数据绑定
- level-05
- 改用
wx.request
接口调用豆瓣API
完成数据加载 - 增加加载过程界面体现(loading)
- level-06
- 封装操作
豆瓣API
的模块 - 二次封装
微信API
为Promise
的实现
- level-07
- 上拉加载(数据分页)
- level-08
- 其他
微信API
的使用 - ..
- master
- 主线版本,包含全部功能和特性!
- 转载页面 : https://github.com/zce/weapp-demo/blob/master/README.md
- 在这里多谢大神的资源 已经解决403的问题!!
一个微信小程序开发示例相关推荐
- 应用实战|微信小程序开发示例之在线商城
"超能力"数据库-拿来即用,应用开发人员再也不用为撰写API而发愁.MemFire Cloud 为开发者提供了简单易用的云数据库(表编辑器.自动生成API.SQL编辑器.备份恢复. ...
- 应用实战|微信小程序开发示例之Super课表
此示例提供了使用 MemFire Cloud 构建一个课表的小程序的步骤.小程序用到的MemFire Cloud的功能包括: 云数据库:存储小程序数据表的信息. 用户验证:小程序使用MemFire C ...
- 如何开发一个个人微信小程序,微信小程序开发入门教程
做任何程序开发要首先找到其官方文档,我们先来看看其有哪些官方文档. 微信小程序开发文档链接为:https://mp.weixin.qq.com/debug/wxadoc/dev/index.html, ...
- python开发微信小程序-Python 开发者的微信小程序开发实践
导读 在知乎上,有人提问"如何使用 Python 开发微信小程序". 其实微信小程序作为一个前端的机制,Python 并不能插上边.只不过可以作为后端接口为微信小程序提供数据服务而 ...
- 微信小程序开发(3) - 微信小程序调用摄像头静默隐藏拍照功能实现方式
微信小程序最近非常火热,小编最近做了一个微信小程序开发新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大 ...
- vue微信小程序开发步骤(一)
下载微信开发者工具:地址 安装完成后并登录 新建项目 1)当符合以下条件时,可以在本地创建一个小程序项目 2)需要一个小程序的 AppID:如没有 AppID,可以选择申请使用测试号(登录页面:htt ...
- [干货教程]仿网易云课堂微信小程序开发实战经验
本篇文章想跟大家分享下:我们公司"湖北诚万兴科技"最近刚帮客户定制开发.目前已上线的"哎咆课堂"微信小程序的开发经验分享.首先大概介绍下这个小程序所涉及到的主要 ...
- 微信小程序开发环境搭建
转载自:http://blog.csdn.net/xiehuimx/article/details/52629657 现真是轰炸了整个开发人员,当然很多App开发人员有了一个担心,微信小程序的到来会不 ...
- 可视化微信小程序开发小助手-Troll (VS Code插件)
目录 1.开场白 2.安装 3.主要用法 3.1启动/切换Troll编辑器 3.2编辑视图切换 切换到Troll编辑 切换到文本编辑 3.3图形操作 3.3.1基本图元 3.3.2基础操作 3.4 添 ...
最新文章
- 剑指offer 算法(栈和队列 查找和排序)
- Install Mysql with SELinux on
- Spring----自定义异常类
- 【中级软考】测试用例 Test Case
- GNU C 中的零长数组
- springBoot 登录拦截器
- ruby hash方法_Ruby中带有示例的Hash.length方法
- promise.all_所有您需要了解的Promise.all
- 使用openvswitch网桥连接不同的network namespace
- STM32学习——EXTI外部中断
- 刷卡读取信息自动录入表格_人事自动化管理系统.xls
- 为什么redhat6/centos6里看到的网卡是em*?
- 进程间通信 --- 命名管道 有名管道存在与内存中,无名管道存在与文件系统中 换种角度看问题
- android 退出应用没有走ondestory方法,[Android基础论]为何Activity退出之后,系统没有调用onDestroy方法?...
- File.WriteAllText 写入TXT文件时不能正确换行只显示方块
- 前端笔试中两道与节点有关的算法题
- Modelsim缺失库快速添加
- VS2013注册串口active控件mscomm32.ocx
- 植物大战僵尸pak修改
- flash网页播放器