微信小程序不支持打开非业务域名_三十分钟教你免费搭建一个小程序

简介

yesapicn/yesapi-miniprogram-1​github.com
04f264d8457763fbed5bae03bfb0d9bd.png

小白接口+微信小程序示例一

众所周知,小程序搭配小白接口简直就是BUG一样的存在。不花一分钱就能发布自己的专属小程序。免费套餐强大到足以支撑一个私人小应用啦。 可免费调用15万次/月真的是很良心了。

环境准备

前端靠微信,后端靠小白!

  1. 后台:使用小白接口,主要调用的接口有:
  2. App.Table.FreeQuery
  3. App.Table.Create
  4. App.Table.CheckCreate
  5. App.CDN.UploadImg
  6. 开发工具:微信开发者工具(v1.02.1903292)

快速部署

查询个人域名

  • 登录小白开放平台,进入:系统设置 - 我的套餐,查看接口域名。如:

145eb95be2fe6909a409a9ec80ee8bf9.png

开发者平台配置域名

下载好源码之后需配置服务器域名(已配置过的可以跳过这一步)

  • 登录微信公众号平台
  • 设置 - 开发设置 - 服务器域名,修改request合法域名,uploadFile合法域名,修改为你当前所在的小白接口域名(小白接口已支持HTTPS访问)。如下:

a09009d69cecda8bc2b9977ba4e10282.png
特别注意!在微信服务器域名配置request合法域名时,一定要注意,域名前后不能有空格,最后不能有斜杠!! 否则会出现类似以下的错误提示:

aae9df423a9f81abcadab8ba3a71829f.png

代码配置

  • 用微信小程序开发者工具打开源码

1f949f07d178ebe5876398c05b9f32da.png
  • 点击授权登录,会看到以下页面

0a72f65d93a880641e8fcd5aa9ba6eb3.png
  • 接下来做一步十分重要的操作,打开根目录下的app.js拉到下面,把okayapiHost,okayApiAppKey,okayApiAppSecrect填写成自己的信息,具体可以在小白开放平台系统设置 - 我的套餐查看,记得是https不是http

cb0a4a916a0e046eb42c681662d2f097.png
  • 现在离完成整个部署只差填充后端数据了!
  • 打开源代码目录下CSV文件夹里modelBulid.csv。可以查看本示例所需要的六个模型,在小白开放平台建立对应的模型,添加相应字段。
  • 或者将里面的json文件通过导入模型一键导入到自己的小白账号哦。

b24c0c40ae9b13b371fbbed4479a7a08.png

09c6932e7b148f7433dafde9e23dbcac.png

建立模型

以首页轮播图为例,现在带大家建第一个模型tea_swiper + 新建模型

d9f3f292cff0d71e956c54c9a7561464.png

+ 之后在我的模型数据内找到模型点击管管模型并加入modelBuild.csv文件内的字段名称/类型/备注

33b6bfa2e2aea975bfe35d86c3d123fb.png

9756191c7be1837070fc66dd9c647bca.png

+ 添加数据,如无想放在轮播图的照片可以按照tea_swiper.csv内的地址添加。添加后效果如图。

376375c58745e69c81e15e1fb7087149.png

+ 接下来点击开发者工具-编译,即可看到轮播图已经成功调用啦!!!(您的小程序已经成功调用出放在小白数据库的数据了)

55fb97e46e7a242b7b242db05cf5dbda.png
如果用户模型也建好,细心的同学会发现tea_user里面也已经拿到了登录的人的微信昵称以及openID,新用户登录这个小程序并且授权,就会新增一条数据。(微信的openID是微信用户唯一标识符,如有需求也可以增加省份,语言,用户头像等字段记录用户信息,调整模型跟pages/login.js代码即可)
注意要改动login.js里面的appid&secret,换成自己的小程序appid&secret

3b1a3dca955db41b17b40e8f090da65b.png

b2c1f99a2f024fcafe38ab599fc8abed.png

+ 接下来根据CSV文件夹里的tea.csv按操作添加相应的数据即可拥有自己的小程序啦(小白会员可直接用该csv文件导入到数据库哦(疯狂暗示)),tea_user,tea_order,tea_shopcar以及tea_moment都不用添加数据,下订单,发朋友圈等操作会自动添加。

演示效果

e3459e4916f654718a87a75d9fd62e0e.png

dec916fbdd6fa3cb6c71b46032371eaf.png

9ae42210c4f12b96f50e5cb056a2e8bc.png

7e595d92ee6cbcba16e79a0ecc4ce3aa.png

d336e2e86fdc77404d0392c2be30da3b.png

20e234eeff06b9128fe14e001adcf3ba.png

联系我们

如有问题,欢迎提交Issue到这里,我们会尽快回复您的,或者联系我们@sHuXnHs @WillFang1997

如果喜欢,那就点个小心心呗,biu~~~

开源不易,需要鼓励。您的支持就是我们最大的前进动力!

PowerBy——YesAPI

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值