【小程序】fail can only be invoked by user TAP gesture 唤起订阅消息多 ...

在对接消息订阅功能时，出现了调用 uni.requestSubscribeMessage 后无法唤起订阅消息窗口的情况。
付出宝、微信小程序的行为

uni.requestSubscribeMessage 之前存在异步逻辑时无法唤起，但是在 uni.showModal 的回调中调用时可以唤起。
抖音、快手小程序的行为

抖音小程序中 uni.requestSubscribeMessage 事件必须手动点击直接触发，不能在回调中触发：见 tt.requestSubscribeMessage 返回错误 中的评论。
在抖音中必须在点击事件中直接调用 uni.requestSubscribeMessage 才可以唤起窗口，而且之前不能存在异步逻辑，因此如果模板 id 是通过后端接口获取的，就要在点击事件之前先获取到模板 id 才可以。
uni.requestSubscribeMessage 之前存在异步逻辑时无法唤起，在 uni.showModal 的回调中调用时也不能唤起。
解决方案

对于上述的题目，一个解决的思绪是自己封装一个 modal 组件，而不是直接用小程序自带的 uni.showModal。在初始化 modal 组件时异步获取模板 id，在点击事件中调用 uni.requestSubscribeMessage，如许就可以同一多端的发起订阅消息哀求逻辑。
需要注意的是必须直接在点击事件中调用，否则抖音和快手依然是不生效的。

• 订阅消息组件：
  

1. <template>
2.   <HmModal :isShowModal="isShowRequestMessageModal" @closeModal="emitCancel">
3.     <view slot="body"> 为了通知您办理进度，需要向您推送相关消息 </view>
4.     <view slot="footer" class="c-modal-footer">
5.       <view class="c-modal-footer-btn cancel" @click="emitCancel">取消</view>
6.       <view class="c-modal-footer-btn confirm" @click="confirm">确认</view>
7.     </view>
8.   </HmModal>
9. </template>
11. <script>
12. // 抖音、快手需要由点击事件直接触发，不能在 uni.showModal 的回调中触发
13. import HmModal from "@/components/modal/HmModal";
14. import SubscribeService from "@/services/bussiness/subscribe/SubscribeService";
15. import Env from "@/env/Env";
17. export default {
18.   components: {
19.     HmModal,
20.   },
21.   data() {
22.     return {
23.       templIds: null,
24.     };
25.   },
26.   props: ["isShowModal"],
27.   computed: {
28.     isShowRequestMessageModal() {
29.       return this.templIds && this.templIds.length > 0 && this.isShowModal;
30.     },
31.   },
32.   methods: {
33.     async confirm() {
34.       await SubscribeService.requestSubscribeMessageByTmplIds(this.templIds);
35.       this.emitConfirm();
36.     },
37.     emitConfirm() {
38.       this.$emit("confirm");
39.     },
40.     emitCancel() {
41.       this.$emit("cancel");
42.     },
43.     emitNoTemplate() {
44.       this.$emit("not-support");
45.     },
46.   },
47.   async created() {
48.     if (Env.PLATFORM.ALIPAY) {
49.       this.emitNoTemplate();
50.     } else {
51.       this.templIds = await SubscribeService.getTemplIds().catch(console.error);
52.       if (!this.templIds || this.templIds.length === 0) {
53.         this.emitNoTemplate();
54.       }
55.     }
56.   },
57. };
58. </script>

复制代码

• 使用订阅消息组件：
  

1. <template>
2.   <view>
3.     <HmSubscribeMessageModal
4.       :isShowModal="isShowSubscribeMessageModal"
5.       @cancel="closeSubscribeMessageModal"
6.       @confirm="confirmSubscribeMessageModal"
7.       @not-support="isSportSubscribeMessage = false"
8.     />
9.   </view>
10. </template>
11. <script>
12. export default {
13.   data() {
14.     return {
15.       isShowSubscribeMessageModal: false,
16.       isSportSubscribeMessage: true, // 是否支持模板消息
17.     };
18.   },
19.   methods: {
20.     // 消息订阅确认框
21.     showSubscribeMessageModal() {
22.       this.isShowSubscribeMessageModal = true;
23.     },
24.     closeSubscribeMessageModal() {
25.       this.isShowSubscribeMessageModal = false;
26.       // 订阅失败
27.     },
28.     confirmSubscribeMessageModal() {
29.       this.isShowSubscribeMessageModal = false;
30.       // 订阅成功
31.     },
32.     submit() {
33.       if (this.isSportSubscribeMessage) {
34.         this.showSubscribeMessageModal();
35.       }
36.     },
37.   },
38. };
39. </script>

复制代码

参考

tt.requestSubscribeMessage 返回错误
requestSubscribeMessage:fail can only be invoked by user TAP gesture 微信小程序调起订阅消息失败

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。