前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >整理了小程序云开发实战,你看懂了吗?

整理了小程序云开发实战,你看懂了吗?

作者头像
小丑同学
发布2020-09-21 15:46:06
4970
发布2020-09-21 15:46:06
举报
文章被收录于专栏:小丑的小屋小丑的小屋

前言

前几天有幸看了微信官方直播8月6日第一期小程序云开发实战的直播课,了解了一些关于小程序云开发的知识,在这里记录并分享给大家.

准备工作

  • 开发工具:微信开发者工具[1]
  • UI库:weui-wxss[2]

搭建项目

打开微信开发者工具新建项目

在这里需要一个AppID,这个ID需要到微信开发平台去注册成功之后,在开发的菜单里会生成一个你的专属AppID,然后勾选小程序云开发即可完成新建项目。也可以使用官方已经创建的demo[3]导入我们的开发工具中即可。

安装依赖

我们使用npm来构建依赖.在开发工具中详情本地设置里勾选使用npm模块

选中我们要使用的项目,打开终端npm i安装即可

完成上述操作之后,选择开发工具的菜单栏的工具->构建npm

因为我们的样式使用的微信官方提供的weui-wxss,我们也需要安装

代码语言:javascript
复制
npm i weui-miniprogram -S

如何使用`weui-wxss`[4]?

我们需要在app.wxss中全局引入样式库:

代码语言:javascript
复制
@import '/miniprogram_npm/weui-miniprogram/weui-wxss/dist/style/weui.wxss';

在我们自己的页面中使用组件的时候在xxx.json文件中配置即可

代码语言:javascript
复制
{
  "usingComponents": {
    "mp-uploader": "/weui-miniprogram/uploader/uploader"
  }
}

开通云开发

点击开发工具菜单的云开发之后会弹出新建的云环境的窗口,填写环境名称之后会自动生成环境ID,小编已经的创建过了没法截图了,这里就不附新建图片了。

开通云开发环境之后会出现这个界面

从第一个云函数开始

找到我们云函数的项目,右击弹出选择菜单,点击新建Node云函数

生成的项目列表我们首先关注index.js云函数的入口文件

  • 云函数依赖wx-server-sdk
  • cloud.init()初始化入口文件并使用export导出入口函数
  • 支持async语法
  • 输入参数event就是wx.cloud.callFunction参数中的data部分
  • 返回的就是wx.cloud.callFunction返回参数的result

创建云函数之后,我们需要右键->上传并部署(所有文件),部署成功之后就可以在小程序里调用了

找到我们的小程序index.js的入口文件

编译之后我们可以看到云函数已经调用成功

数据库的查询和修改

  • 数据库查询支持async/await语法
  • 使用db.collection进行表的查询操作
  • 可以使用db.command进行复杂的子查询
  • get()方法会触发网络请求,往数据库取数据

首先需要在数据库里创建集合,不需要定义表的结构,然后为了方便函数的调用,写了一个简单的路由

注册逻辑

注册成功之后,可以直观的在数据库中看到结果

更多关于数据库的操作可以查看微信官方文档[5],小编就多说了。

云存储

  • 只需要在客户端就可以直接将文件上传到云存储中
  • 同样支持async/await
  • 返回的fileID可以直接用于<image>标签,或者是通过wx.cloud.getTempFileURL换取临时链接

提交之后,返回的结果

我们也可以直接在云存储里找到我们的存储记录

使用云函数调用推送订阅消息

  • 使用之前需要在mp后台创建好订阅消息的模板
  • 填入templateId模板字段即可发送
  • 注意开发者工具中无法获取订阅推送的权限,需要真机调试

最后

本文结束,有什么问题和有错误的地方,欢迎大家的留言和评论,还有后续更新,下期更加精彩 ???

・・・下期再见・・・

参考资料

[1]

微信开发者工具: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

[2]

weui-css: "https://github.com/Tencent/weui-wxss/"

[3]

demo: https://github.com/wechat-miniprogram/miniprogram-cloudbase-meeting-demo

[4]

使用weui-=wxss: https://developers.weixin.qq.com/miniprogram/dev/extended/weui/quickstart.html

[5]

数据库操作: https://developers.weixin.qq.com/miniprogram/dev/wxcloud/basis/capabilities.html#%E6%95%B0%E6%8D%AE%E5%BA%93

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2020-08-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 小丑的小屋 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 准备工作
  • 搭建项目
  • 安装依赖
  • 开通云开发
  • 从第一个云函数开始
  • 数据库的查询和修改
  • 云存储
  • 使用云函数调用推送订阅消息
  • 最后
    • 参考资料
    相关产品与服务
    数据库
    云数据库为企业提供了完善的关系型数据库、非关系型数据库、分析型数据库和数据库生态工具。您可以通过产品选择和组合搭建,轻松实现高可靠、高可用性、高性能等数据库需求。云数据库服务也可大幅减少您的运维工作量,更专注于业务发展,让企业一站式享受数据上云及分布式架构的技术红利!
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档