借助云开发实现小程序模版消息推送(含源码)

简介: 借助云开发实现小程序模版消息推送(含源码)

上一节给大家将了借助云开发实现小程序支付功能,那么我们就要想了,能不能借助云开发实现小程序消息推送功能呢? 还别说,云开发还真能实现推送的功能。


一直关注我的同学肯定知道老师之前也写过借助java后台实现小程序消息推送的文章。 我们借助java后台虽然也能轻松的实现消息推送。但是呢?用java开发后台推送,必须要搭建服务器,学习java代码,部署java代码当然你就是做java开发的,或者学习过java,这没什么。但是作为小程序开发人员来说,用java显得太重了。


传送门:

借助小程序云开发实现小程序支付功能(含源码)https://www.jianshu.com/p/ddccf5f95e8c

5行代码实现微信小程序模版消息推送 (含推送后台和小程序源码):https://www.jianshu.com/p/35da86f309d4

下面就来教大家如何借助云开发实现小程序模版消息的推送功能。

老规矩,先看效果图



下面来讲实现步骤


一,定义推送的云函数


由于我们的云推送功能只能在云函数里调用,所以我们这里必须要在云函数里实现推送功能。

1,首先我们定义一个云函数push0524。

如果你还不知道如何使用云开发,如何定义云函数,去翻下老师之前的文章。有写的。


把完整的代码贴给大家

// 云函数入口文件const cloud = require('wx-server-sdk')
cloud.init()// 云函数入口函数exports.main = async(event, context) => {  console.log(event)  return sendTemplateMessage(event)
}//小程序模版消息推送async function sendTemplateMessage(event) {  const {
    OPENID
  } = cloud.getWXContext()  // 接下来将新增模板、发送模板消息、然后删除模板
  // 注意:新增模板然后再删除并不是建议的做法,此处只是为了演示,模板 ID 应在添加后保存起来后续使用
  const addResult = await cloud.openapi.templateMessage.addTemplate({    id: 'AT0002',    keywordIdList: [3, 4, 5]
  })  const templateId = addResult.templateId //新增的模版id
  const sendResult = await cloud.openapi.templateMessage.send({    touser: OPENID,
    templateId,    formId: event.formId,    page: 'pages/index/index',    data: {      keyword1: {        value: '云开发实现推送',
      },      keyword2: {        value: '2019 年 5 月 24 日',
      },      keyword3: {        value: '编程小石头',
      },
    }
  })  //删除模版id
  await cloud.openapi.templateMessage.deleteTemplate({
    templateId,
  })  return sendResult
}

上面代码所实现的就是

1,创建模版,拿到模版id

2,使用模版ID,填充模版消息,发送模版

3,删除模版。

我们正常开发时,模版都是在小程序后台获取到的。这里是为例演示方便。所以正常开发时,只需要实现第二步就行了。

推送的关键代码就是这个方法:

cloud.openapi.templateMessage.send

通常我们定义完push0524云函数以后,如果直接调用的话,会报错误的。



来看下这个错误,看到红色框里的permission就知道,肯定是权限的问题。所以我们在定义完云函数以后,要在push0524云函数下面添加权限配置页面。如下图



重要的就是这个: "templateMessage.send", 推送权限。因为推送是云开发给我们提供的,我们这里调用时,必须配置相关权限,才能使用的。

到这里我们的推送功能就实现了。下面我们来验证下。


二,验证云开发推送


验证其实很简单,和我们之前的《5行代码实现微信小程序模版消息推送 (含推送后台和小程序源码)》 类似。只不过一个是在java后台推送,一个是在小城里推送。下面我们简单写个小程序里验证推送的demo。

功能很简单

1,获取formid,因为推送必须有formid的

2,点击调用push0524实现推送


简单的贴下代码


需要注意的一点:我们测试时,必须要真机测试。因为模拟器没法获取到formid的。



我们在推送成功的success回调中打印下log。如果log中出现,send:ok字样,就代表我们推送成功了。来看下推送成功的效果。

微信聊天列表接收到了消息提醒



消息内容

到这里我们就用云开发实现完整的消息推送功能了。是不是很简单。

相关文章
|
2月前
|
小程序 JavaScript Java
微信小程序的后端开发需要使用什么语言?
【8月更文挑战第22天】微信小程序的后端开发需要使用什么语言?
323 65
ly~
|
9天前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
42 6
|
8天前
|
JSON 小程序 前端开发
创建一个属于自己的小程序(注册开发账号)
介绍如何创建微信小程序账号,包括注册流程、下载安装微信开发者工具、创建项目以及项目结构介绍。
创建一个属于自己的小程序(注册开发账号)
ly~
|
8天前
|
开发框架 小程序 前端开发
抖音小程序的开发难度大吗?
抖音小程序的开发难度因人而异,主要取决于开发者经验、技能及功能需求。技术上需掌握前端技术及抖音开发框架,了解平台生态与规则;设计上需符合用户审美和习惯,具备创新性和实用性。此外,严格的审核标准和激烈的市场竞争增加了开发难度,开发者需制定有效推广策略并持续优化小程序以保持竞争力。
ly~
41 4
|
8天前
|
小程序 JavaScript API
微信小程序开发学习之页面导航(声明式导航和编程式导航)
这篇文章介绍了微信小程序中页面导航的两种方式:声明式导航和编程式导航,包括如何导航到tabBar页面、非tabBar页面、后退导航,以及如何在导航过程中传递参数和获取传递的参数。
微信小程序开发学习之页面导航(声明式导航和编程式导航)
|
2月前
|
小程序 JavaScript
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
本文介绍了使用 Taro 和 Vue 创建轮播组件的两种方法:一是通过 `<swiper>` 实现,二是利用 Nut UI 的 `<nut-swiper>` 组件实现。
Taro@3.x+Vue@3.x+TS开发微信小程序,使用轮播图
|
2月前
|
JSON 小程序 JavaScript
微信小程序制作 购物商城首页 【内包含源码】
这篇文章提供了一个微信小程序购物商城首页的实现方法和源码,包括页面布局、数据结构、核心代码以及如何配置tabBar和搜索框组件。
微信小程序制作 购物商城首页 【内包含源码】
|
29天前
|
移动开发 小程序 JavaScript
uni-app开发微信小程序
本文详细介绍如何使用 uni-app 开发微信小程序,涵盖需求分析、架构思路及实施方案。主要功能包括用户登录、商品列表展示、商品详情、购物车及订单管理。技术栈采用 uni-app、uView UI 和 RESTful API。文章通过具体示例代码展示了从初始化项目、配置全局样式到实现各页面组件及 API 接口的全过程,并提供了完整的文件结构和配置文件示例。此外,还介绍了微信授权登录及后端接口模拟方法,确保项目的稳定性和安全性。通过本教程,读者可快速掌握使用 uni-app 开发微信小程序的方法。
57 3
|
2月前
|
小程序
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
本文介绍了Taro中`useShareAppMessage`的使用方法,需在页面配置`enableShareAppMessage: true`并重新编译。
Taro@3.x+Vue@3.x+TS开发微信小程序,设置转发分享
|
2月前
|
小程序 数据安全/隐私保护
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
在 `src/http` 目录下创建 `request.ts` 文件,并配置 Taro 的网络请求方法 `Taro.request`,支持多种 HTTP 方法并处理数据加密。
Taro@3.x+Vue@3.x+TS开发微信小程序,网络请求封装
下一篇
无影云桌面