- 长期订阅模板库中没有模板也不让申请模板怎么弄?
今天做长期订阅,因为是做汽车路况项目的 所以有长期订阅,但是选择模板的时候发现里面没有模板,但是没关系 可以申请啊,后来找来找去也没发现申请模板在哪? 里面没有模板 也不让申请 这是不让我用的节奏吗? [图片]
2019-10-21 - 微信小程序订阅消息
功能介绍消息能力是小程序能力中的重要组成,腾讯为开发者提供了订阅消息能力,以便实现服务的闭环和更优的体验。 订阅消息推送位置:服务通知 订阅消息下发条件:用户自主订阅 订阅消息卡片跳转能力:点击查看详情可跳转至该小程序的页面消息类型1. 一次性订阅消息 一次性订阅消息用于解决用户使用小程序后,后续服务环节的通知问题。用户自主订阅后,开发者可不限时间地下发一条对应的服务消息;每条消息可单独订阅或退订。 2. 长期订阅消息 一次性订阅消息可满足小程序的大部分服务场景需求,但线下公共服务领域存在一次性订阅无法满足的场景,如航班延误,需根据航班实时动态来多次发送消息提醒。为便于服务,我们提供了长期性订阅消息,用户订阅一次后,开发者可长期下发多条消息。 目前长期性订阅消息仅向政务民生、医疗、交通、金融、教育等线下公共服务开放,后期将逐步支持到其他线下公共服务业务。 发送订阅消息步骤:1. 添加订阅消息模板,获取模板id 登录微信公众平台添加订阅消息模板,获取模板id. [图片] 2. 获取下发权限: wx.requestSubscribeMessage(Object object) 注意事项:此部分代码需要按钮触发,不可放在onload()或onshow()中 wx.requestSubscribeMessage({ tmplIds: ['xxxxxxxxxxxxxxxxxxxxx'],//这里填写模板id success (res) { console.log("res--->",res) }, fail:err=>{ console.log("err---",err) } }) [图片] 3. 调用接口下发订阅消息: subscribeMessage.send 注意事项:用户勾选 “总是保持以上选择,不再询问” 之后,下次订阅调用 wx.requestSubscribeMessage 不会弹窗,保持之前的选择,修改选择需要打开小程序设置进行修改。 https调用请求地址: POST https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=ACCESS_TOKEN 官网的请求参数如下: [图片] 必填参数说明 access_token ------接口调用凭证注意事项:获取接口凭证:auth.getAccessToken(发送消息需要access_token参数,access_token的有效期目前为 2 个小时,需定时刷新,重复获取将导致上次获取的 access_token失效) wx.request({ url: 'https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential', method: 'GET', data: { "appid": 'xxxxxx', //小程序appid "secret": 'xxxxxxx' //小程序密钥 }, success: res => { console.log("res--",res) this.data.accessToken=res.data.access_token }, fail: (e) =>{ console.error("err--",e); }, complete: (e) =>{ console.log("c--",e); } }) data ------板内容,格式形如 { "key1": { "value": any }, "key2": { "value": any } } 注意事项:发送消息的模板内容:key值要与模板中的一致 以下模板的data值: { "date1": {"value": "2020-01-01 00:00" },"date2": { "value": "2020-01-01 00:00"}, "thing3": { "value": "升级期间暂停服务,感谢你的理解。" },"time4": { "value": "2020-01-01 17:38:26" } }, [图片] 发送订阅消息代码 wx.request({ url: 'https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=' + this.data.accessToken, method: 'POST', data: { "touser": 'xxxxxxxxxx', //接收者(用户)的 openid "template_id": 'xxxxxxxxxx', //所需下发的订阅模板id "page": '/pages/index/index' || '', //点击模板卡片后的跳转页面 "data": { "date1": { "value": "2020-01-01 00:00" }, "date2": { "value": "2020-01-01 00:00" }, "thing3": { "value": "升级期间暂停服务,感谢你的理解。" }, "time4": { "value": "2020-01-01 17:38:26" } }, //模板内容,格式形如 { "key1": { "value": any }, "key2": { "value": any } } "miniprogram_state": "developer" //跳转小程序类型:developer为开发版;trial为体验版;formal为正式版;默认为正式版 }, success: (res) => { console.log(res.data); }, fail: (e) => { console.errore); } }) 发送订阅消息成功,手机截图如下 [图片] 以上就是微信订阅消息设置发送的全过程。
2021-11-30 - 小程序分享图生成指南:告别 Canvas 踩坑,轻松实现朋友圈分享
由于微信小程序无法直接分享到朋友圈,业界普遍采用 Canvas 生成带小程序码的图片,引导用户保存后分享,相信不少开发者在绘制分享图时都曾遇到过各种 Canvas 的“彩蛋”(坑)。 今天推荐一个开源组件:Painter,它能够帮助我们轻松实现分享图绘制,并且已在支付宝小程序中验证可用。 快速开始 第一步:创建自定义组件 在组件的 JSON 文件中引入 Painter: [代码]{ "component": true, "usingComponents": { "painter": "/painter/painter" } } [代码] 第二步:编写组件 WXML 将 Painter 组件定位在屏幕外,避免影响用户界面: [代码]// 将该组件定位在屏幕之外,用户查看不到。 <painter style="position: absolute; top: -9999rpx;" palette="{{imgDraw}}" bind:imgOK="onImgOK" /> [代码] 第三步:实现组件逻辑 [代码]Component({ properties: { // 是否开始绘图 isCanDraw: { type: Boolean, value: false, observer(newVal) { newVal && this.handleStartDrawImg() } }, // 用户头像昵称信息 userInfo: { type: Object, value: { avatarUrl: '', nickName: '' } } }, data: { imgDraw: {}, // 绘制图片的大对象 sharePath: '' // 生成的分享图 }, methods: { handleStartDrawImg() { wx.showLoading({ title: '生成中' }) this.setData({ imgDraw: { width: '750rpx', height: '1334rpx', background: 'https://qiniu-image.qtshe.com/20190506share-bg.png', views: [ { type: 'image', url: 'https://qiniu-image.qtshe.com/1560248372315_467.jpg', css: { top: '32rpx', left: '30rpx', right: '32rpx', width: '688rpx', height: '420rpx', borderRadius: '16rpx' }, }, { type: 'image', url: this.data.userInfo.avatarUrl || 'https://qiniu-image.qtshe.com/default-avatar20170707.png', css: { top: '404rpx', left: '328rpx', width: '96rpx', height: '96rpx', borderWidth: '6rpx', borderColor: '#FFF', borderRadius: '96rpx' } }, { type: 'text', text: this.data.userInfo.nickName || '青团子', css: { top: '532rpx', fontSize: '28rpx', left: '375rpx', align: 'center', color: '#3c3c3c' } }, { type: 'text', text: `邀请您参与助力活动`, css: { top: '576rpx', left: '375rpx', align: 'center', fontSize: '28rpx', color: '#3c3c3c' } }, { type: 'text', text: `宇宙最萌蓝牙耳机测评员`, css: { top: '644rpx', left: '375rpx', maxLines: 1, align: 'center', fontWeight: 'bold', fontSize: '44rpx', color: '#3c3c3c' } }, { type: 'image', url: 'https://qiniu-image.qtshe.com/20190605index.jpg', css: { top: '834rpx', left: '470rpx', width: '200rpx', height: '200rpx' } } ] } }) }, onImgErr(e) { wx.hideLoading() wx.showToast({ title: '生成分享图失败,请刷新页面重试' }) //通知外部绘制完成,重置isCanDraw为false this.triggerEvent('initData') }, onImgOK(e) { wx.hideLoading() // 展示分享图 wx.showShareImageMenu({ path: e.detail.path, fail: err => { console.log(err) } }) //通知外部绘制完成,重置isCanDraw为false this.triggerEvent('initData') } } }) [代码] 如何使用 1. 引入组件 在页面的 JSON 文件中引入封装好的分享组件: [代码]{ "usingComponents": { "share-box": "/components/shareBox/index" } } [代码] 2. 页面布局 [代码]<!-- 触发按钮 --> <button class="intro" bindtap="getUserInfo">点我生成分享图</button> <!-- 分享组件 --> <share-box isCanDraw="{{isCanDraw}}" userInfo="{{userInfo}}" bind:initData="handleClose" /> [代码] 3. 页面逻辑 [代码]Page({ data: { isCanDraw: false, userInfo: {} }, // 重置绘制状态 handleClose() { this.setData({ isCanDraw: false }) }, // 获取用户信息并开始绘制 getUserInfo() { wx.getUserProfile({ desc: "获取您的头像昵称信息", success: (res) => { const { userInfo = {} } = res this.setData({ userInfo, isCanDraw: true // 触发绘制 }) }, fail: (err) => { console.log('获取用户信息失败:', err) } }) } }) [代码] 效果展示 完成上述步骤后,即可生成如下的分享图片: [图片] 实用技巧 文字居中:通过设置 [代码]align: 'center'[代码] 和合适的[代码]left[代码]值实现 文字换行:设置[代码]width[代码]和 [代码]maxLines[代码] 属性,当 [代码]maxLines: 1[代码] 时,超出一行会显示为省略号 资源链接 代码片段:点击查看 Painter 可视化工具:点击查看 常见问题 Q:为什么图片无法加载? A:需要在小程序后台配置 downloadFile 合法域名: 进入「开发」→「开发设置」→「服务器域名」 配置图片的域名前缀,如 https://qiniu-image.qtshe.com Q:真机调试注意事项? A:开发者工具中可在「详情」→「本地设置」中开启「不校验合法域名」,真机调试时需开启调试模式。 通过以上步骤,你就可以轻松实现小程序分享图生成功能了。如有任何问题,欢迎在评论区留言讨论!
星期四 10:32