微信小程序藍(lán)牙溫度數(shù)據(jù)采集

1、微信小程序藍(lán)牙溫度數(shù)據(jù)采集陳拓 2019/6/2-2019/6/150.概述本文是樹莓派藍(lán)牙溫度傳感器的后續(xù)文章，請(qǐng)按先后順序看，該文檔的網(wǎng)址是:本文不講述小程序的基本知識(shí)和編程語法，需要事先熟悉。下面本文的最后效果:mi中國(guó)電尊b他:"白7%-+傳假器S5據(jù)果集 ©“中國(guó)鼠值中u：gbease<傳塞器數(shù)據(jù)聚集i停止舊描A H條史景已發(fā)個(gè)外國(guó)說需：r?*vlM*rvpi 、尸卜 i i m. 4 «-= 015019/06/12 16 27-2B 28 fllC2019/06/14 1«O2;O7 27B7C 20ig/oe/u ie 02：07

2、27.50c 201S/OS/U ie：02:15 27.56C ?0ig/O6/14 1S:G2:24 37.A2C Z019/O6/U 1CQZ：35 2工甌 2019/Q6/U 16:0247 27.50C JD15/O6/14 1«：02：59 27.56C ZQig/O6A-4 V. 0317 27 5cle 2019/06/14 1603-23 27.43C 2019/06/14 16:03:29 27.5DC ZOTg/Oe/M 16:03:35 27.430 2019/06/14 10:03:41 27.5OC 昵將1明，八疊“n /,八與Y個(gè) 嚼 愛力1.開發(fā)工具安

3、裝FM*P15沼S£"。s :二：3才磯-工鼠方工刁上貶.七上口“口僅一堂二3<W硼 見期幽甲JX.卜慢叼型匕MA*l點(diǎn)擊下載:0汪界凹粒RS用小岸回網(wǎng)Q開發(fā)模式開州的國(guó)#件寨曦算-不圓產(chǎn)發(fā)成星期三者聚上任磔第三二但£睜日吉?dú)v史更第三士Windsvvs僅支幃Window? 7及以卜版三開發(fā)版 N ightly Build習(xí)京構(gòu)理版本,用于扉快修三維力典HS小的悖5Windows 64s Windowis 32% ebcOS限發(fā)布版RC Build街；ikK fai 4 1. 海/出 SR2H 廿ALRE1 3J !" El- 10. , P?*TK

4、. Iffr r QtidLIZJ "JWind 聃啜M . W用加標(biāo) U占nnacQS(gififi Subla Build (1.02.1904090*，w»，jy二 4，! _JTJC 丁4/比:"|上工 T . . IWnd各 64 Wnd-nwri 1? , marOS全部史新g士部更E參在穩(wěn)定版下面，在 Windows 64 、Windows 32、macOS中選擇一項(xiàng)下載。2.藍(lán)牙通信小程序起步開始 > 微信web開發(fā)者工具微信開發(fā)者工具京迎使用微信開發(fā)者二具用手機(jī)微信掃描登錄在電腦屏幕上打開小程序開發(fā)工具：小程序+”號(hào)項(xiàng)目 名稱： ble-d

5、ata-acquisition中.】一月，田如邙口5TK 慳二Q不使用翔隨，銀厚-尋發(fā)注4>,曳尾平將提 工他了運(yùn)年瘴javasifiE：pi遂行林心業(yè)拓,即可-唱押也±痂亨建填寫AppID打開網(wǎng)頁 登錄用小程序賬號(hào)（不是公眾號(hào)賬號(hào)）登錄微信公眾平臺(tái)，進(jìn)入小程序后臺(tái) 如果沒有賬號(hào)就去申請(qǐng)注冊(cè)。點(diǎn)擊 開發(fā) > 開發(fā)設(shè)置 就可以看到你自己的 AppID（小程序ID） 在“新建項(xiàng)目”界面填寫 AppID ,其他保持默認(rèn)。注意：小程序名稱和圖標(biāo)也在這里設(shè)置。點(diǎn)擊“新建”按鈕注意：微信只支持低功耗藍(lán)牙BLE,不支持經(jīng)典的藍(lán)牙。熟悉開發(fā)工具的目錄和文件打開開發(fā)工具index目錄： &

6、amp; PWSt & ind exindex jsC indexj5on> index.wxml,皿 index.wxss目 log5logs.js<)logsjscn logs.wxml1a logs /xsst 臼 utitsi? ulii.jsi appjs< appj&or何 口。感t$bifigj3bl我們可以看到最上面有一個(gè)pages (頁面)目錄，這個(gè)目錄里面包括了小程序所有的界面，index目錄是起始頁面。每個(gè)頁面包括4個(gè)文件3個(gè)必須文件：index.wxml 對(duì)應(yīng)index.html ，主要負(fù)責(zé)本頁面的界面展示以及事件的綁定等等。index

7、.wxss 對(duì)應(yīng)index.css ,主要負(fù)責(zé)頁面的樣式，與 wxml文件一起使用，優(yōu) 化wxml頁面。index.js 就是js文件，主要負(fù)責(zé)本頁面的業(yè)務(wù)邏輯，包括生命周期，事件的綁 定處理，數(shù)據(jù)的初始化等等。1個(gè)可選文件：index.json :主要是負(fù)責(zé)本界面的基本配置，設(shè)置頁面標(biāo)題等功能。json文件不是必須的一般情況下我們只需要用全局配置的app.json文件配置就可以了。在圖中還有一個(gè) utils 的目錄：可以看出utils 和pages文件是并列的，所以他就不代表頁面的信息了，里面只有一個(gè)js文件。這個(gè)js文件其實(shí)就是把代碼模塊化了，已經(jīng)有的代碼是將日期的轉(zhuǎn)換封裝好了，直接引入使

8、用就可以了。最后剩下一系列 app的文件，app.js app.wxss app.json 代表的信息和上面的 pages里 面的頁面文件夾中的其實(shí)差不多，只是pages里面的代表的僅僅是某個(gè)界面的配置，而app的代表的是這個(gè)項(xiàng)目的配置。找一個(gè)官方DEMO測(cè)試 wx.getBLEDeviceServices(Object object)https:/developers.weixin.qq.Com/miniprogram/dev/api/device/bluetooth/wx.getBLEDeviceServices.html置房蕨程福架 組件 AP 工具小程序，云開發(fā)wxkgetBLEDev

9、iceServices(Object object)支持艇本A=1.1.0獲敦H牙設(shè)備所有溫窘SU rvi ce).滾動(dòng)到最后面：示例代碼在開發(fā)者工具中預(yù)覽奴果點(diǎn)擊“在開發(fā)工具中預(yù)覽效果”，導(dǎo)入代碼片段：因?yàn)樯婕暗剿{(lán)牙硬件，所以不能用模擬器調(diào)試，下面我們把這個(gè)代碼片段添加到前面創(chuàng)建的項(xiàng)目中。,app.wxs5j project.config.j5or,1 5itemapjsonmeter.pftg圖片位置 在pages下面建一個(gè)文件夾images ,把圖片集中放在這里。displays images indeK 10竽 5ranble添加頁面下面我們添加一個(gè)目錄scanble 和一組4個(gè)頁面文

10、件scan ,我們不用去創(chuàng)建scan頁面相關(guān)的文件 scan.js 、scan.wxss 和scan.wxml ,點(diǎn)擊打開 app.json 文件就可以自動(dòng)創(chuàng)建 一個(gè)小程序空白頁面。app.json是一個(gè)數(shù)組，由 pages 和 window 組成。找到pages數(shù)組，它里面所存放的就是一個(gè)個(gè)頁面的名稱了，如圖：appKI 2pae«H：CAs/logs /logs,h6 *wincicwH; 7 "c&cligroLirHJTa)it3tyLt"：B*naviBationBarBackfiround<olflr":速"步、9 i

11、 eat ion Ba rT: "WeGatl一0-ria-jig3tiDnHar 1 # xt5tyle,R i"Dack,b13我們只需要在Pages中加上“pages/scanble/scan"，并在前面用一個(gè)逗號(hào)隔開數(shù)組元素：白口P jSQH1 3 "pigtE-：4 HpflEes/index/,5 PDa£f5/13£SyiC£i"1占L"window":8 ''beckgrQjncirextityle" : ' llghf9 "navit

12、ioria rBackgroundColo-' :、Ifi''nil'.i 即ti nnFfl rT: tleTpv*"："持室器奉指宇字"、11' nflviEctionGflrTextStyLe" Mladic"li _ y13注意：pages數(shù)組里面，哪個(gè)路徑在第一個(gè)，就先顯示那個(gè)路徑對(duì)應(yīng)的界面。保存(Ctrl+s )之后開發(fā)工具會(huì)自動(dòng)幫我們創(chuàng)建文件夾和其中的4個(gè)scan頁面文件： & pa3es D index 亡I logs & &canbie stan.js ( sca

13、n.json < > scan.wxml e scan.wxss CJ utils app.js ( app.json "« app.wxss5 praject.config.onapp.json 文件中的windows用于設(shè)置小程序的狀態(tài)欄、導(dǎo)航條、標(biāo)題、窗口背景色。 修改導(dǎo)航欄標(biāo)題將“ WeChat”改為“傳感器數(shù)據(jù)采集”，保存（trl+s ）,模擬器界面自動(dòng)刷新。修改scan頁面代碼把導(dǎo)入的代碼片段index頁面的4個(gè)文件內(nèi)容復(fù)制到相應(yīng)的scan頁面代碼中。頁面跳轉(zhuǎn)前面我們說過了，pages數(shù)組里面，哪個(gè)路徑在第一個(gè)就先顯示那個(gè)路徑對(duì)應(yīng)的界面，index在

14、第一個(gè)，所以小程序先顯示頁面index.wxml ,我們?cè)俎D(zhuǎn)到scan.wxml 。為了實(shí)現(xiàn)點(diǎn)擊跳轉(zhuǎn)，我們把“ Hello World ”改造成“開始”按鈕。修改 index.wxml :<!->11 <view class="usermotto">12 <text das/text>13 </wlew>14 >15 contain er" >16 <tex±cl as s="use r1*otto11>17修改 index.wxss :19.uenncitto |2<

15、;S line-heignt： 80rpxj21)222324nrcrgin-to? : 150px;border: Ipx solid 口#司已；26widtli: 2&0rpx;27heigit: 80rpx;28boer-rcdiiii: 5pyj29text-align; centerj36效果:添加事件bindtap ,它網(wǎng)站開發(fā)中的click 事件一樣，都是點(diǎn)擊時(shí)觸發(fā)的事件，我們把它寫在矩形框的那個(gè) view標(biāo)簽里面：15 LJ I <viw cla'* binap='go1 >16<text cla5s="u5ermatta&q

16、uot;></text>171/£弋心!bindtap 將事件綁定到組件上面，綁定了之后點(diǎn)擊組件可以觸發(fā)這個(gè)函數(shù)。bindtap= "go”的意思就是，當(dāng)點(diǎn)擊綁定的view時(shí)觸發(fā)一個(gè)事件，這個(gè)事件名稱叫做 go , 我們需要去index.js文件中去編寫go事件。進(jìn)入index.js 文件中，找到page ,在"事件處理函數(shù)”的最后添加go函數(shù)：h目。1上二口。Iuix.redirettTo«url: "./s c n b1e/scan”與前后的函數(shù)用逗號(hào)分隔。真機(jī)調(diào)試（iPhone、安卓手機(jī)都可以）因?yàn)樯婕暗剿{(lán)牙硬件，所以不

17、能用模擬器調(diào)試。點(diǎn)擊“真機(jī)調(diào)試”，或者“預(yù)覽”。如果不需要調(diào)試，只是測(cè)試，用“預(yù)覽”要快一些。胃下工UETSi ，就一二幸改期二用微信掃碼，驗(yàn)證通過后還需要登錄“小程序賬號(hào)”補(bǔ)充一些信息，按提示做就行。 在“小程序賬號(hào)”中可以設(shè)置和修改小程序圖標(biāo)和名稱等信息：小程序發(fā)布充程*ejie我已經(jīng)設(shè)置好了，點(diǎn)擊“查看詳情”設(shè)置基忑凌三 舞三方二百二二開始真機(jī)調(diào)試后小程序會(huì)下載到你的微信中，可以反復(fù)測(cè)試:中國(guó)電信營(yíng)10 30傳感器數(shù)據(jù)采集100% +m中國(guó)電信 會(huì)09 4J中100% , *<小程序附近的小程序.單我的小程序野外臺(tái)站盤牙數(shù)據(jù)票集開始點(diǎn)擊我們的小程序:點(diǎn)擊“開始"，顯示sc

18、an.wxml頁面，點(diǎn)擊“開始掃描" M中國(guó)電信 學(xué)10：096 /總長(zhǎng) 傳感器數(shù)據(jù)采集 開始掃描停止掃描結(jié)束流程已發(fā)現(xiàn)3個(gè)外國(guó)連備二ble-iemp信號(hào)叫ft43%*UUC EFBDC* CWS 金曰皆E 39681147Wm鼬麗gAPUUC 口503國(guó)i2-B7D3-M旭-DFM DIB4M57B1QSirvicrfi a- QAP1B4H.V 如UUVD-CC4?- ?14F - 7fi7D-35F2ftC36B0niOSairvicel .: 0中國(guó)融通3G手舊I ®聿標(biāo)?|，in 19傳感器數(shù)據(jù)聚集*®開始掃描停止掃描結(jié)束流程已發(fā)現(xiàn)3個(gè)外困設(shè)備: ble

19、-temp皓曰MtdBE1舞|UJiD: BB.27 E 日.4 EC SBAPIS'WSa： -&5dBm5HJUUI& DA 83：1(»BS1£ESqfwseSI理；QAP-'n強(qiáng)于 54dBm悟1也kUUllJ. bT.Hr 1-A：6A.1U.ALS«rj«trM：C左邊是蘋果手機(jī)，右邊是安卓手機(jī)。掃描到3個(gè)藍(lán)牙外圍設(shè)備，第一個(gè)設(shè)備ble-temp 就是我們的樹莓派藍(lán)牙設(shè)備。當(dāng)然要看到 這個(gè)設(shè)備先要按照我的文章樹莓派藍(lán)牙溫度傳感器，將樹莓派溫度傳感器運(yùn)行起來：3.掃描控制，獲取數(shù)據(jù)為避免占用過多篇幅，下面只說明要

20、修改的代碼，源代碼請(qǐng)看官方DEMO3.1 在scan.wxss中添加.scan_btn width:100%;position:fixed ;bottom: 30rpx ;.btn margin-top:30rpx ;width: 450 rpx ;background:#14a1fd ;color:#fff ;border-radius:70rpx ;3.2 修改 scan.wxml<!-pages/scanble/scan.wxml-><view class ="devices_summary"> 已發(fā)現(xiàn)devices.length個(gè)外圍設(shè)備：

21、</ view ><scroll-view class ="device_list" scroll-y scroll-with-animation ><view wx:for ="devices" wx:key ="index" data-device-id ="item.deviceId"bindtap ="displayData"class ="device_item"hover-class ="device_item_hover&

22、quot;><viewstyle ="display:flex;flex-direction:row;justify-content:space-between;align-items:center;font-size:12px;color:#333;"><text > </ text ><text style ="font-size:10px;color:#14a1fd;">item.deviceId </ text ><text >item.RSSIdBm

23、 </ text ></ view ><view style ='font-size:14px'><text >item.date </ text ><text > item.tempC </ text ></ view ></ view ></ scroll-view><view class='scan_btn'><button class='btn' bindtap='scanCtrl'&g

24、t;scaningStr</button></view>單引號(hào)，雙引號(hào)雙引號(hào)會(huì)搜索引號(hào)內(nèi)的內(nèi)容是不是有變量，有則輸出其值，沒有則輸出原有內(nèi)容。所以輸出純字符串的時(shí)候用單引號(hào)比雙引號(hào)效率高，因?yàn)槭∪z索的過程。3.2 掃描控制在 scan.wxml 中bindtap ='scanCtrl'在scan.js 中添加點(diǎn)擊事件響應(yīng)函數(shù)/開始/停止掃描 scanCtrl(e) if ( this .data.scaningStr ='停止才3描')this .stopBluetoothDevicesDiscovery()/停止掃描 else thi

25、s .openBluetoothAdapter() ,停止掃描stopBluetoothDevicesDiscovery() this ._discoveryStarted = false wx.stopBluetoothDevicesDiscovery()this .data.scaningStr ='開始掃描'this .setData(scaningStr:this .data.scaningStr) , 開始藍(lán)牙設(shè)備掃描startBluetoothDevicesDiscovery() this .data.scaningStr ='停止掃描this .setDa

26、ta(scaningStr:this .data.scaningStr) if ( this ._discoveryStarted) returnthis ._discoveryStarted = truewx.startBluetoothDevicesDiscovery( allowDuplicatesKey:true ,success: (res) => /console.log('startBluetoothDevicesDiscovery success', res)this .onBluetoothDeviceFound(), ),發(fā)現(xiàn)了藍(lán)牙設(shè)備onBlueto

27、othDeviceFound() wx.onBluetoothDeviceFound(res) => res.devices.forEach(device => if (! && !device.localName) return if ( != 'ble-temp' && device.localName != 'ble-temp' ) return / 過濾名字不是 ble-temp 的設(shè)備 const objDevice = / 重新構(gòu)造一個(gè) device ,添加溫度o

28、bjDevice.deviceId = device.deviceId objDevice.localName = device.localName objD = objDevice. RSSI = device. RSSIlet dateSec = Date .now() / 取手機(jī)系統(tǒng)時(shí)間秒let date = new Date (dateSec) / 取手機(jī)系統(tǒng)時(shí)間 objDevice.date = util.formatTime(date) objDevice.advertisData = device.advertisDatalet adD

29、ataStr = ab2hex(device.advertisData) console.log('廣播包數(shù)據(jù)：'+ adDataStr)objDevice.temp = getTemp(adDataStr) console.log('溫度：'+ objDevice.temp)let foundDevices = this .data.deviceslet idx = inArray(foundDevices,'deviceId' , device.deviceId)/ 找至 U 當(dāng)前deviceId 對(duì)應(yīng)的iif (idx = -1) temp

30、Data = tempData + objDevice.deviceId + dateSec + objDevice.tempthis .data.devices.push(objDevice)/ 如果 this.data.devices 沒有找當(dāng)前的deviceId ,就添加一個(gè)新的 else if ( this .data.devicesidx.temp != objDevice.temp) / 不記錄重復(fù)的數(shù)據(jù)tempData = tempData + objDevice.deviceId + dateSec + objDevice.temp this .data.devicesidx

31、= objDevice/ 如果在 inArray函數(shù)中找到了當(dāng)前的deviceId ,就更新 console.log(溫度數(shù)據(jù)：'+ tempData)this .setData( devices:this .data.devices) ) ),添加函數(shù)和變量注意，根據(jù)Page(來判斷下面的函數(shù)和變量應(yīng)該寫在什么位置。 /從廣播包中取溫度數(shù)據(jù) function getTemp(adDataStr) var temp = adDataStr.substring(4, adDataStr.length)var temperature = temp 1 + temp 3 + '.&#

32、39;+ temp 5 + temp 7 / 去掉前導(dǎo) 0,加小數(shù)點(diǎn)return temperature/聲明變量var tempData =''const util = require( '././utils/util.js')Page( data: devices:, connected:false ,chs:, scaningStr:'開始掃描,/開始/停止掃描scanCtrl(e) 請(qǐng)對(duì)照官網(wǎng)DEMO源代碼看。3.3 真機(jī)調(diào)試為了看到程序運(yùn)行時(shí)的中間結(jié)果，我們用真機(jī)調(diào)試一下:" 曲 T 室-麗琴克克相湄械刁看自雌存W后二雄Q鼻引闿意16

33、:12時(shí)尖的對(duì)于簡(jiǎn)單的修改，如果不需要看中間結(jié)果，可以用預(yù)覽進(jìn)行測(cè)試，比真機(jī)調(diào)試節(jié)省時(shí)間。 “真機(jī)調(diào)試”窗口：console.log（ '廣播包數(shù)據(jù)：'+ adDataStr）console.log（ '溫度：'+ objDevice.temp）console.log（ 'tempData: '+ tempData）這3條調(diào)試語句將程序運(yùn)行的中間結(jié)果顯示出來。手機(jī)顯示：,UI中酉電信中97% v *傳感器數(shù)據(jù)采集 ®巳性搜已發(fā)現(xiàn)1個(gè)外/設(shè)備，- F u Ut； IF d'LL 匚 J：過 4日NL JUbi H1J-2019/0

34、6J2 16 27;28 28.81CKJ雅洞左邊是蘋果手機(jī)，右邊是安卓手機(jī)。注意，蘋果手機(jī)顯示的是設(shè)備ID,安卓手機(jī)顯示MAC4.歷史數(shù)據(jù)展示我們已經(jīng)將數(shù)據(jù)緩存到了變量tempData中，為了便于觀察數(shù)據(jù)的變化，下面我們將tempData中的數(shù)據(jù)用列表和曲線顯示。4.1 創(chuàng)建一個(gè)新的頁面display這個(gè)操作我們已經(jīng)很熟悉了，在app.json中添加一行"pages/displays/display"app json x"p5ges":('"pages/ in k/Index、"pages ,lcgs/lce5M j,pag

35、e e/scanble/scfin1"page 5/displays/'dispLay "L* window1*: 1p 曰 cKgEunMExtEtylE":"nayigatianBarBickfiroufidColar" ：*伯丁£酊£的日“1遷1小設(shè): “傳感墓翁嚏菜集L1314"navi gat ion B-a r T ex tSty 1 e" ： "black1'n S.iteira pLocet ion'': " sitemap . j so

36、 nlp4.2寫頁面代碼display.wxss.back-img width:10%;background:none;margin-left:5px;.canvas width:100%;height:250px;.device_list margin: 5rpx 5rpx ;margin-top:0;border:1 rpx solid #EEE;border-radius:5 rpx ;width:100%;height:500 rpx ;/*定義滾動(dòng)條高寬及背景高寬分別對(duì)應(yīng)橫豎滾動(dòng)條的尺寸*/:-webkit-scrollbar (width: 10px;height:10px;bac

37、kground-color:#ffffff ;/*定義滾動(dòng)條軌道內(nèi)陰影+圓角*/:-webkit-scrollbar-track (-webkit-box-shadow:inset 0 0 10px rgba( 0,0,0,0.3);border-radius:10px;background-color:yellow ;/*定義滑塊內(nèi)陰影+圓角*/ :-webkit-scrollbar-thumb ( border-radius:10px;-webkit-box-shadow:inset 0 0 10px rgba( 0, 0,0, .3 );background-color:#ff5500

38、;display.wxml<viewstyle ="height:100rpx;display:flex;flex-direction:row;justify-content:space-between;align-items :center;color:#eee;background-color:#38B0DE;"><image class ='back-img' mode='widthFix' src ='./images/backs.jpg' bindtap ="back">&

39、lt;/ image > <text style ="font-weight:bold;font-size:12px;margin-right:10px;">deviceId </ text ></ view > <view ><canvas canvas-id ="lineCanvas" disable-scroll ="true" class ="canvas" bindtouchstart = "touchstart" bindt

40、ouchmove ="touchmove" bindtouchend ="touchend"></ canvas > </ view > <view style ="height:50rpx;display:flex;flex-direction:row;justify-content:space-between;align-items: center;color:#eee;background-color:#38B0DE;"> <text > </ text ><

41、;text style ="font-weight:bold;font-size:12px;margin-right:10px;">共amount條t己錄 </text ></ view > <scroll-view class ="device_list" scroll-y ='true' scroll-into-view ='100'><view wx:for ="idata" wx:key ="index" data-device

42、-id ="item.deviceId"><view class ="content"><view style ="font-size:14px; color:#333;"><text > item.samplingTime </ text ><text > item.tempC </ text > </ view ></ view ></ view ></ scroll-view >微信小程序wx-chart

43、s圖表插件顯示曲線需要下載wx-charts ,網(wǎng)址 ,解壓后，把dist里面的wxcharts.js 或者wxcharts-min.js放在小程序的文件夾里，在當(dāng)前頁面引用文件：const wxCharts = require( '././utils/wxcharts-min.js')在網(wǎng)址上看README.md有詳細(xì)的使用說明。帶參數(shù)可返回頁面跳轉(zhuǎn)點(diǎn)擊掃描到的一個(gè)設(shè)備，scan.wxml發(fā)送點(diǎn)擊事件：bindtap ="displayData"在scan.js中寫響應(yīng)代碼：前面我們用：wx.redirectTo(url:'./scanble/sc

44、an' ,)進(jìn)行頁面跳轉(zhuǎn)。跳轉(zhuǎn)還有一個(gè)方法叫做wx.navigateTo ,與wx.redirectTo的區(qū)別是：wx.navigateTo 跳轉(zhuǎn)到一個(gè)應(yīng)用內(nèi)的某個(gè)頁面，還保留著當(dāng)前頁面，可以用 wx.navigateBack 返回，wx.navigateTo還可以帶參數(shù)。wx.redirectTo 關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到另外一個(gè)頁面。在 scan.js 中我們用 wx.navigateTo :/數(shù)據(jù)展示displayData(e) this .stopBluetoothDevicesDiscovery()/ 停止掃描const deviceId = e.currentTarget.da

45、taset.deviceId/傳遞的參數(shù)可返回跳轉(zhuǎn)wx.navigateTo(url:'./displays/display?ideviceId='+ deviceId + '&tempData=' + tempData),用wx.redirectTo跳轉(zhuǎn)會(huì)關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)頁面后不能返回上一頁，這樣我們就看不到其他設(shè)備的數(shù)據(jù)了。所以我們改用wx.navigateTo 函數(shù)，它在跳轉(zhuǎn)時(shí)保留當(dāng)前頁面，使用wx.navigateBack可以返回原頁面。下面的語句傳遞了2個(gè)參數(shù)deviceId 和tempData 。url: './displays/d

46、isplay?ideviceId='+ deviceId + '&tempData=' + tempDatadisplay.jsconst util = require( '././utils/util.js')const wxCharts = require( '././utils/wxcharts-min.js')var lineChart = nullconst recordLeni =54 / 蘋果手機(jī)記錄長(zhǎng)度const recordLena =35 / 安卓手機(jī)記錄長(zhǎng)度constdeviceIdLeni =36 /蘋果手

47、機(jī)的deviceId長(zhǎng)度constdeviceIdLena =17 /安卓手機(jī)的deviceId長(zhǎng)度var recordCount =0 / 記錄計(jì)數(shù)var tempData ='' / 原始數(shù)據(jù)var temp_min =100var temp_max = -60Page(/*頁面的初始數(shù)據(jù)*/data: deviceId:'',idata:, amount:0, touchstart:function (e) console.log(lineChart.getCurrentDataIndex(e)lineChart.showToolTip(e, backgr

48、ound:'#1874CD'format:function (item, category) return category + + item.data)/(e)lineChart.scrollStart(e);/ 開始滾動(dòng), touchmove:function (e) /(e) lineChart.scroll(e), touchend:function (e) /(e) lineChart.scrollEnd(e),/創(chuàng)建圖表數(shù)據(jù)createChartData:function (

49、) var categories = var data1 = let idataLength = this .data.idata.lengthconsole.log('idataLength: ' + idataLength)for ( var i =0; i < idataLength; i+) categories.push( this .data.idatai.samplingTime)data1.push( this .data.idatai.temp)return categories: categories, temp_data: data1, /* 生命周

50、期函數(shù)-監(jiān)聽頁面加載*/onLoad:function (options) /頁面初始化options為頁面跳轉(zhuǎn)所帶來的參數(shù)const ideviceld = options.ideviceldtempData = options.tempDatalet recordLen =0let deviceIdLen =0let brand = wx.getSystemInfoSync().brandif (brand.indexOf( 'iPhone' ) >=0) / 蘋果手機(jī)recordLen = recordLenideviceIdLen = deviceIdLeni e

51、lse recordLen = recordLenadeviceIdLen = deviceIdLenalet recordNum = tempData.length / recordLenrecordCount =0this .data.idata =/將該deviceId的數(shù)據(jù)過濾出來for ( let i =0; i < recordNum; i+ ) let begin = i * recordLenlet end = begin + recordLenlet record = tempData.substring(begin, end)let deviceId = record

52、.substring(0, deviceIdLen)if (deviceId = ideviceId) const obj = /構(gòu)造一個(gè)對(duì)象，添加采樣時(shí)間，溫度5)let dateSec = parseInt(record.substring(deviceIdLen, recordLen-let date = new Date (dateSec) / 取手機(jī)系統(tǒng)時(shí)間obj.samplingTime = util.formatTime(date)obj.temp = record.substring(recordLen -5, recordLen)this .data.idata.push(obj)if (temp_min > obj.temp) temp_min = obj.tempif (temp_max < obj.temp) temp_max = obj.temprecordCount+this .setData( deviceld: ideviceld, amount: recordCount,idata:this .data.idata)/ 畫曲線let windowWidth =320;/ 用于設(shè)置 wxCharts 寬度try var res = wx.getSys