前往微擎(w7.cc)开发者控制台,点击 应用管理->应用列表->创建应用,填写信息后得到一个应用模块 ID(标识)
创建完毕后返回进入,点击 新建版本->设计新版本->完成
创建版本成功后,点击编辑,然后下拉到底部,首先我们下载 modulezip 文件(后端程序)
下载后,上传到你的微擎网站目录的 addons 目录,解压成如下格式,如图所示:
至此,我们的微擎后台模块已经创建完成!
2. 安装模块我们到微擎后台,点击 应用管理->未安装列表,然后安装上
接着,点击 平台管理->添加平台->新建微信小程序
最后一步 添加应用,选择刚刚我们创建好的【毒鸡汤小程序】模块
至此,微擎模块已经安装完毕啦!
3. 创建小程序返回微擎开发者后台,回到刚刚我们下载微擎模块 modulezip 的地方,看到还有一个 wxapp 的文件代码,我们点击下载回来,这个是微信小程序的示例模板代码
下载后解压,用微信小程序开发者工具打开。
打开后,我们编辑 siteInfo.js 文件,修改 siteroot 成我们的微擎后台地址:
然后我们还需要修改 acid 和 uniacid,这个值,我们可以在我们的微擎后台->平台管理->小程序的基础信息,然后就可以在 上方的 URL 地址中看到 uniacid 值啦!
(这个值在微擎模块发布生成小程序的时候会自动替换,我们不用担心。现在是测试阶段,所以需要我们手动获取)
如图,我这里是 11,所以我改成 11:
至此,小程序就算创建初始化好啦!
刷新一下小程序,我们打开调试器,输入如下代码,测试一下配置是否生效:
看到如上返回数据,就说明前后端都配置好了!
4. 创建小程序页面接下来,我们开始创建小程序了,功能很简单:用户进入后,获取一条随机的毒鸡汤数据,然后用 text 组件展示即可。
然后编辑 app.json, 设置为首页:
OK!小程序页面已做好!
(为了省时间,各种样式配置就不多写了,重点在下边的后端编写)
5. 编写后端接口回到我们的微擎后端,编辑 addons/weapp_dujitang 目录下的 wxapp.php 文件,我们创建一个获取毒鸡汤数据的函数:
(提示:函数名为 doPageXXX,然后我们后边就可以用 xxx 这个链接访问到这个 API 了)
这里有个 soul.json 数据文件,点击原文链接前往开源地址即可下载获取。
我们在插件目录下创建 data 目录,然后再把这个 soul.json 文件放入其中即可!
OK,后端,已经写好了!
很简单的,就是一个函数的事,我们只需要了解这个函数在哪个文件创建,函数名命名规则,还有如何返回数据即可!
6. 前后端搭配前端页面有了,后端接口也有了,我们接下来,就是要把前后端结合在一起了!
切换到小程序,在刚刚创建的页面,编写一个获取上边创建的后端接口数据的函数:
很简单吧!我们只需要调用微擎 sdk 的 request 函数即可(用法同 wx.request )
我们刷新下小程序,看看效果:
正常获取到数据,并且成功展示到小程序!
7. 总结使用微擎开发一些小型小程序是很简单方便的,我们通过这篇文章可以来了解到只需要几个简单步骤就能创建出一个微擎应用小程序,这里总结了 3 个主要流程:
创建微擎应用
下载模板代码,修改 wxapp.php 文件,添加我们的自定义函数
小程序里调用 sdk 加载我们创建的后端 API,获取数据后展示
我们掌握了基础的创建方法和修改地方,接下来就可以更容易地去扩展我们的新功能啦!
(更多关于微擎和其他相关的小程序开发教程、技巧交流,可添加小鱼微信 Hack_Fish 入群一起学习)
♥ 广告时间 ♥本文章中设计到的小程序,我已经免费发布到微擎市场,搜索 毒鸡汤小程序 可立即免费获取使用!
同时,我也将该程序进行了开源,提供给大家学习参考,点击查看原文,跳转到 GitHub 开源地址,喜欢的朋友给个 ⭐⭐
点赞点好看,身体倍儿棒!