微信小程序> 开发微信小程序案例-一个微信小程序开发示例-微信小程序实例

开发微信小程序案例-一个微信小程序开发示例-微信小程序实例

浏览量:1695 时间: 来源:凡尘雪

1.一个微信小程序开发示例(豆瓣电影)

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

2.

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

3.很多朋友最近都在反馈豆瓣接口403的问题,我抽空仔细排查了一遍,豆瓣官方应该是限制了第三方小程序对豆瓣接口的调用,对于这一行为我认为“无可厚非”,因为你没有为豆瓣的免费服务“买单”,请各位不要骂街。

4.为了帮助更多初学者或是爱好者,我个人准备了一个反向代理服务器(免费开放)。希望各位珍惜资源切勿滥用,谢谢!

5.接口地址:https://douban.uieee.com(支持HTTP/HTTPS)

6.接口限流:10000次/1小时,由于是豆瓣官方的限流,所以所有使用我搭建的这个反向代理服务的朋友都是共享这10000次请求的,我也没办法再去提高这个数字(普通个人用户是100次/1小时),所以还是希望大家不要滥用。

7.当然如果还是不幸超出额度的话,就只能等待下一个整点,不明白为什么的朋友,可以自己Google一下接口限流:APIRateLimit。

8.如果你可以的话,建议你自己参考我的配置文件配置一个自己的反向代理服务(这样就没人跟你抢了?)

9.接口配置文件仓库:https://github.com/zce/douban-api-proxy(包括解决方法)

具体使用将豆瓣的API地址更改为以上地址修改微信小程序后台的白名单文字教程https://github.com/zce/weapp-demo/tree/tutorial相关演示视频演示如何运行当前项目豆瓣电影小程序真机测试

10.很多朋友给我发消息说希望可以真机体验一下,所以前段时间我抽空把这个小程序发布了,大家可以通过微信扫码体验:

11.

12.源码我放在了:https://github.com/zce/weapp-douban

相关项目zce/weapp-douban-不包含开发工作流版本的豆瓣电影zce/weapp-todos-一个简单的任务清单小程序zce/weapp-locally-本地生活,本地吃喝玩乐zce/weapp-beauty-拍拍测颜值,AIzce/weapp-boilerplate-一个小程序的快速开发骨架有想法?

13.WelcomePR/Issue/WeChat!

交流群

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

15.

我的微信

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

17.

目录预览完整特性操作步骤使用说明开发阶段生产阶段开发计划分支说明相关项目联系方式许可预览

18.

19.视频演示

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

20.README.en.md

将项目克隆到本地

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

#定位到任意目录$cdpath/to/root#克隆仓库到指定的文件夹$gitclonehttps://github.com/zce/weapp-demo.git[project-name]-bmaster--depth1#进入指定的文件夹$cd[project-name]安装项目NPM依赖

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

$npminstall使用说明forEnglish

23.README.en.md

开发阶段

24.执行如下命令

#启动监视$npmrunwatch

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

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

26.创建新页面

27.执行如下命令

#启动生成器$npmrungenerate?Inputthepagename(index)[page-name]?Doyouneedaconfigurationfile(y/N)N?Selectastyleframework(Usearrowkeys)less#自动生成...

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

生产阶段

29.执行如下命令

#启动编译$npmrunbuild

30.生产阶段的代码会经过压缩处理,最终输出到dist下。

31.同样可以通过微信Web开放者工具测试。

开发计划自动化生成新页面所需文件;自动生成新页面时,自动添加配置到app.json;加入ES2015的Polyfill,支持类似Promise的新API;自动刷新微信Web开放者工具中的预览;HTMLtoWXML转换器,让大家可以直接使用HTML元素开发;分支说明(WIP)

32.for新手同学

33.这段时间有很多人反映代码看不懂,没法看下去。

34.可能有很多刚入门的同学,刚开始学习没有接触太多,而我的这个仓库也旨在服务大众。

35.为此特地创建多个分支,每个分支的特点和复杂程度各不相同(计划,请持续关注):

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的问题!!

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎