之前做微信分享，好像是微信會(huì)把帶的參數(shù)自動(dòng)截取掉，你可以使用一些奇怪的符號(hào)去替換?，然后再獲取url參數(shù)的時(shí)候手動(dòng)去轉(zhuǎn)化

找到了一個(gè)好用的免費(fèi)開(kāi)源JS庫(kù)——streamedian

當(dāng)當(dāng)當(dāng)~上鏈接：https://streamedian.com

介紹中講到，Multifunctional HTML5 RTSP streaming video player over WebSocket
就是說(shuō)，利用websocket實(shí)現(xiàn)多功能的H5的rtsp視頻流播放器

這里是使用文檔：https://streamedian.com/docs/

對(duì)于對(duì)websocket、linux、服務(wù)器、甚至英文一知半解（一竅不通）并看了文檔也不理解的同學(xué)，請(qǐng)繼續(xù)看手把手中文教程：

首先我們理解一下個(gè)中原理：

目標(biāo)：在你的瀏覽器（browser）上播放rtsp視頻流
問(wèn)題：然而，H5的標(biāo)簽<video>不支持這樣的播放
方案：這里利用我們的streamedian在你的服務(wù)端開(kāi)啟一個(gè)websocket代理（proxy），負(fù)責(zé)接收rtsp流，并轉(zhuǎn)播給你的瀏覽器客戶端，streamedian在客戶端利用中間件（Media Sources Extensions）將經(jīng)過(guò)轉(zhuǎn)播收到的RTP H264和AAC包轉(zhuǎn)化成MP4包，“喂給“<video>進(jìn)行播放

下面拿到streamedian的code來(lái)感受一下：

JS庫(kù)下載

方法一：通過(guò)官網(wǎng)下載
可能不是最新版，streamedian團(tuán)隊(duì)還在不斷地修復(fù)bug中，建議用方法二、三下載最新更新的版本

進(jìn)入https://streamedian.com 完成注冊(cè)并登錄

可以看到最上面紅框標(biāo)注的是我們需要的客戶端和服務(wù)端的JS程序；

針對(duì)客戶端，如果你使用H5的原生播放器<video>標(biāo)簽，下載Download player即可，此外還提供了代替版本————結(jié)合非原生H5播放器的clappr integration、videojs integration、Flowerplayer integration可供選擇。這里我只下載了Download player
針對(duì)服務(wù)端，下載proxy，這里的.rpm和.deb是兩種格式，選擇其一下載，我這里用的ubuntu，.deb更適用，點(diǎn)擊下載

接下來(lái)是對(duì)我們使用的免費(fèi)版本streamedian的特性描述；
在Domain欄里。你需要輸入你所使用的客戶端的域名或IP，Add之后，點(diǎn)擊Download license。保存好這個(gè)license后面會(huì)用到，后面會(huì)解釋為什么要在license中明確特定的客戶端域名

方法三：從git上拉下來(lái)
npm install git://github.com/Streamedian/html5_rtsp_player.git
方法二：下載git的壓縮包

配置與安裝

梳理一下，我們現(xiàn)在下載了什么呢？客戶端JS streamedian，服務(wù)端proxy streamedian_proxy.deb,一個(gè)licsense wsp.lic

• 服務(wù)端配置

將streamedian_proxy.deb和wsp.lic分別上傳至服務(wù)器，并在streamedian_proxy.deb根目錄下sudo dpkg -i streamedian_proxy.deb #安裝streamedian_proxy.deb軟件包（其中-i等價(jià)于--install）

安裝好后會(huì)生成/etc/ws_rtsp.ini，進(jìn)入這個(gè)路徑，利用vim進(jìn)行配置，這里我們只要設(shè)置general，其中port就是你的服務(wù)端轉(zhuǎn)播服務(wù)的端口，liscense_path則是你上傳的wsp.lic的絕對(duì)路徑，PRO version的參數(shù)可以不進(jìn)行修改

配置好端，可以用service ws_rtsp start命令啟動(dòng)該服務(wù)，那么就在后端相應(yīng)端口建立起了一個(gè)將rtsp轉(zhuǎn)播服務(wù)。至此服務(wù)端已經(jīng)配置好，只要前端把rtsp地址通過(guò)socket發(fā)送給服務(wù)端，就可收到rtsp流的socket包了

service ws_rtsp stop命令可以用于停止該服務(wù)，ps -aux|grep ws_rtsp命令可以用于查詢(xún)?cè)摲?wù)進(jìn)程的運(yùn)行情況

• 客戶端配置

用Vs Code打開(kāi)下載好的streamedian

終端運(yùn)行npm install下載依賴(lài)
終端運(yùn)行npm install --global rollup這里我們安裝的的rollup是一個(gè)JS模塊打包工具，后面會(huì)用到

接下來(lái)打開(kāi)rollup.config.js，其中的entry配置了源文件，target則指定了打包生成的目標(biāo)文件的目錄及文件名。終端運(yùn)行rollup -c，可以看到在dist目錄下打包生成了目標(biāo)文件streamedian.js

至此我們的客戶端工作完成一半，客戶端的頁(yè)面在哪里呢？下面我們來(lái)做一個(gè)最簡(jiǎn)單的頁(yè)面，這里以文件中的index.html為例
可以看到<script>標(biāo)簽中引用了我們打包好的streamedian.js

引用了<video>標(biāo)簽播放rtsp視頻

<source>中指定了rtsp流源,rtsp://184.72.239.149/vod/mp4:BigBuckBunny_175k.mov是一個(gè)穩(wěn)定的可用于測(cè)試的源

socket的參數(shù)則是我們運(yùn)行的rtsp流轉(zhuǎn)播服務(wù)器運(yùn)行url，格式為ws://服務(wù)器IP:端口號(hào)，可以看到這里的端口號(hào)就是之前配置好的1104

現(xiàn)在我們?cè)跒g覽器中打開(kāi)index.html，可是并沒(méi)有視頻顯示！我的理解是，前期我們?cè)趌icense中設(shè)置過(guò)客戶端的IP或域名，這意味對(duì)服務(wù)端來(lái)說(shuō)，只對(duì)我們制定的客戶端進(jìn)行流轉(zhuǎn)播，因此還差一步

把index.html及streamedian.js放在同一目錄下，并上傳至制定的客戶端服務(wù)器

大功告成~~

http://res.wx.qq.com/open/js/...
修改為
https://res.wx.qq.com/open/js...

其他相同

恩，已經(jīng)解決，先獲取素材列表，然后拿thumb_media_id作為media_id參數(shù)調(diào)用獲取永久素材,微信會(huì)返回整張圖片二進(jìn)制，保存成圖片到本地服務(wù)器。

var jsApiParameters = {$pay_data.jsApiParameters};這行前后加個(gè)alert看看，估計(jì)是這地方的格式問(wèn)題

后端先獲取頁(yè)面內(nèi)容，然后轉(zhuǎn)換里面的連接為絕對(duì)鏈接，再把結(jié)果輸出。這樣就相當(dāng)于自己服務(wù)出的內(nèi)容了。

由于微信方面出于安全考慮，給出的數(shù)據(jù)都是大概的距離，只能估計(jì)。方法如下，前提這個(gè)人靜止，本人拿手機(jī)通過(guò)查看附近的人，記下與該人的距離，然后在其他兩個(gè)地方，再次查看附近的人，記下距離。以每次本人點(diǎn)為圓心，距離為半徑畫(huà)圓，三者的交點(diǎn)就是那個(gè)人的位置。精度應(yīng)該是一個(gè)描述這差異范圍的值。

跟https://segmentfault.com/q/10... 同樣的問(wèn)題？

最后的解決方法：
在頁(yè)面最外層div上加入這些屬性

.business_box {
    width: 100%;
    height: 100%;
    background: #f3f3f3;
    overflow: hidden;
    position: relative;
}

然后讓底部購(gòu)物車(chē)欄絕對(duì)定位，跟著頁(yè)面滑動(dòng)。

1. redirect_url
2. 在cookie或者session里面存下授權(quán)之前的頁(yè)面

不用加二維碼關(guān)注

1. 登錄你的公眾號(hào)，然后點(diǎn)擊

1. 打開(kāi)的頁(yè)面可以查看公眾號(hào)信息
2. 查看源代碼

1. 被馬賽克的地方就是原始數(shù)字ID，我的公眾號(hào)ID是3001035000
2. base64編碼剛才的ID，結(jié)果MzAwMTAzNTAwMA==
3. 組裝鏈接

https://mp.weixin.qq.com/mp/profile_ext?action=home&__biz=MzAwMTAzNTAwMA==#wechat_redirect

打開(kāi)頁(yè)面鏈接即可

傳遞你頁(yè)面當(dāng)前地址
有種技術(shù)叫內(nèi)網(wǎng)穿透，通過(guò)域名訪問(wèn)本地服務(wù)。
推薦一個(gè)：https://github.com/fatedier/frp

H5頁(yè)面本身跟JSAPI沒(méi)有關(guān)系的，不用寫(xiě)兩套，在哪個(gè)環(huán)境都可以看的。如果你想用支付寶的一些功能，你需要借助與JSAPI實(shí)現(xiàn)。但是不在支付寶的環(huán)境了，可以讓其正常顯示，只是里面支付寶相關(guān)的功能不能用而已。

1. 兩段代碼沒(méi)有區(qū)別，都是定義一個(gè)返回對(duì)象的方法。不同點(diǎn)就在于箭頭函數(shù)的理解。如果箭頭函數(shù)需要執(zhí)行多條語(yǔ)句，則需要用大括號(hào)包裹起來(lái)。然而大括號(hào)又會(huì)被認(rèn)為是一個(gè)對(duì)象字面量，這樣子就會(huì)沖突。所以當(dāng)需要直接返回對(duì)象字面量的時(shí)候用()括起來(lái)，也可以在{}里面顯示返回。

2.

this.setState({
            showPageGroup,
            showPageNumber,
            ellipsisNumber,
            endGetIndex,
            arrowShow,
            userKeyValue
        })

可以參考一下https://blog.csdn.net/u014786...

vue提供了服務(wù)端渲染，你可以看下https://cn.vuejs.org/v2/guide...

線上環(huán)境原因。。已解決

invalid signature就是簽名無(wú)效，參照微信文檔附錄1，檢查簽名計(jì)算是否正確

公眾號(hào)關(guān)聯(lián)小程序，推文編輯頁(yè)面多媒體小程序

的確如一樓所說(shuō)！