小程序中如何實現即時通信聊天功能？

原創 Cherish_zzj 2018-08-22 09:56

項目背景：小程序中實現實時聊天功能

 

一、服務器域名配置

配置流程

配置參考URL：https://developers.weixin.qq.com/miniprogram/dev/api/api-network.html

二、nginx中配置反向代理加密websocket(wss)

upstream websocket{
	hash $remote_addr consistent;
	server 127.0.0.1:9090 weight=5 max_fails=3 fail_timeout=30s;
}

server {
 	listen  80;
    server_name www.xxxx.cn;
   rewrite ^(.*)$  https://$host$1 permanent;
}

server
	{	
 		listen 443;
	    server_name www.xxxx.cn;
	    ssl on;
	    root  /home/wwwroot/yzcp;
	    index index.php index.html index.htm;
	    ssl_certificate   /usr/local/nginx/conf/cert/1526060965511.pem;#這裏是服務端證書路徑
	    ssl_certificate_key  /usr/local/nginx/conf/cert/1526060965511.key;#這裏是密鑰路徑
	    ssl_session_timeout 5m;
	    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
	    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
	    ssl_prefer_server_ciphers on;
	    ssl_verify_client off;


 		#隱藏index.php
        location / {
			#index index.php;
			deny 127.0.0.1;
            if (!-e $request_filename) {
               #一級目錄
               rewrite ^(.*)$ /index.php?s=$1 last;
               break;
            }

            #wss配置
            client_max_body_size 100m;
            proxy_redirect off;
            proxy_pass http://websocket;#反向代理轉發地址
            proxy_set_header Host $host;# http請求的主機域名
            proxy_set_header X-Real-IP $remote_addr;# 遠程真實IP地址
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;#反向代理之後轉發之前的IP地址
            proxy_read_timeout 604800s;#websocket心跳時間，默認是60s
            proxy_http_version 1.1;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection "Upgrade";
        }

        location ~ .+\.php {
            fastcgi_pass  unix:/tmp/php-cgi.sock;
            fastcgi_index index.php;
            include fastcgi_params;
            set $path_info "";
            set $real_script_name $fastcgi_script_name;
                if ($fastcgi_script_name ~ "^(.+?\.php)(/.+)$") {
                set $real_script_name $1;
                set $path_info $2;
            }
            fastcgi_param SCRIPT_FILENAME $document_root$real_script_name;
            fastcgi_param SCRIPT_NAME $real_script_name;
            fastcgi_param PATH_INFO $path_info;
       	}
		
                
       	#防盜鏈開始
        location ~ .*\.(gif|jpg|jpeg|png|bmp|swf)$
		{
			expires      30d;
		}

		location ~ .*\.(js|css)?$
			{
				expires      12h;
			}
		access_log  /home/wwwlogs/www1537ucn.log;
	}

三、安裝swoole

編譯安裝:

wget http://pecl.php.net/get/swoole-1.9.3.tgz      //下載swoole    

tar -zvxf swoole-1.9.3.tgz       //解壓swoole

cd swoole-1.9.3/;        //進入swoole

/usr/local/php54/bin/phpize;        //生成configure

./configure --with-php-config=/usr/local/php/bin/php-config

make && make install            //安裝

cd /phpstudy/server/php/lib/php/extensions/no-debug-non-zts-20121212    //查看是否安轉上了swoole.so    (注意：此文件下邊都是你安裝的拓展)

vim /phpstudy/server/php/etc/php.ini     //在php.ini添加extension=swoole.so加入到文件最後一行

lnmp restart;   //重啓nginx  

php -m; //查看phpinfo,這時候swoole拓展已經裝上了

 

四、服務器端運行程序

1、創建server.php放到項目的根目錄即可

<?php
//實例化一個swoole的websocket服務監聽本機的9501端口
$server = new swoole_websocket_server("服務器IP", 9090);
//只需要綁定要監聽的ip和端口。如果ip指定爲127.0.0.1，則表示客戶端只能位於本機才能連接，其他計算機無法連接。
//端口這裏指定爲9090，可以通過netstat查看下該端口是否被佔用。如果該端口被佔用，可更改爲其他端口，如9502，9503等。

$server->on('open', function (swoole_websocket_server $server, $request) {
    echo "你好連接成功{$request->fd}\n";
});

$server->on('message', function (swoole_websocket_server $server, $frame) {
    foreach($server->connections as $key => $fd) {
        $user_message = $frame->data;
        $server->push($fd, $user_message);
    }
});

$server->on('close', function ($ser, $fd) {
    echo "client {$fd} closed\n";
});

$server->start();
?>

2、由於swoole_server只能運行在CLI模式下，所以不要試圖通過瀏覽器進行訪問，這樣是無效的,我們在命令行下面執行,注意一定要找到php的絕對路徑php  server.php  （這行代碼的意思是，把程序在服務器跑起來）

注意：php server.php命令運行後，下面的黑框關閉後將無法聊天。所以一般使用命令：nohup php server.php &

五、客戶端

1、網頁代碼

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>聊天</title>
    <style type="text/css">
        #show{
            width: 600px;
            height: 300px;
            overflow-y: scroll;
        }
        .my-message{
            background-color: rgba(105, 105, 105, 0.64);
            color: #9e0505;
            width: 200px;
            float: right;
            padding: 10px;
        }
        .other-message{
            background-color: rgba(105, 105, 105, 0.64);
            color: #9e0505;
            width: 200px;
            float: left;
            padding: 10px;
        }
    </style>
</head>
<body>
    <div id="show"></div>
    <div class="panel">
        內容：<textarea id="content"></textarea>
        收信人：<input type="text" id="touser">
        <input type="button" id="send-btn" value="發送">
        <input type="button" id="close-btn" value="關閉">
    </div>
</body>
<script src="__PUBLIC__/js/jquery-1.10.2.min.js" charset="utf-8"></script>
<script type="text/javascript">
    var socket = new WebSocket("wss://域名");

    $("#close-btn").click(function () {
        socket.close();
    })

    $("#send-btn").click(function () {
        var touser = $("#touser").val();
        var content = $("#content").val();
        var htmlstr = "<div><p class='my-message'>我："+content+"</p></div>";

        $("#show").append(htmlstr);
        socket.send(content+"@"+touser);
    })
    
    socket.onmessage = function (p1) {
        var htmlstr = "<div><p class='other-message'>"+p1.data+"</p></div>";
        $("#show").append(htmlstr);
    }
</script>
</html>

2、小程序端的代碼

Uitls/websocket.js：

var url = 'wss://www.xxx.cn';//服務器地址

function connect(user, func) {
  wx.connectSocket({
    url: url,
    header: { 'content-type': 'application/json' },
    success: function () {
      console.log('websocket連接成功~')
    },

    fail: function () {
      console.log('websocket連接失敗~')
    }
  })

  wx.onSocketOpen(function (res) {
    wx.showToast({
      title: 'websocket已開通~',
      icon: "success",
      duration: 2000
    })

    //接受服務器消息
    wx.onSocketMessage(func);//func回調可以拿到服務器返回的數據
  });

  wx.onSocketError(function (res) {
    wx.showToast({
      title: 'websocket連接失敗，請檢查！',
      icon: "none",
      duration: 2000
    })
  })
}

//發送消息
function send(msg) {
  wx.sendSocketMessage({
    data: msg
  });
}

module.exports = {
  connect: connect,
  send: send
}

JS：

// pages/socks/socks.js
const app = getApp()
var websocket = require('../../utils/websocket.js');
var utils = require('../../utils/util.js');

Page({
  /**
  * 頁面的初始數據
  */

  data: {
    newslist: [],
    userInfo: {},
    scrollTop: 0,
    increase: false,//圖片添加區域隱藏
    aniStyle: true,//動畫效果
    message: "",
    previewImgList: []
  },

  /**
  * 生命週期函數--監聽頁面加載
  */

  onLoad: function () {
    var that = this
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo
      })
    }

    //調通接口

    websocket.connect(this.data.userInfo, function (res) {
      // console.log(JSON.parse(res.data))
      var list = []
      list = that.data.newslist
      list.push(JSON.parse(res.data))
      that.setData({
        newslist: list
      })
    })
  },

  // 頁面卸載
  onUnload() {
    wx.closeSocket();
    wx.showToast({
      title: '連接已斷開~',
      icon: "none",
      duration: 2000
    })
  },

  //事件處理函數
  send: function () {
    var flag = this
    if (this.data.message.trim() == "") {
      wx.showToast({
        title: '消息不能爲空哦~',
        icon: "none",
        duration: 2000
      })
    } else {
      setTimeout(function () {
        flag.setData({
          increase: false
        })
      }, 500)

      websocket.send('{ "content": "' + this.data.message + '", "date": "' + utils.formatTime(new Date()) + '","type":"text", "nickName": "' + this.data.userInfo.nickName + '", "avatarUrl": "' + this.data.userInfo.avatarUrl + '" }')
      this.bottom()
    }
  },

  //監聽input值的改變
  bindChange(res) {
    this.setData({
      message: res.detail.value
    })
  },

  cleanInput() {
    //button會自動清空，所以不能再次清空而是應該給他設置目前的input值
    this.setData({
      message: this.data.message
    })
  },

  increase() {
    this.setData({
      increase: true,
      aniStyle: true
    })
  },

  //點擊空白隱藏message下選框
  outbtn() {
    this.setData({
      increase: false,
      aniStyle: true
    })
  },

  //發送圖片
  chooseImage() {
    var that = this
    wx.chooseImage({
      count: 1, // 默認9
      sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認二者都有
      sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，默認二者都有
      success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath可以作爲img標籤的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths
        // console.log(tempFilePaths)
        wx.uploadFile({
          url: 'wss://www.xxx.cn', //服務器地址
          filePath: tempFilePaths[0],
          name: 'file',
          headers: {
            'Content-Type': 'form-data'
          },

          success: function (res) {
            if (res.data) {
              that.setData({
                increase: false
              })
              websocket.send('{"images":"' + res.data + '","date":"' + utils.formatTime(new Date()) + '","type":"image","nickName":"' + that.data.userInfo.nickName + '","avatarUrl":"' + that.data.userInfo.avatarUrl + '"}')
              that.bottom()
            }
          }
        })
      }
    })
  },

  //圖片預覽
  previewImg(e) {
    var that = this
    //必須給對應的wxml的image標籤設置data-set=“圖片路徑”，否則接收不到
    var res = e.target.dataset.src
    var list = this.data.previewImgList //頁面的圖片集合數組
    //判斷res在數組中是否存在，不存在則push到數組中, -1表示res不存在
    if (list.indexOf(res) == -1) {
      this.data.previewImgList.push(res)
    }

    wx.previewImage({
      current: res, // 當前顯示圖片的http鏈接
      urls: that.data.previewImgList // 需要預覽的圖片http鏈接列表
    })
  },

  //聊天消息始終顯示最底端
  bottom: function () {
    var query = wx.createSelectorQuery()
    query.select('#flag').boundingClientRect()
    query.selectViewport().scrollOffset()
    query.exec(function (res) {
      wx.pageScrollTo({
        scrollTop: res[0].bottom // #the-id節點的下邊界座標
      })
      res[1].scrollTop // 顯示區域的豎直滾動位置
    })
  },
})

WXML:

<!--pages/socks/socks.wxml-->
<view class="news" bindtap='outbtn'>
 
<view class="chat-notice" wx:if="{{userInfo}}">系統消息: 歡迎 {{ userInfo.nickName }} 加入聊天室</view>
 
<view class="historycon">
 
<scroll-view scroll-y="true" class="history" scroll-top="{{scrollTop}}">
 
<block wx:for="{{newslist}}" wx:key>
 
    <!-- 歷史消息 -->
 
<!-- <view class="chat-news">
<view style="text-align: left;padding-left: 20rpx;">
<image class='new_img' src="{{item.avatarUrl? item.avatarUrl:'images/avator.png'}}"></image>
<text class="name">{{ item.nickName }}{{item.date}}</text>
</view>
<view class='you_left'>
<block wx:if="{{item.type=='text'}}">
<view class='new_txt'>{{item.content}}</view>
</block>
<block wx:if="{{item.type=='image'}}">
<image class="selectImg" src="{{item.images}}"></image>
</block>
</view>
</view> -->
 
<view>{{item.date}}</view>
 
<!--自己的消息 -->
 
<view class="chat-news" wx:if="{{item.nickName == userInfo.nickName}}">
 
<view style="text-align: right;padding-right: 20rpx;">
 
<text class="name">{{ item.nickName }}</text>
 
<image class='new_img' src="{{userInfo.avatarUrl}}"></image>
 
</view>
 
<view class='my_right'>
 
<block wx:if="{{item.type=='text'}}">
 
<view class='new_txt'>{{item.content}}</view>
 
</block>
 
<block wx:if="{{item.type=='image'}}">
 
<image class="selectImg" src="{{item.images}}" data-src="{{item.images}}" lazy-load="true" bindtap="previewImg"></image>
 
</block>
 
</view>
 
</view>
 
<!-- 別人的消息 -->
 
<view class="chat-news" wx:else>
 
<view style="text-align: left;padding-left: 20rpx;">
 
<image class='new_img' src="{{item.avatarUrl? item.avatarUrl:'images/avator.png'}}"></image>
 
<text class="name">{{ item.nickName }}</text>
 
</view>
 
<view class='you_left'>
 
<block wx:if="{{item.type=='text'}}">
 
<view class='new_txt'>{{item.content}}</view>
 
</block>
 
<block wx:if="{{item.type=='image'}}">
 
<image class="selectImg" src="{{item.images}}" data-src="{{item.images}}" lazy-load="true" bindtap="previewImg"></image>
 
</block>
 
</view>
 
</view>
 
</block>
 
</scroll-view>
 
</view>
 
</view>
 
<view id="flag"></view>
 
<!-- 聊天輸入 -->
 
<view class="message">
 
<form bindreset="cleanInput" class="sendMessage">
 
<input type="text" placeholder="請輸入聊天內容.." value="{{massage}}" bindinput='bindChange'></input>
 
<view class="add" bindtap='increase'>+</view>
 
<button type="primary" bindtap='send' formType="reset" size="small" button-hover="blue">發送</button>
 
</form>
 
<view class='increased {{aniStyle?"slideup":"slidedown"}}' wx:if="{{increase}}">
 
<view class="image" bindtap='chooseImage'>相冊 </view>
 
</view>
 
</view>

WXSS:

/* pages/socks/socks.wxss */

page {
 
background-color: #f7f7f7;
 
height: 100%;
 
}
 
/* 聊天內容 */
 
.news {
 
padding-top: 30rpx;
 
text-align: center;
 
/* height:100%; */
 
box-sizing:border-box;
 
}
 
#flag{
 
margin-bottom: 100rpx;
 
height: 30rpx;
 
}
 
.chat-notice{
 
text-align: center;
 
font-size: 30rpx;
 
padding: 10rpx 0;
 
color: #666;
 
}
 
.historycon {
 
height: 100%;
 
width: 100%;
 
/* flex-direction: column; */
 
display: flex;
 
border-top: 0px;
 
}
 
/* 聊天 */
 
.chat-news{
 
width: 100%;
 
overflow: hidden;
 
}
 
.chat-news .my_right {
 
float: right;
 
/* right: 40rpx; */
 
padding: 10rpx 10rpx;
 
}
 
.chat-news .name{
 
margin-right: 10rpx;
 
}
 
.chat-news .you_left {
 
float: left;
 
/* left: 5rpx; */
 
padding: 10rpx 10rpx;
 
}
 
.selectImg{
 
display: inline-block;
 
width: 150rpx;
 
height: 150rpx;
 
margin-left: 50rpx;
 
}
 
.my_right .selectImg{
 
margin-right: 80rpx;
 
}
 
.new_img {
 
width: 60rpx;
 
height: 60rpx;
 
border-radius: 50%;
 
vertical-align: middle;
 
margin-right: 10rpx;
 
}
 
.new_txt {
 
max-width: 300rpx;
 
display: inline-block;
 
border-radius: 6rpx;
 
line-height: 60rpx;
 
background-color: #95d4ff;
 
padding: 5rpx 20rpx;
 
margin: 0 10rpx;
 
margin-left: 50rpx;
 
}
 
.my_right .new_txt{
 
margin-right:60rpx;
 
}
 
.you{
 
background-color: lightgreen;
 
}
 
.my {
 
border-color: transparent transparent transparent #95d4ff;
 
}
 
.you {
 
border-color: transparent #95d4ff transparent transparent;
 
}
 
.hei{
 
margin-top: 50px;
 
height: 20rpx;
 
}
 
.history {
 
height: 100%;
 
margin-top: 15px;
 
padding: 10rpx;
 
font-size: 14px;
 
line-height: 40px;
 
word-break: break-all;
 
}
 
::-webkit-scrollbar {
 
width: 0;
 
height: 0;
 
color: transparent;
 
z-index: -1;
 
}
 
 
 
/* 信息輸入區域 */
 
.message{
 
position: fixed;
 
bottom:0;
 
width: 100%;
 
}
 
.sendMessage{
 
display: block;
 
height: 80rpx;
 
padding: 10rpx 10rpx;
 
background-color: #fff;
 
border-top: 2rpx solid #eee;
 
border-bottom: 2rpx solid #eee;
 
z-index:3;
 
}
 
.sendMessage input{
 
float:left;
 
width: 66%;
 
height: 100%;
 
line-height: 80rpx;
 
border-bottom: 1rpx solid #ccc;
 
padding:0 10rpx;
 
font-size: 35rpx;
 
color: #666;
 
}
 
.sendMessage view{
 
display: inline-block;
 
width: 80rpx;
 
height: 80rpx;
 
line-height: 80rpx;
 
font-size: 60rpx;
 
text-align: center;
 
color: #999;
 
border: 1rpx solid #ccc;
 
border-radius: 50%;
 
margin-left: 10rpx;
 
}
 
.sendMessage button {
 
float: right;
 
font-size: 35rpx;
 
}
 
.increased{
 
width:100%;
 
/* height: 150rpx; */
 
padding: 40rpx 30rpx;
 
background-color: #fff;
 
}
 
.increased .image{
 
width: 100rpx;
 
height: 100rpx;
 
border: 3rpx solid #ccc;
 
line-height: 100rpx;
 
text-align: center;
 
border-radius: 8rpx;
 
font-size:35rpx;
 
}
 
@keyframes slidedown {
 
from {
 
transform: translateY(0);
 
}
 
to {
 
transform: translateY(100%);
 
}
 
}
 
.slidedown {
 
animation: slidedown 0.5s linear ;
 
}
 
.slideup {
 
animation: slideup 0.5s linear ;
 
}
 
@keyframes slideup {
 
from {
 
transform: translateY(100%);
 
}
 
to {
 
transform: translateY(0);
 
}
 
}

 

好了，代碼就這些，到此已經可以實現實時聊天的效果了

最後

如何大家看了文章還有不懂或者其他問題，歡迎私信我或者評論

歡迎來CSDN關注我，喜歡作者支持一下

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

【微信小程序開發】（轉）微信小程序實現banner圖輪播（動態獲取數據），自動獲取圖片高度

效果； indicator-active-color="#007aff"//當前選中的指示點顏色 js: Page({ data: { //-----------模擬banner圖----------- i

广州余文乐 2020-06-28 23:48:03

【微信小程序開發】（8）view、ext標籤和圖片image標籤

view屬性： text標籤 代碼； image標籤： 代碼： 參數mode任意改

广州余文乐 2020-06-28 22:49:09

微信小程序騰訊雲實時語音轉寫

需求:語音實時轉換文字 步驟1： 首先我們要添加騰訊雲智能語音插件 步驟2： 插件文檔地址： https://mp.weixin.qq.com/wxopen/plugindevdoc?appid=wx3e17776051baf153

前端_李嘉豪 2020-07-05 20:19:52

微信小程序&three.js之自轉的地球

最近有客戶需求在小程序裏面搞一個自轉的地球，之前看過Three.js在微信小程序的支持方案;https://developers.weixin.qq.com/community/develop/article/doc/00066c4b23

agax0312 2020-07-05 18:39:41

微信小程序表單顯示上次填寫內容 緩存實現input回填

  表單信息填寫一次,下次如果無需修改不必再填,直接顯示.. 用wx.getStorageSync(KEY)來判斷本地緩存，用wx.setStorageSync(KEY,DATA)來設置緩存，用input組件的bindinput來監聽用戶

guochanof 2020-07-04 20:53:08

java微信小程序授權 獲取用戶信息、獲取openid和session_key 獲取用戶unionId、(用戶數據的簽名驗證和加解密)JAVA版

更新: 在18年4月25日小程序做了一次更新,小程序授權不再支持直接彈框獲取用戶信息授權了 微信小程序授權 獲取用戶信息裏也做了說明 以下代碼也已經做了更改 ----------------------------------------

guochanof 2020-07-04 20:53:08

微信退款拋錯javax.crypto.BadPaddingException: Given final block not properly padded

    我是java後臺，微信退款的時候 遇到這個問題 檢查發現是加載證書的時候密碼錯誤造成的。 KeyStore keyStore = KeyStore.getInstance("PKCS12"); //ce

w1140486999 2020-07-04 10:03:41

微信小程序開發之『頂部導航』特效

之前Android開發時，頂部導航用到viewPage,微信小程序裏想要達到同樣的效果，可用swiper來實現；先看效果圖 上代碼： 1.swipe

BlochCoding 2020-07-04 03:36:55

小程序開發.雲函數

雲函數 雲函數需要在nodejs下運行 所以需要安裝node.js node安裝:上官網下載長期支持版本,一步步安裝即可 新建雲函數 在雲開發上面建雲函數如下 然後在本地新建雲函數:如下 安裝wx-server-sdk 新建完

胡老大的唯一大老婆 2020-07-04 01:05:05

微信小程序開發--“雲開發開通問題”及“部署雲函數調用失敗解決方法”與“如何成功獲取openid”

昨天下午真是一個魔幻的下午~哇，哭了！ 昨天下午本來元氣滿滿的我興致勃勃的開始了我的微信小程序開發之旅，然鵝 “雲開發開通報錯”、“部署雲函數調用失敗” 等一系列問題把我搞的焦頭爛額，當時那個心情真的是 — — 啊！我要如何去形容

雾里看花花里看雾 2020-06-30 06:03:06

0基礎學會|微信小程序下載-預覽-PDF|Word|XLS文檔文件

前言 我們經常需要打開各種文檔，無論是學習還是工作中，電子書一大把，怎麼在小程序上打開閱讀呢？ 學小程序，找豬哥就對了。 js核心代碼： * 下載文件並預覽 */ readPdf(e){ console.log(e);

不知火猪 2020-06-29 15:38:58

零基礎學微信小程序雲開發|獲取用戶openid

前言 現在微信小程序越來越火，本着幫助每個人都能學會小程序的態度，把我所學知識免費分享給大家，希望對你有所幫助，另外需要做公衆號、小程序的客戶可以聯繫我 現在，小編準備將這些知識免費分享給大家，如果另有需要可以聯繫我。 一：創建f

不知火猪 2020-06-29 15:38:58

0基礎學微信小程序雲開發|分享配置和攜帶參數分享

前言 微信小程序的每個頁面都可以設置分享，分享很簡單，有區分右上角的直接分享和點擊按鈕分享 onShareAppMessage: function (res) { // 右上角分享 let

不知火猪 2020-06-29 15:38:58

不知火豬|0基礎學微信小程序雲開發|觸發雲函數

前言 利用雲開發定時發送消息，怎麼做呢？微信小程序爲我們提供了一個接口來，實現雲函數的出發，也就打通了外部程序調用微信雲開發的“任督二脈” 觸發雲函數 接口地址 POST https://api.weixin.qq.com/tcb

不知火猪 2020-06-29 15:38:58

微信小程序 official-account 關注微信公衆號組件

official-account組件說明 用戶掃碼打開小程序時，開發者可在小程序內配置公衆號關注組件，方便 用戶快捷關注公衆號，可嵌套在原生組件內。 先說明一個重點啊：想使用這個組件，小程序基礎庫要在2.3.0及以上，要 不然是不

不知火猪 2020-06-29 15:38:58