微信小程序之使用智能对话服务，客服回复的跳转小程序指定页面链接无效

小猫瘦瘦

已于 2024-07-31 13:55:00 修改

阅读量60

点赞数 2

文章标签：小程序微信小程序

于 2024-07-31 13:51:58 首次发布

本文链接：https://blog.csdn.net/qq_52499745/article/details/140820770

版权

在微信小程序中使用了微信智能对话服务，客服回复的是小程序指定页面的链接，无法正确跳转，而是返回到进入客服时的页面去了

解决方案：

需在小程序的客服组件 button 上添加 bindcontact 监听事件即可

<movable-area class="cuts-movable-area">
  <movable-view x="{{x}}" y="{{y}}" direction="all" class="cuts-movable-view">
    <button class="cuts_button" open-type="contact" session-from="weapp" bindcontact="contactCallback">
      <image class="cuts_image" src="../../assets/icon_contact.png"></image>
    </button>
  </movable-view>
</movable-area>

Component({
  data: {
    x: 0,
    y: 0
  },
  attached() {
    wx.getSystemInfo({
      success: (res) => {
        this.setData({
          x: res.screenWidth - 90,
          y: res.screenHeight - 250
        });
      }
    })
  },
  methods: {
    contactCallback(e) {
      const { path, query } = e.detail;
      if (path) {
        // Construct the query string using Object.keys and Array.prototype.map
        const queryString = Object.keys(query).length > 0
          ? '?' + Object.keys(query).map(key => `${key}=${query[key]}`).join('&')
          : '';
        // Navigate to the specified page using reLaunch
        console.log(path, queryString);
        wx.reLaunch({
          url: path + queryString,
        });
      }
    }
  }
})

.cuts-movable-area {
  position: fixed;
  top: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(255, 255, 255, 0);
  z-index: 101;
  pointer-events: none;
}

.cuts-movable-view {
  width: 90rpx;
  height: 90rpx;
  font-size: 35rpx;
  margin: 20rpx;
  pointer-events: auto;
}

.cuts_button {
  border: 0px;
  position: fixed;
}

.cuts_button::after {
  border: 0px;
}

.cuts_image {
  width: 90rpx;
  height: 90rpx;
}

.cuts-movable-view>.cuts_button {
  padding: 0px;
  line-height: 0px;
  text-align: start;
  background-color: transparent;
}

注意：修改后需提交审核并发布上线后才生效。