WeChat ミニプログラムカスタマーサービスシステム - 2 つのフォーム: ページに埋め込まれて詳細情報を提供するフォームと、自己完結型コンポーネントフォーム

WeChat アプレットを接続するには 2 つの方法があります。WebView コンポーネントをページに埋め込む方法と、アプレットの顧客サービスコンポーネントをメッセージに接続する方法です。

Webview コンポーネントを使用して、チャットページフォームを埋め込みます。このフォームはより柔軟で制御可能であり、より多くの情報を顧客サービスに送信できます。たとえば、ユーザーの携帯電話番号、ページ上の製品情報などを取り込むことができます。

埋め込みページフォーム

表示クリックボタンを追加し、ニックネームのアバターをチャットページに埋め込みました。

wxml部分

<view class="page-body">
  <button  open-type="getUserInfo" bindgetuserinfo="getPerson">联系客服</button>
  <view wx:if="{
      
      {url}}">
    <web-view  src="{
      
      {url}}"></web-view>
  </view>
</view>
js部分

Page({
  data: {
    url:""
  },
  //按钮回调的方法
  getPerson:function(e){
    console.log(e);
    var username=e.detail.userInfo.nickName;
    var  avator=e.detail.userInfo.avatarUrl;
    this.setData({
      url:"https://gofly.sopans.com/chatIndex?kefu_id=taoshihan&ent_id=5&visitor_name="+username+"&avator="+avator
    });

  },
  onLoad: function () {

  },
})

オフライン通知

オフライン通知が必要な場合は、次の方法で
アプレットのサブスクリプションメッセージを使用する必要があります。また、訪問者がページを離れた後に通知を受け取ることもできます。

アプレットには、1 回限りの購読メッセージと長期購読メッセージがあります。長期購読メッセージは、政務や民生、医療、交通、金融、教育などのオフラインの公共サービスにのみ公開されています。それらを使用することはできません。

ワンタイム購読メッセージは、ユーザーがミニプログラムを使用した後のフォローアップサービスリンクの通知問題を解決するために使用されます。ユーザーが個別に購読した後、開発者は対応するサービスメッセージを無制限に送信できます。各メッセージは個別に購読または購読解除できます。

注: 承認は 1 回、送信は 1 回です。数が多すぎると送信できません。

サブスクリプションテンプレートメッセージの構成

WeChat アプレットが独立したオンラインカスタマーサービスシステムに接続したい場合は、アプレットメッセージプッシュインターフェイスの使用に加えて、Web ビュー埋め込みの形式でチャットリンクを埋め込むこともできます。

ただし、WebView 埋め込みフォームを使用すると、ユーザーがページを離れると、カスタマーサービスからの応答メッセージを受信できなくなります。

したがって、ユーザーがチャットページを離れた後にカスタマーサービスがメッセージに返信し、アプレットのサブスクリプションテンプレートを使用して通知する必要があります。

アプレットのバックグラウンドに移動し、サブスクリプションメッセージを開いて、テンプレートを選択しましょう。

公開テンプレートライブラリを検索し、「相談返信通知」を選択します。

フィールドを設定します。「返信内容」、「返信時間」、「回答者」の 3 つのフィールドが必要です。

これによりテンプレート ID が取得され、後でこのテンプレート ID を通じて送信します。

コードセクションへの参照

  <view class="listItem">
      <view class="right"><button type="primary" size="mini" bindtap="callKefu">在线咨询</button>
      </view>
    </view>
js部分。这里面就是拼接我的客服系统聊天界面链接，重要的是visitor_id参数部分，按照我的要求是   mini|商户ID|openid ，这样我在客服系统那里，好拿到openid去发送订阅消息

  //咨询店铺客服
  callKefu(){
    this.subReplyNotice();
     var url=app.globalData.apiUrl+"/chatIndex?kefu_id="+this.data.kefu_name+"&ent_id="+this.data.ent_id+"&visitor_name="+this.data.nickname+"&avator="+this.data.avatar+"&visitor_id=mini|"+this.data.ent_id+"|"+this.data.openid;
     wx.navigateTo({
      url: "/pages/index/kefu?url="+encodeURIComponent(url)
    })
  },
  //订阅回复通知
  subReplyNotice(){
    wx.requestSubscribeMessage({
      tmplIds: ['Hk0zWtbgl0aci6b0UIWSUBywYzaglNqkw0KhzkbEuN4'],
      success (res) {
        console.log(res)
        // res包含模板id，值包括'accept'、'reject'、'ban'、'filter'。
        // 'accept'表示用户同意订阅该条id对应的模板消息
        // 'reject'表示用户拒绝订阅该条id对应的模板消息
        // 'ban'表示已被后台封禁
        // 'filter'表示该模板因为模板标题同名被后台过滤。
      }
    })
  },
webview的嵌入页面 pages/index/kefu   

wxml部分

<!--pages/index/kefu.wxml-->
<view wx:if="{
      
      {url}}">
    <web-view  src="{
      
      {url}}"></web-view>
</view>
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    console.log(options.url);
    this.setData({
      url:decodeURIComponent(options.url),
    });
  },