PHP工程改成微擎的步骤_15 分钟,用微擎快速开发一个毒鸡汤小程序

1. 创建微擎模块

前往微擎(w7.cc)开发者控制台,点击 应用管理->应用列表->创建应用,填写信息后得到一个应用模块 ID(标识)

5dc47fddd550b52a2ba9e1a4683137d6.png

创建完毕后返回进入,点击 新建版本->设计新版本->完成

4fdf56e04c65e71668d073904ff6a984.png

471b8424eca22c7c8e42d6b31d482355.png

创建版本成功后,点击编辑,然后下拉到底部,首先我们下载 modulezip 文件(后端程序)

8584d59befa37e53249e36d236b0d00b.png

下载后,上传到你的微擎网站目录的 addons 目录,解压成如下格式,如图所示:

cc8d6780e1348062fbb872b0a4f2dad3.png

至此,我们的微擎后台模块已经创建完成!

2. 安装模块

我们到微擎后台,点击 应用管理->未安装列表,然后安装上

5cd8fa9e98e1eb74b96fcad1a0419136.png

接着,点击 平台管理->添加平台->新建微信小程序

0aaaf118046170857b94a66d21ea6cd0.png

最后一步 添加应用,选择刚刚我们创建好的【毒鸡汤小程序】模块

a83b5087210ee83dd5e281049ef37685.png

d8b0805876da8db86a63786520efdfce.png

至此,微擎模块已经安装完毕啦!

3. 创建小程序

返回微擎开发者后台,回到刚刚我们下载微擎模块 modulezip 的地方,看到还有一个 wxapp 的文件代码,我们点击下载回来,这个是微信小程序的示例模板代码

061693994f37d9266ba4690138c57c65.png

下载后解压,用微信小程序开发者工具打开。

打开后,我们编辑 siteInfo.js 文件,修改 siteroot 成我们的微擎后台地址:

5dd561f7598853cf4954fceb60f53a9b.png

然后我们还需要修改 acid 和 uniacid,这个值,我们可以在我们的微擎后台->平台管理->小程序的基础信息,然后就可以在 上方的 URL 地址中看到 uniacid 值啦!

(这个值在微擎模块发布生成小程序的时候会自动替换,我们不用担心。现在是测试阶段,所以需要我们手动获取)

2f35878c443923201e40b280b5af7cc0.png

如图,我这里是 11,所以我改成 11:

cacb892ba2ee982dcf1febc94350e79e.png

至此,小程序就算创建初始化好啦!

刷新一下小程序,我们打开调试器,输入如下代码,测试一下配置是否生效:

6c59357ab87c46e6f783e4b9c6e6798e.png

看到如上返回数据,就说明前后端都配置好了!

4. 创建小程序页面

接下来,我们开始创建小程序了,功能很简单:用户进入后,获取一条随机的毒鸡汤数据,然后用 text 组件展示即可。

d6c446416c72f01f4f4af364c0c4e0f0.png

然后编辑 app.json, 设置为首页:

807efe89c7a90a9451a1da225dceeb25.png

OK!小程序页面已做好!

(为了省时间,各种样式配置就不多写了,重点在下边的后端编写)

5. 编写后端接口

回到我们的微擎后端,编辑 addons/weapp_dujitang 目录下的 wxapp.php 文件,我们创建一个获取毒鸡汤数据的函数:

2fd8225eb4d24312ddfdd94664df34e2.png

(提示:函数名为 doPageXXX,然后我们后边就可以用 xxx 这个链接访问到这个 API 了)

这里有个 soul.json 数据文件,点击原文链接前往开源地址即可下载获取。

我们在插件目录下创建 data 目录,然后再把这个 soul.json 文件放入其中即可!

OK,后端,已经写好了!

很简单的,就是一个函数的事,我们只需要了解这个函数在哪个文件创建,函数名命名规则,还有如何返回数据即可!

6. 前后端搭配

前端页面有了,后端接口也有了,我们接下来,就是要把前后端结合在一起了!

切换到小程序,在刚刚创建的页面,编写一个获取上边创建的后端接口数据的函数:

3b7bccb20c688007e625342707890eff.png

很简单吧!我们只需要调用微擎 sdk 的 request 函数即可(用法同 wx.request )

我们刷新下小程序,看看效果:

6c920e0abdf4cbf4d500607404af9c3d.png

正常获取到数据,并且成功展示到小程序!

7. 总结

使用微擎开发一些小型小程序是很简单方便的,我们通过这篇文章可以来了解到只需要几个简单步骤就能创建出一个微擎应用小程序,这里总结了 3 个主要流程:

  1. 创建微擎应用

  2. 下载模板代码,修改 wxapp.php 文件,添加我们的自定义函数

  3. 小程序里调用 sdk 加载我们创建的后端 API,获取数据后展示

我们掌握了基础的创建方法和修改地方,接下来就可以更容易地去扩展我们的新功能啦!

(更多关于微擎和其他相关的小程序开发教程、技巧交流,可添加小鱼微信 Hack_Fish 入群一起学习)

♥ 广告时间 ♥

本文章中设计到的小程序,我已经免费发布到微擎市场,搜索 毒鸡汤小程序 可立即免费获取使用!

同时,我也将该程序进行了开源,提供给大家学习参考,点击查看原文,跳转到 GitHub 开源地址,喜欢的朋友给个 ⭐⭐ 

442a20e2b5023b8ebf2e8432b697fbac.png

6b534418d7a147d5cf002867cad3763b.png点赞点好看,身体倍儿棒!
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值