Adinnet-Web Adinnet-Web
首页
  • 技术沉淀

    • 技术沉淀
  • 前端文章

    • JavaScript
  • 前端笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 实用技巧
收藏
  • 分类
  • 标签
  • 归档
首页
  • 技术沉淀

    • 技术沉淀
  • 前端文章

    • JavaScript
  • 前端笔记

    • 《JavaScript教程》
    • 《JavaScript高级程序设计》
    • 《ES6 教程》
    • 《Vue》
    • 《React》
    • 《TypeScript 从零实现 axios》
    • 《Git》
    • TypeScript
    • JS设计模式总结
  • HTML
  • CSS
  • 技术文档
  • GitHub技巧
  • Nodejs
  • 博客搭建
  • 学习
  • 实用技巧
收藏
  • 分类
  • 标签
  • 归档
  • JavaScript文章

  • 学习笔记

  • 技术沉淀

    • CSS矩形绘制
    • 仿微信通讯录
    • 微信小程序订阅消息
      • 保存海报
      • 微信小程序页面弹框
      • 微信小程序在指定距离范围内签到
      • h5嵌套u3d,使用iframe进行交互
      • 前端主导文件处理方法
      • 图片压缩方法封装
      • 金额大写函数
      • 前端主导的小程序一键导航功能
      • uniapp富文本组件(只支持H5)
      • uniapp二次确认弹框组件(依赖于uview)
      • 无缝滚动插件(vue3)
      • H5与unity通信(只针对unity嵌套H5)
      • 辅助触控
      • 关系图
      • h5&svg点赞动效
      • iframe高精地图文件预览
      • 自适应横向瀑布流布局
      • 考试功能
      • 仿小说翻页
      • 富文本
      • h5唤醒App
      • vue3 Count-to数字翻动
      • 小程序图片转base64
      • 第三方应用跳转微信小程序
      • 圆角TabBar
      • 大屏Header
      • Echarts中国地图
      • 使用computed拦截v-model
      • 消息订阅与发布
      • Html相对路径页面跳转
      • Vite打包本地访问
      • H5主题切换
      • 移动端列表分页
      • 每次进入页面都触发的功能(v3)
      • 智能导诊
      • js中几个优雅的运算符使用技巧
      • 其他CSS伪元素
      • 微信浏览器保存canvas海报
      • uniappH5手动拖拽缩放自定义绘制海报
      • uniapp小程序盒子拖拽排序
      • 微信小程序地图的使用
      • css静态漏斗绘制
      • 微信小程序图片流处理
      • ios时间问题
      • 文字围绕效果
      • 表格树动态计算
      • React中useEffect用法
      • React Hooks 陷阱
      • Naive UI修改默认样式
      • vue 根据div id 滚动到指定view到可视视图中
      • js将[1,2,3]排列组合成[1.12.123]
      • 移动端如何加载vite导出dist包
      • TS探索接口、泛型和自定义类型
      • WebSocket中加入Token
      • 幂方程指数衰减
      • pageSpy
      • 表格多条件搜索
      • axios get 请求 url 转码 空格转成+,导致请求失败
      • NaiveUI使用Message组件遇到的问题记录
      • 小程序多盒子拖拽排序
      • 对象快速筛key方法
      • 倒计时
      • nuxt3中的useAsyncData使用详解
      • nuxt3文件式路由
      • 播放amr格式音频
      • echarts瀑布图
      • vue中使用vueuse进行文件导出
      • 分享一个数据整理方法
      • naiveui表格shift多选
      • 数组递归转tree
      • 自定义指令图片懒加载
      • 将数组里面的对象转换成我们需要的键值对
      • 亚马逊云s3上传
      • 上拉加载更多封装
      • JS设计模式总结笔记
      • 适配移动端页面顶部安全区域
      • 【CryptoJS】使用介绍
      • 微信小程序富文本图片点击放大
      • 微信小程序省市区级联选择
      • uniapp拖动排序插件
      • element ui 的树形结构懒加载,局部更新
      • 表单搜索过滤空值
      • 判断设备类型
      • tsconfig配置打包问题
      • vant-uploader上传组件添加长按保存图片
      • BroadcastChannel跨页面通信
      • pnpm安装问题
      • echart阶梯图形绘制
      • js根据对象拼接参数
      • 集成免密登录
      • 输入框输入数字限制
      • js控制全局css变量
      • 流程图
      • 修改npm包
      • tsx在vue3中的应用
      • 109video播放视频流
      • echart默认展示某个点的tooltip
      • 大屏适配几种方案
      • 表单低代码自定义列表页
      • 表单低代码列表页配置端代码
      • 低代码平台使用的一些好用的js方法
      • vue3cookie的使用
      • 原生js下载文件
      • stompjs 创建socket,断线重连机制
      • iframe作为内嵌网页cookie设置
      • 前端对文件内容解析生成特定算法哈希值方法
      • vue3中前端自定义命名文件名称下载文件的方法
      • 前端项目中权限判断的方法配合路由守卫使用
      • 原生table:表格table中thead固定,tbody超出高度出现滚动条
      • vue中使用原生的方法
      • vue3中amchart的初步使用
      • base64图片加水印
      • 手写签名
      • base64转doc文件
    • 前端
    • 技术沉淀
    黄枫萍
    2023-07-04
    目录

    微信小程序订阅消息

    # 效果图

    Alt text Alt text

    # 注意事项

    • 必须有用户主动点击行为,不能放在延时器或者wx.login里面调用(微信说支付回调也可以调用,等待测试)
    • 一次授权调用里,每个tmplId对应的模板标题不能存在相同的,若出现相同的,只保留一个
    • 一次调用,最多可以订阅三条消息
    • 接口是根据openid来给用户发订阅消息的,因此必须要用户调用wx.login给code给接口,接口通过code拿到openid
    • 用户勾选了总是,授权弹框下次不弹出,但是每次订阅,必须调用wx.requestSubscribeMessage

    # 业务主代码 uniapp

    # 示例需求

    用户每次打开首页就必须弹授权,六个,从别的页面过来不需要弹

    # 示例需求注意事项

    注意,this.subscribeMessage()必须放在延时器中调用,不然,获取到的路由参数是上个页面的,不是当前页面的

    # 代码示例
    		methods:{
    			subscribeMessage(){
    				let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
    				console.log('app.vue里面的参数',routes)
    				if (routes.length > 0) {
    					console.log('获取当前路由信息', routes[routes.length - 1].route)
    					if (routes[routes.length - 1].route == 'pages/index/index' && uni.getStorageSync('userType') == 2) {
    						let tmpIdArr = ['Ss7eD2I2AghLQbUx5BdvAiEQi3xafNgI5sPzM_HT_aE',
    							'3qcGgSqJuty-G0eM4vcNeKx4Cj5cBuXJti4DiiFwRyQ',
    							'Wn1qtha1i_adEv9bwtrVYXJ-ZxP6p4_c5FSgnBX9JaQ'
    						] // 新服务需求提醒,服务超时通知,订单状态通知
    						let tmpIdArr2 = ['q_m8ZPRoPVBA1-IR8K0a8WcLUXnHwtdZe0WDw4ESL8o', ] // 服务评价结果通知
    						uni.showModal({ //在回调里面使用showModel弹框调起第二个订阅界面
    							title:'订阅通知',
    							content: '需要订阅新服务需求提醒,服务超时通知,订单状态通知',
    							confirmColor: '#93D6E5',
    							showCancel: false,
    							success: res => {
    								uni.requestSubscribeMessage({
    									tmplIds: tmpIdArr,
    									success(res) {
    										console.log('订阅成功', res)
    									},
    									fail(res) {
    										console.log('订阅失败', res)
    									},
    									complete(res) {
    										uni.showModal({ //在回调里面使用showModel弹框调起第二个订阅界面
    											title:'订阅通知',
    											content: '还需订阅服务评价结果通知',
    											confirmColor: '#93D6E5',
    											showCancel: false,
    											success: res => {
    												uni.requestSubscribeMessage({
    													tmplIds: tmpIdArr2,
    													success(res) {
    														console.log('订阅成功', res)
    													},
    													fail(res) {
    														console.log('订阅失败', res)
    													},
    												})
    											}
    										})
    									}
    								})
    							}
    						})
    					}
    				}
    			}
    		},
    		onShow: function() {
    			setTimeout(()=>{
    				this.subscribeMessage()
    			},0)
    		},
    
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    上次更新: 2023/07/04, 11:42:38
    仿微信通讯录
    保存海报

    ← 仿微信通讯录 保存海报→

    最近更新
    01
    base64转doc文件
    01-03
    02
    手写签名
    01-03
    03
    base64图片加水印
    01-03
    更多文章>
    Theme by Vdoing | Copyright © 2023-2025 Adinnet
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式