{"id":33166,"date":"2024-11-25T09:48:19","date_gmt":"2024-11-25T01:48:19","guid":{"rendered":"https:\/\/fwq.ai\/blog\/33166\/"},"modified":"2024-11-25T09:48:19","modified_gmt":"2024-11-25T01:48:19","slug":"%e5%b0%8f%e7%a8%8b%e5%ba%8f%e6%80%8e%e4%b9%88%e5%af%bc%e5%85%a5sdk%e5%ae%9e%e7%8e%b0%e8%81%8a%e5%a4%a9%e5%8a%9f%e8%83%bd","status":"publish","type":"post","link":"https:\/\/fwq.ai\/blog\/33166\/","title":{"rendered":"\u5c0f\u7a0b\u5e8f\u600e\u4e48\u5bfc\u5165sdk\u5b9e\u73b0\u804a\u5929\u529f\u80fd"},"content":{"rendered":"

\"\u5c0f\u7a0b\u5e8f\u600e\u4e48\u5bfc\u5165sdk\u5b9e\u73b0\u804a\u5929\u529f\u80fd\u63d2\u56fe\"<\/p>\n

\u5c0f\u7a0b\u5e8f\u600e\u4e48\u5bfc\u5165sdk\u5b9e\u73b0\u804a\u5929\u529f\u80fd<\/strong><\/p>\n

\u9996\u5148\u4f7f\u7528npm\u8fdb\u884c\u4e0b\u8f7d\u817e\u8baf\u4e91\u7684\u5373\u65f6\u804a\u5929sdk\uff1b\u7136\u540e\u5728\u9879\u76ee\u4e2d\u8fdb\u884c\u5f15\u7528\u5e76\u8fdb\u884csdk\u521d\u59cb\u5316\uff1b\u518d\u6839\u636e\u540e\u53f0\u63a5\u53e3\u8fd4\u56deuserID\uff0cuserSig\u8fd9\u4e24\u4e2a\u53c2\u6570\u5224\u65ad\u5f53\u524d\u767b\u5f55\u4eba\u662f\u8c01\uff1b\u6700\u540e\u6839\u636e\u6587\u6863\u5b9e\u73b0\u57fa\u7840\u529f\u80fd\u5373\u53ef\u3002
<\/strong><\/p>\n

\u793a\u4f8b\u4ee3\u7801<\/p>\n

wxml\uff1a<\/p>\n

<scroll-view>\n  <!-- \u6bcf\u4e00\u884c -->\n  <view>\n    <!-- \u65e5\u671f -->\n    <view>{{item.msgTime}}<\/view>\n    <!-- \u5934\u50cf\u4e0e\u5185\u5bb9\u6587\u672c -->\n    <view>\n      <view>\n        <image><\/image>\n        <image><\/image>\n      <\/view>\n      <!-- \u753b\u5bf9\u8bdd\u6846 -->\n      <view><\/view>\n      <view>\n        <view>{{item.payload.text}}<\/view>\n        <image><\/image>\n        <view>\n          <view>\n            <image><\/image>\n            <view>\n              {{item.payload.second\n          <\/view>\n        <\/view>\n      <\/view>\n    <\/view>\n  <\/view><\/view><\/scroll-view><view>\n  <view>\n    <image><\/image>\n    <image><\/image>\n  <\/view>\n  <view>\n    <input>\n    <view>\n      {{touchBtn?'\u677e\u5f00 \u7ed3\u675f':'\u6309\u4f4f\u8bf4\u8bdd'}}\n    <\/view>\n  <\/view>\n  <view>\u53d1\u9001<\/view>\n  <view>\n    <image><\/image>\n  <\/view>\n  <!-- <view class=\"send\" bindtap=\"sendImg\">\u76f8\u518c<\/view>\n  <view class=\"send\" bindtap=\"startAudio\">\u5f00\u59cb<\/view>\n  <view class=\"send\" bindtap=\"endAudio\">\u7ed3\u675f<\/view> -->\n<\/view><view> \n  <view>\n    <view>\n      <image><\/image>\n    <\/view>\n    <view>\n      <text>\u76f8\u518c<\/text>\n    <\/view>\n  <\/view><\/view><\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
js\uff1a<\/p>\n
import TIM from 'tim-wx-sdk';\nimport COS from \"cos-wx-sdk-v5\";\nlet options = {\n  SDKAppID: 0 \/\/ \u63a5\u5165\u65f6\u9700\u8981\u5c060\u66ff\u6362\u4e3a\u60a8\u7684\u5373\u65f6\u901a\u4fe1 IM \u5e94\u7528\u7684 SDKAppID\n};\n\/\/ \u521b\u5efa SDK \u5b9e\u4f8b\uff0c`TIM.create()`\u65b9\u6cd5\u5bf9\u4e8e\u540c\u4e00\u4e2a `SDKAppID` \u53ea\u4f1a\u8fd4\u56de\u540c\u4e00\u4efd\u5b9e\u4f8b\nlet tim = TIM.create(options); \/\/ SDK \u5b9e\u4f8b\u901a\u5e38\u7528 tim \u8868\u793a\n\/\/ \u8bbe\u7f6e SDK \u65e5\u5fd7\u8f93\u51fa\u7ea7\u522b\uff0c\u8be6\u7ec6\u5206\u7ea7\u8bf7\u53c2\u89c1 setLogLevel \u63a5\u53e3\u7684\u8bf4\u660e\ntim.setLogLevel(1); \/\/ \u666e\u901a\u7ea7\u522b\uff0c\u65e5\u5fd7\u91cf\u8f83\u591a\uff0c\u63a5\u5165\u65f6\u5efa\u8bae\u4f7f\u7528\n\/\/ tim.setLogLevel(1); \/\/ release \u7ea7\u522b\uff0cSDK \u8f93\u51fa\u5173\u952e\u4fe1\u606f\uff0c\u751f\u4ea7\u73af\u5883\u65f6\u5efa\u8bae\u4f7f\u7528\n\/\/ \u6ce8\u518c COS SDK \u63d2\u4ef6\ntim.registerPlugin({\n  'cos-wx-sdk': COS\n});\nconst app = getApp()\nlet recorderManager = wx.getRecorderManager();\n\/\/ \u5f55\u97f3\u90e8\u5206\u53c2\u6570 \u5c0f\u7a0b\u5e8f\u6587\u6863\nconst recordOptions = {\n  duration: 60000, \/\/ \u5f55\u97f3\u7684\u65f6\u957f\uff0c\u5355\u4f4d ms\uff0c\u6700\u5927\u503c 600000\uff0810 \u5206\u949f\uff09\n  sampleRate: 44100, \/\/ \u91c7\u6837\u7387\n  numberOfChannels: 1, \/\/ \u5f55\u97f3\u901a\u9053\u6570\n  encodeBitRate: 192000, \/\/ \u7f16\u7801\u7801\u7387\n  format: 'aac' \/\/ \u97f3\u9891\u683c\u5f0f\uff0c\u9009\u62e9\u6b64\u683c\u5f0f\u521b\u5efa\u7684\u97f3\u9891\u6d88\u606f\uff0c\u53ef\u4ee5\u5728\u5373\u65f6\u901a\u4fe1 IM \u5168\u5e73\u53f0\uff08Android\u3001iOS\u3001\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u548cWeb\uff09\u4e92\u901a\n};\nPage({\n  data: {\n    friendId: '',\n    friendName: '',\n    friendAvatarUrl: '',\n    messages: [], \/\/ \u6d88\u606f\u96c6\u5408\n    complete: 0, \/\/ \u662f\u5426\u8fd8\u6709\u5386\u53f2\u6d88\u606f\u53ef\u4ee5\u62c9\u53d6\uff0c1 - \u8868\u793a\u6ca1\u6709\uff0c0 - \u8868\u793a\u6709\n    content: '', \/\/ \u8f93\u5165\u6846\u7684\u6587\u672c\u503c\n    lock: false, \/\/ \u53d1\u9001\u6d88\u606f\u9501 true - \u52a0\u9501\u72b6\u6001 false - \u89e3\u9501\u72b6\u6001\n    scroll_height: wx.getSystemInfoSync().windowHeight - 54,\n    reply_height: 0,\n    moreShow: true,\n    userData: [],\n    \n    audioPng:\"..\/image\/audio-play.png\",\n    audioGif:\"..\/image\/audio-play.gif\",\n    audioState:true,\n    \/**\n     * \u5386\u53f2\u6d88\u606f\u6d88\u606f\u96c6\u5408\uff08\u7ed3\u6784\u5982\u4e0b\uff09\uff1a\n     * nextReqMessageID \u7528\u4e8e\u7eed\u62c9\uff0c\u5206\u9875\u7eed\u62c9\u65f6\u9700\u4f20\u5165\u8be5\u5b57\u6bb5\u3002\n     * isCompleted \u8868\u793a\u662f\u5426\u5df2\u7ecf\u62c9\u5b8c\u6240\u6709\u6d88\u606f\u3002\n     *\/\n    nextReqMessageID: \"\",\n    isCompleted: \"\",\n    isFirstGetList: true,\n    audioContext: null,\n    opration: true,\n    touchBtn: false,\n    recording: false,\n    stopflag: false,\n    cancelRecord: false,\n    refreshTime: '',\n    ScrollLoading: 0,\n    audioIndex:null,\n    sendBtn:true\n  },\n  onLoad: function (options) {\n    \/\/ \n    this.setData({\n      friendId: options.friendId,\n      friendName: options.friendName,\n      friendAvatarUrl: options.friendAvatarUrl,\n      conversationID: options.conversationID\n    })\n    wx.setNavigationBarTitle({\n      title: options.friendName\n    })\n    var that = this\n    var userData = JSON.parse(wx.getStorageSync('userData'))\n    that.data.messages = [] \/\/ \u6e05\u7a7a\u5386\u53f2\u6d88\u606f\n    let audioContext = wx.createInnerAudioContext()\n    this.setData({\n      userData,\n      audioContext\n    })\n    \/\/ \u5c06\u67d0\u4f1a\u8bdd\u4e0b\u6240\u6709\u672a\u8bfb\u6d88\u606f\u5df2\u8bfb\u4e0a\u62a5\n    let promise = tim.setMessageRead({ conversationID: options.conversationID });\n    promise.then(function (imResponse) {\n      \/\/ \u5df2\u8bfb\u4e0a\u62a5\u6210\u529f\n    }).catch(function (imError) {\n      \/\/ \u5df2\u8bfb\u4e0a\u62a5\u5931\u8d25\n    });\n  },\n  onShow: function () {\n    let that = this;\n    \/\/ \u83b7\u53d6\u5f53\u524d\u804a\u5929\u7684\u5386\u53f2\u5217\u8868\n    that.getMessageList();\n    that.scrollToBottom();\n    \/\/ \u83b7\u53d6\u6536\u5230\u7684\u5355\u804a\u4fe1\u606f\n    let onMessageReceived = function (event) {\n      \/\/ event.data - \u5b58\u50a8 Message \u5bf9\u8c61\u7684\u6570\u7ec4 - [Message]\n      let msgList = that.data.messages\n      handlerHistoryMsgs(event.data, that)\n      that.scrollToBottom();\n    };\n    tim.on(TIM.EVENT.MESSAGE_RECEIVED, onMessageReceived)\n    \/\/ \u76d1\u542c\u5f55\u97f3\u7ed3\u675f\n    recorderManager.onStop(function (res) {\n      if (that.data.recording) {\n        if (that.data.cancelRecord) {\n          wx.hideToast()\n          that.setData({\n            cancelRecord: false\n          })\n        } else {\n          \/\/ \u521b\u5efa\u6d88\u606f\u5b9e\u4f8b\uff0c\u63a5\u53e3\u8fd4\u56de\u7684\u5b9e\u4f8b\u53ef\u4ee5\u4e0a\u5c4f\n          const message = tim.createAudioMessage({\n            to: that.data.friendId,\n            conversationType: TIM.TYPES.CONV_C2C,\n            payload: {\n              file: res\n            },\n            onProgress: function (event) { }\n          });\n          \/\/  \u53d1\u9001\u6d88\u606f\n          let promise = tim.sendMessage(message);\n          promise.then(function (imResponse) {\n            \/\/ \u53d1\u9001\u6210\u529f\n            that.addMessage(imResponse.data.message, that)\n          }).catch(function (imError) {\n            \/\/ \u53d1\u9001\u5931\u8d25\n          });\n          that.setData({\n            recording: false\n          })\n        }\n      } else {\n        wx.showToast({\n          title: '\u8bf4\u8bdd\u65f6\u95f4\u592a\u77ed',\n          duration: 1000,\n          image: '..\/image\/err.png'\n        })\n      }\n    });\n  },\n  onUnload: function () {\n  },\n  \/**\n   * \u83b7\u53d6\u6d88\u606f\u5217\u8868\n   *\/\n  getMessageList() {\n    let that = this;\n    let cb = tim.getMessageList({\n      conversationID: conversationID,\/\/\u4f1a\u8bdd\u5217\u8868\u4f20\u9012\u8fc7\u6765\u7684\u53c2\u6570\n      count: 15\n    })\n    cb.then(function (imResponse) {\n      const messageList = imResponse.data.messageList; \/\/ \u6d88\u606f\u5217\u8868\u3002\n      const nextReqMessageID = imResponse.data.nextReqMessageID; \/\/ \u7528\u4e8e\u7eed\u62c9\uff0c\u5206\u9875\u7eed\u62c9\u65f6\u9700\u4f20\u5165\u8be5\u5b57\u6bb5\u3002\n      const isCompleted = imResponse.data.isCompleted; \/\/ \u8868\u793a\u662f\u5426\u5df2\u7ecf\u62c9\u5b8c\u6240\u6709\u6d88\u606f\u3002\n      that.setData({\n        nextReqMessageID: nextReqMessageID,\n        isCompleted: isCompleted\n      })\n      handlerHistoryMsgs(messageList, that);\n      that.scrollToBottom();\n    });\n  },\n  \/**\n   * \u83b7\u53d6\u6587\u672c\u7684\u6d88\u606f\n   *\/\n  getContent: function (e) {\n    if(e.detail.value ==\"\"){\n      this.setData({sendBtn:true})\n    }else{\n      this.setData({sendBtn:false})\n    }\n    console.log(e)\n    var that = this;\n    that.setData({\n      content: e.detail.value\n    })\n  },\n  \/**\n   * \u53d1\u9001\u6d88\u606f\n   *\/\n  sendMsg: function (e) {\n    if(this.data.content ==\"\"){\n      wx.showToast({\n        title: '\u8bf7\u8f93\u5165\u5185\u5bb9',\n        duration: 1000,\n        icon:'none'\n      })\n      return\n    }\n    var that = this\n    \/\/ \u53d1\u9001\u6587\u672c\u6d88\u606f\uff0cWeb \u7aef\u4e0e\u5c0f\u7a0b\u5e8f\u7aef\u76f8\u540c\n    \/\/ 1. \u521b\u5efa\u6d88\u606f\u5b9e\u4f8b\uff0c\u63a5\u53e3\u8fd4\u56de\u7684\u5b9e\u4f8b\u53ef\u4ee5\u4e0a\u5c4f\n    let message = tim.createTextMessage({\n      to: this.data.friendId,\n      conversationType: TIM.TYPES.CONV_C2C,\n      payload: {\n        text: this.data.content\n      }\n    });\n    \/\/ 2. \u53d1\u9001\u6d88\u606f\n    let promise = tim.sendMessage(message);\n    promise.then(function (imResponse) {\n      \/\/ \u53d1\u9001\u6210\u529f\n      that.addMessage(imResponse.data.message, that)\n      that.setData({sendBtn:true})\n    }).catch(function (imError) {\n      \/\/ \u53d1\u9001\u5931\u8d25\n    });\n  },\n  \/**\n   * \u5237\u65b0\u6587\u672c\u6d88\u606f\n   *\/\n  addMessage: function (msg, that) {\n    var messages = that.data.messages;\n    messages.push(msg);\n    that.setData({\n      messages: messages,\n      content: '' \/\/ \u6e05\u7a7a\u8f93\u5165\u6846\u6587\u672c\n    })\n    that.scrollToBottom();\n  },\n  \/**\n   * \u53d1\u9001\u56fe\u7247\u6d88\u606f\n   *\/\n  sendImg() {\n    let that = this;\n    wx.chooseImage({\n      sourceType: ['album'], \/\/ \u4ece\u76f8\u518c\u9009\u62e9\n      count: 1, \/\/ \u53ea\u9009\u4e00\u5f20\uff0c\u76ee\u524d SDK \u4e0d\u652f\u6301\u4e00\u6b21\u53d1\u9001\u591a\u5f20\u56fe\u7247\n      success: function (res) {\n        \/\/ 2. \u521b\u5efa\u6d88\u606f\u5b9e\u4f8b\uff0c\u63a5\u53e3\u8fd4\u56de\u7684\u5b9e\u4f8b\u53ef\u4ee5\u4e0a\u5c4f\n        let message = tim.createImageMessage({\n          to: that.data.friendId,\n          conversationType: TIM.TYPES.CONV_C2C,\n          payload: {\n            file: res\n          },\n          onProgress: function (event) {\n          }\n        });\n        \/\/ 3. \u53d1\u9001\u56fe\u7247\n        let promise = tim.sendMessage(message);\n        promise.then(function (imResponse) {\n          \/\/ \u53d1\u9001\u6210\u529f\n          that.addMessage(imResponse.data.message, that)\n        }).catch(function (imError) {\n          \/\/ \u53d1\u9001\u5931\u8d25\n        });\n      }\n    })\n  },\n  scrollToBottom: function () {\n    this.setData({\n      toView: 'row_' + (this.data.messages.length - 1)\n    });\n  },\n  previewImage(e) {\n    let src = '';\n    wx.previewImage({\n      current: e.currentTarget.dataset.src, \/\/ \u5f53\u524d\u663e\u793a\u56fe\u7247\u7684http\u94fe\u63a5\n      urls: [e.currentTarget.dataset.src]\n    })\n  },\n  \/\/ \u5f55\u5236\u8bed\u97f3\n  startAudio: function () {\n    wx.showToast({\n      title: '\u4e0a\u6ed1\u53d6\u6d88\u53d1\u9001',\n      duration: 10000,\n      image: '..\/image\/cancel.png'\n    })\n    this.setData({\n      touchBtn: true\n    })\n    if (this.data.stopFlag) {\n      return;\n    }\n    recorderManager.start(recordOptions);\n    recorderManager.onError(function (errMsg) {\n    });\n  },\n  \/\/ # \u5229\u7528\u957f\u6309\u5224\u65ad\u5f55\u97f3\u662f\u5426\u592a\u77ed\n  onLongpress() {\n    this.setData({\n      recording: true\n    })\n  },\n  \/\/ \u53d1\u9001\u5f55\u97f3\n  onTouchEnd: function () {\n    wx.hideToast()\n    let that = this;\n    that.setData({\n      touchBtn: false\n    })\n    if (that.data.stopFlag) {\n      return;\n    }\n    if (that.data.recording) {\n      recorderManager.stop();\n    } else {\n      that.setData({\n        stopFlag: true\n      })\n      setTimeout(() =&gt; {\n        recorderManager.stop();\n        that.setData({\n          stopFlag: false\n        })\n      }, 400);\n    }\n  },\n  \/\/ \u64ad\u653e\u8bed\u97f3\n  openAudio(audio) {\n    console.log(audio)\n    let index = audio.currentTarget.dataset.eventid\n    this.setData({\n      audioIndex:index\n      \/\/ audioState:false\n    })\n    this.data.audioContext.src = audio.currentTarget.dataset.comkey\n    this.data.audioContext.autoplay = true;\n    this.data.audioContext.play()\n    this.data.audioContext.onPlay((res) =&gt; {\n    })\n    this.data.audioContext.onEnded(() =&gt; {\n      wx.hideToast()\n      this.setData({\n        audioIndex:null\n      })\n      console.log(\"\u8bed\u97f3\u7ed3\u675f\u4e86\")\n    })\n    this.data.audioContext.onError((res) =&gt; {\n    })\n  },\n  \/\/ \u4e0a\u6ed1\u53d6\u6d88\n  onTouchMove(e) {\n    if (e.touches[0].clientY  {\n        let promise = tim.getMessageList({ conversationID: that.data.conversationID, nextReqMessageID: that.data.nextReqMessageID, count: 15 });\n        promise.then(function (imResponse) {\n          const newMessageList = imResponse.data.messageList; \/\/ \u6d88\u606f\u5217\u8868\u3002\n          const nextReqMessageID = imResponse.data.nextReqMessageID; \/\/ \u7528\u4e8e\u7eed\u62c9\uff0c\u5206\u9875\u7eed\u62c9\u65f6\u9700\u4f20\u5165\u8be5\u5b57\u6bb5\u3002\n          const isCompleted = imResponse.data.isCompleted; \/\/ \u8868\u793a\u662f\u5426\u5df2\u7ecf\u62c9\u5b8c\u6240\u6709\u6d88\u606f\u3002\n          that.setData({\n            nextReqMessageID: nextReqMessageID,\n            isCompleted: isCompleted,\n            messages: newMessageList.concat(that.data.messages)\n          })\n          wx.hideLoading()\n          that.setData({ ScrollLoading: 0 })\n          \/\/ handlerHistoryMsgs(messageList, that);\n        });\n      }, 800);\n    }\n    \/\/ setTimeout(function(){\n    \/\/   var date = new Date();\n    \/\/ },300);\n  },\n  \/\/ \u5207\u6362\n  Audio() {\n    this.setData({\n      opration: false\n    })\n  },\n  keyboard() {\n    this.setData({\n      opration: true\n    })\n  },\n  moreClick() {\n    if (this.data.moreShow) {\n      this.setData({\n        moreShow: false,\n        reply_height: 92,\n        scroll_height: this.data.scroll_height - 92\n      })\n    }\n  },\n  bindfocus() {\n    this.setData({\n      moreShow: true,\n      reply_height: 0,\n      scroll_height: wx.getSystemInfoSync().windowHeight - 54\n    })\n  }\n})\n\/**\n * \u5904\u7406\u5386\u53f2\u6d88\u606f \n *\/\nfunction handlerHistoryMsgs(result, that) {\n  var historyMsgs = that.data.messages;\n  result.forEach(item =&gt; {\n    historyMsgs.push(item)\n  })\n  \/\/ historyMsgs.push(result[0])\n  that.setData({\n    messages: historyMsgs,\n  })\n    \/\/ \u5c06\u67d0\u4f1a\u8bdd\u4e0b\u6240\u6709\u672a\u8bfb\u6d88\u606f\u5df2\u8bfb\u4e0a\u62a5\n    let promise = tim.setMessageRead({ conversationID: that.data.conversationID });\n    promise.then(function (imResponse) {\n      \/\/ \u5df2\u8bfb\u4e0a\u62a5\u6210\u529f\n    }).catch(function (imError) {\n      \/\/ \u5df2\u8bfb\u4e0a\u62a5\u5931\u8d25\n    });\n}<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
wxss\uff1a<\/p>\n
\/** \u804a\u5929\u7a97\u53e3\u6837\u5f0f\n * 54px\u4e3a\u56de\u590d\u6846\u9ad8\u5ea6\uff0cjs\u540c\n *\/\n\/*\u804a\u5929\u8bb0\u5f55*\/\npage{\n  background: rgb(245, 245, 245);\n}\n.message-list {\n  \/*margin-bottom: 54px;*\/\n  background: rgb(235, 235, 235);\n}\n\/*\u5355\u5143\u884c*\/\n.row {\n  display: flex;\n  flex-direction: column;\n  margin: 0 30rpx;\n}\n\/*\u65e5\u671f*\/\n.datetime {\n  font-size: 10px;\n  padding: 10px 0;\n  color: #999;\n  text-align: center;\n}\n.send {\n  font-size: 15px;\n  \/* padding-right: 10px; *\/\n  color: #999;\n  text-align: center;\n  height: 70%;\n  border: 1px solid #e4dfdf;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 90rpx;\n  border-radius: 10rpx;\n}\n.sendActive {\n  font-size: 15px;\n  \/* padding-right: 10px; *\/\n  color: #fff;\n  text-align: center;\n  height: 70%;\n  border: 1px solid #05c15f;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 90rpx;\n  border-radius: 10rpx;\n  background-color: #05c15f;\n}\n.Audio {\n  font-size: 15px;\n  color: #999;\n  text-align: center;\n  padding-left: 10rpx;\n}\n.Audio image {\n  width: 50rpx;\n  height: 50rpx;\n}\n.add {\n  height: 70%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 90rpx;\n}\n.more {\n  width: 50rpx;\n  height: 50rpx;\n}\n\/*\u4e3b\u4f53*\/\n.body {\n  display: flex;\n  flex-direction: row;\n  align-items: flex-start;\n  justify-content: flex-start;\n  width: 100%;\n  margin-top: 10px;\n}\n\/*\u5934\u50cf\u5bb9\u5668*\/\n.body.avatar-container {\n  width: 20%;\n}\n\/*\u5934\u50cf*\/\n.body .avatar {\n  width: 80rpx;\n  height: 80rpx;\n  border-radius: 50%;\n  margin: 0 20rpx;\n}\n\/*\u6587\u672c\u6d88\u606f*\/\n.body .content {\n  font-size: 16px;\n  background: #fff;\n  border-radius: 5px;\n  padding: 10px;\n  line-height: 22px;\n  margin-bottom: 10px;\n  word-wrap: break-word;\n  max-width: 300rpx;\n}\n\/* \u4e09\u89d2\u7bad\u5934 *\/\n.body .triangle {\n  background: white;\n  width: 20rpx;\n  height: 20rpx;\n  margin-top: 26rpx;\n  transform: rotate(45deg);\n  position: absolute;\n}\n\/*\u56fe\u7247\u6d88\u606f*\/\n.picture {\n  width: 160px;\n}\n\/*\u56de\u590d\u6846*\/\n.reply {\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  align-items: center;\n  position: fixed;\n  \/* bottom: 0; *\/\n  width: 100%;\n  height: 54px;\n  border-top: 1px solid rgb(215, 215, 215);\n  background: rgb(245, 245, 245);\n}\n.reply .voice-image {\n  width: 25px;\n  height: 25px;\n  margin-left: 3%;\n}\n\/*\u6587\u672c\u8f93\u5165\u6216\u8bed\u97f3\u5f55\u5165*\/\n.reply .opration-area {\n  flex: 1;\n  padding: 8px;\n}\n\/*\u56de\u590d\u6587\u672c\u6846*\/\n.reply input {\n  background: rgb(252, 252, 252);\n  height: 36px;\n  border: 1px solid rgb(221, 221, 221);\n  border-radius: 6px;\n  padding-left: 3px;\n}\n\/*\u9009\u53d6\u56fe\u7247*\/\n.reply .choose-image {\n  width: 25px;\n  height: 25px;\n  margin-right: 3%;\n}\n\/*\u6309\u4f4f\u8bf4\u8bddbutton*\/\n.voice-button {\n  height: 36px;\n  color: #818181;\n  font-size: 14px;\n  line-height: 36px;\n  text-align: center;\n  border: 1px solid #e4dfdf;\n  border-radius: 10rpx;\n}\n\/*\u60ac\u6d6e\u63d0\u793a\u6846*\/\n.hud-container {\n  position: fixed;\n  width: 150px;\n  height: 150px;\n  left: 50%;\n  top: 50%;\n  margin-left: -75px;\n  margin-top: -75px;\n}\n\/*\u80cc\u666f\u5c42*\/\n.hud-background {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n  background: #999;\n  opacity: 0.8;\n  z-index: 11;\n  border-radius: 10px;\n}\n\/*\u60ac\u6d6e\u6846\u4e3b\u4f53*\/\n.hud-body {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  z-index: 19;\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  align-items: center;\n}\n\/*\u56fe\u6807*\/\n.hud-body image {\n  margin-top: 20px;\n  width: 80px;\n  height: 80px;\n}\n\/*\u6587\u5b57*\/\n.hud-body .tip {\n  color: #fff;\n  text-align: center;\n  width: 90%;\n  line-height: 34px;\n  margin: 0 auto;\n  margin-bottom: 10px;\n  width: 90%;\n}\n.hud-body .warning {\n  background: #c33;\n  border-radius: 5px;\n}\n.image-message {\n  max-width: 100%;\n  border-radius: 4rpx;\n}\n.box {\n  display: flex;\n  height: 40rpx;\n  line-height: 40rpx;\n}\n.hoverBtn {\n  background-color: rgb(226, 220, 220);\n  color: #fff;\n  border-radius: 10rpx;\n}\n.more_box {\nheight: 138rpx;\nwidth: 100%;\npadding: 15rpx;\ndisplay: flex;\nbackground: rgb(245, 245, 245);\nposition: fixed;\nbottom: 0;\n}\n.more_item {\n  text-align: center;\n  height: 150rpx;\n  font-size: 24rpx;\n  margin-left: 26rpx\n}\n.img_box {\n  width: 80rpx;\n  height: 84rpx;\n  background-color: #fff;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  border-radius: 10rpx;\n}\n.img_box image {\n  width: 40rpx;\n  height: 40rpx;\n}<\/pre>\n
 \u767b\u5f55\u540e\u590d\u5236 <\/p>\n
\u63a8\u8350\u6559\u7a0b\uff1a\u300a\u300b<\/p>\n
\u4ee5\u4e0a\u5c31\u662f\u5c0f\u7a0b\u5e8f\u600e\u4e48\u5bfc\u5165sdk\u5b9e\u73b0\u804a\u5929\u529f\u80fd\u7684\u8be6\u7ec6\u5185\u5bb9\uff0c\u66f4\u591a\u8bf7\u5173\u6ce8\u7c73\u4e91\u5176\u5b83\u76f8\u5173\u6587\u7ae0\uff01<\/p>\n","protected":false},"excerpt":{"rendered":"
\u5c0f\u7a0b\u5e8f\u600e\u4e48\u5bfc\u5165sdk\u5b9e\u73b0\u804a\u5929\u529f\u80fd \u9996\u5148\u4f7f\u7528npm\u8fdb\u884c\u4e0b\u8f7d\u817e\u8baf\u4e91\u7684\u5373\u65f6\u804a\u5929sdk\uff1b\u7136\u540e\u5728\u9879\u76ee\u4e2d\u8fdb\u884c\u5f15\u7528\u5e76\u8fdb\u884csdk\u521d\u59cb\u5316\uff1b\u518d\u6839\u636e\u540e\u53f0\u63a5\u53e3\u8fd4\u56deuserID\uff0cuserSig\u8fd9\u4e24\u4e2a\u53c2\u6570\u5224\u65ad\u5f53\u524d\u767b\u5f55\u4eba\u662f\u8c01\uff1b\u6700\u540e\u6839\u636e\u6587\u6863\u5b9e\u73b0\u57fa\u7840\u529f\u80fd\u5373\u53ef\u3002 \u793a\u4f8b\u4ee3\u7801 wxml\uff1a <scroll-view>   <!– \u6bcf\u4e00\u884c –>   <view>     <!– \u65e5\u671f –>     <view>{{item.msgTime}}<\/view>     <!– \u5934\u50cf\u4e0e\u5185\u5bb9\u6587\u672c –>     <view>       <view>         <image><\/image>         <image><\/image>       <\/view>       <!– \u753b\u5bf9\u8bdd\u6846 –>       <view><\/view>       <view>         <view>{{item.payload.text}}<\/view>         <image><\/image>         <view>           <view>             <image><\/image>             <view>               {{item.payload.second           <\/view>         <\/view>       <\/view>     <\/view>   <\/view><\/view><\/scroll-view><view>   <view>     <image><\/image>     <image><\/image>   <\/view>   <view>     <input>     <view>       {{touchBtn?’\u677e\u5f00 \u7ed3\u675f’:’\u6309\u4f4f\u8bf4\u8bdd’}}     <\/view>   <\/view>   <view>\u53d1\u9001<\/view>   <view>     <image><\/image>   <\/view>   <!– <view class=”send” […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[19],"tags":[],"class_list":["post-33166","post","type-post","status-publish","format-standard","hentry","category-19"],"_links":{"self":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/33166","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/comments?post=33166"}],"version-history":[{"count":0,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/posts\/33166\/revisions"}],"wp:attachment":[{"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/media?parent=33166"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/categories?post=33166"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fwq.ai\/blog\/wp-json\/wp\/v2\/tags?post=33166"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}