使用云开发简单开发一个wx小程序

2,842 阅读3分钟

第一次发文章,大佬们轻喷,多多交流,感谢,文末已放好源码。

1.新建一个小程序和开通云开发

打开微信开发者工具新建小程序,选择小程序·云开发,AppId在微信公众平台注册一个小程序,然后找到账户信息,就看到了,填写完进入编辑期,然后在微信开发工具看到文件目录资源,cloudfunctions就是云函数的文件夹了,右键可以选择小程序环境等操作

image.png

2.打开云开发开通内容管理

3.png

登录到系统给的cms网址,创建一个项目 接下来就能看到菜单

  • 内容模型:数据库表
  • 内容集合:数据库表的数据
  • 营销工具:创建活动(个人小程序用不到)
  • Webhook:监听修改数据回调外部系统(暂时没用到) 新建内容模型以后,顺便在内容集合新建点数据,然后再回到云开发控制台的数据库菜单能看到刚才新建的表了,

ps:wx-ext-cms开头的表都是开通内容管理自动创建出来的,不用管

4.png image.png

3.新建云函数

我们在cloudfunctions文件夹右键, 选择 新建Nodejs云函数,起名叫information,并右键选择 在外部终端窗口中打开, 然后npm install一下,这样就可以在本地调试用了

接下来,打开新建的云函数文件夹里的index.js 如图,不改变默认的代码,加了一行const db = cloud.database(),获取云函数所需要的数据库,然后在main的这个方法,写一下刚才在内容管理新建的数据库表名,做一些读数据库和对数据进行处理的操作,拿到想要的数据,return出去

image.png

写完了测试一下呗 右键文件夹information,开启云函数本地调试,打开一个新的窗口,清理一下console里的内容,然后按照图中的步骤操作一下就看到了数据,说明这个云函数写的没问题可以了,最后再右键information文件夹,选择上传并部署:云端安装依赖,稍等1分钟,看到图标变绿色了编辑期右下角提示成功就OK了

image.png

4.调用云函数

在文件目录找到miniprogram文件夹,在page文件夹新建目录——新建页面,然后在js文件里,写一个方法调用刚才上传的云函数(不要在乎代码质量,嘿嘿),用wx.cloud.callFunction调用云函数,name是上面新建的informationdata是参数传过去的,数据返回赋值到页面上

image.png

5.大功告成

数据正常展示,完美

image.png

最后发布小程序

页面和数据都处理没问题了就可以发布小程序了

总结:花费一点时间开发小程序,让自己更了解小程序了(疯狂查官方文档,嘿嘿),锻炼一下自己嘛,还是有收获的,加油~

小程序和公众号搭配更好噢,可以下载一个订阅号的app,注册一下,然后回到微信公众平台,登录一下订阅号,自定义一下菜单,就可以跳转到小程序了。

简单开发的小程序:活动线报助手 源码:git.weixin.qq.com/QAQLiuCong/…

gh_54dc0d74543c_344.jpg