uni-app開發經驗分享十九： uni-app對接微信小程式直播

uni-app對接微信小程式直播

1.登錄微信小程式后臺-點擊>設定->第三方設定->添加直播插件

 2.添加直播組件后->點擊<詳情>      記錄這兩個引數直播插件的appid和最新版本號

 3. 打開專案，找到manifest.json這個檔案

 代碼：

"plugins" : {
            "live-player-plugin" : {
                "version" : "1.1.9",   //最新直播組件版本號
                "provider" : "wx********0" //直播appid
            }
        }

4.獲取直播間串列

/**
 * 獲取直播串列
 */
public function getLive(){
    //獲取access_token
    if($_COOKIE['access_token']){
        $token = $_COOKIE['access_token'];
    }else{
        $token=$this->getAccessToken();
        setcookie("access_token", $token, time()+7200);
    }
    $page                    = i('page', 0);  //當前頁碼
    $rows                    = i('rows', 10); //每頁記錄條數
    //請求直播間串列介面
    $live_list_url='https://api.weixin.qq.com/wxa/business/getliveinfo?access_token='.$token;
    //需要傳遞的引數
    $data = https://www.cnblogs.com/smileZAZ/p/array("start"=>$page,
        "limit"=>$rows
    );
    $data = https://www.cnblogs.com/smileZAZ/p/json_encode($data);
    $res=$this->http_request($live_list_url,$data);
    //獲得直播間串列
    $result = json_decode($res, true);
    $this->render('default', $result);
}
/**
 * 獲取access_token
 */
public function getAccessToken(){
    $appid='wx***********25';//小程式appid
    $appsecret='6ce*********d';//小程式appsecret
    $url="https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=".$appid."&secret=".$appsecret;
    $res=$this->http_request($url);
    $result = json_decode($res, true);
    $access_token=$result['access_token'];
    return $access_token;
}
//https請求(支持GET和POST)
function http_request($url,$data = null){
    $curl = curl_init();
    curl_setopt($curl, CURLOPT_URL, $url);
    curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, FALSE);
    curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, FALSE);
    if(!empty($data)){
        curl_setopt($curl, CURLOPT_POST, 1);
        curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
    }
    curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
    $output = curl_exec($curl);
    //var_dump(curl_error($curl));
    curl_close($curl);
    return $output;
}
 
5.uni-app（vue.js）請求串列資訊：
 methods: {
      
            getLiveList: function () {
                let that = this;
                var params = {page: this.page};
                that.$.request({
                    url: this.Config.URL.get_live_list,
                    data: params,
                    success: function (data, status, msg, code) {
                        if (data.room_info.length > 0) {
                            for (var r = 0; r < data.room_info.length; r++) {
                                data.room_info[r]['start_time'] = dateUtil.dateUtils.format(that.$.datetimeFormatter(data.room_info[r]['start_time']));
                            }
							that.setData({
								live_rows: that.live_rows.concat(data.room_info),
							});
                                          
                        } else {
                            that.setData({flag: !1, ispage: !1})
                        }
                    }
                });
            },
}
6.獲取的串列資訊回圈串列顯示（根據頁面需求自己寫頁面）
  需要在串列中加onclick點擊事件，把當前房間的roomid傳遞到點擊事件中
7.在點擊事件中使用 navigator 組件跳轉進入直播間
  //點擊跳轉直播頁
			liveDetail(roomid){
				let roomId = roomid; // 填寫具體的房間號，可通過下面【獲取直播房間串列】 API 獲取
				let customParams = encodeURIComponent(JSON.stringify({ path: 'pages/index/live', pid: 1 })) // 開發者在直播間頁面路徑上攜帶自定義引數（如示例中的path和pid引數），后續可以在分享卡片鏈接和跳轉至商詳頁時獲取，詳見【獲取自定義引數】、【直播間到商詳頁面攜帶引數】章節（上限600個字符，超過部分會被截斷）
				wx.navigateTo({
				    url: `plugin-private://wx2b0*******70/pages/live-player-plugin?room_id=${roomId}&custom_params=${customParams}`
				})
			},

轉載于：https://blog.csdn.net/qq_33273556/article/details/108549977

標籤：HTML5

上一篇：JS里面如何實作多個多選嵌套

下一篇：Vue中引入svg圖示的方式