微信小程序開發(fā)邊做邊學(xué) 課件 操作篇-微信小程序第7章 簽到測距模塊開發(fā)

第七章：簽到測距模塊開發(fā)ontents目錄簽到測距頁面布局01實現(xiàn)測距功能02C位置相關(guān)信息API調(diào)用03課前討論二十大代表胡偉武：自主研發(fā)中國人的CPU

胡偉武，龍芯中科技術(shù)股份有限公司董事長，中國科學(xué)院計算技術(shù)研究所研究員，博士生導(dǎo)師。在他的帶領(lǐng)下，“龍芯1號”研發(fā)成功，這是中國第一枚擁有自主知識產(chǎn)權(quán)的通用高性能微處理芯片，而后又主持研制了“龍芯”系列芯片，實現(xiàn)了我國CPU關(guān)鍵核心技術(shù)的突破。

“對任何一臺計算機(jī)而言，CPU和操作系統(tǒng)都是最核心的兩個底層技術(shù)?！焙鷤ノ湔f，其實早在上個世紀(jì)，中國的科研人員就有了自主研發(fā)CPU的念頭。他常常想起“玻璃房子”的故事。20世紀(jì)90年代，《瓦森納協(xié)定》對包括計算機(jī)在內(nèi)的中國尖端科技實施全面封鎖?！拔覀儑夷菚r候進(jìn)口美國的高性能計算機(jī)，用于天氣預(yù)報、石油勘探，有時候還需要通過元首外交才能解決?！焙鷤ノ湔f，由于進(jìn)口時承諾過不能用于軍事目的，機(jī)房外面需要蓋一個玻璃墻。玻璃里面，中國科學(xué)家上機(jī)操作，而玻璃外面，美國派來的專家會盯緊他們的一舉一動。胡偉武和團(tuán)隊的艱難歷程1998年4月，胡偉武的導(dǎo)師夏培肅聯(lián)合金怡濂院士、周毓麟院士召開香山科學(xué)會議，研討我國高性能計算機(jī)怎么發(fā)展，胡偉武作為會議秘書參會。會議的第三天，大家就開始討論CPU的自主研發(fā)。1999年，時任中科院計算所所長的李國杰開始呼吁，在“十五”期間做中國自主的CPU。不久后，時年33歲的胡偉武承擔(dān)了研發(fā)CPU的課題，并獲得100萬的資金支持。2001年6月，研究團(tuán)隊迅速擴(kuò)大至三五十人。2001年5月，胡偉武結(jié)束了一次國際會議，回國后便開始全力投入做CPU設(shè)計。由于時間緊張，在確定流水線結(jié)構(gòu)時，團(tuán)隊來不及看論文，也來不及做實驗，胡偉武和伙伴們靠著過去的知識積累，憑著感覺往前走。2002年8月10日凌晨6時08分，login提示符出現(xiàn)在屏幕上，整個實驗室一片歡呼，這個提示符意味著，安裝了“龍芯1號”CPU的計算機(jī)成功啟動工作。雖然這款CPU的性能上仍存在較大差距，但中國人只能依靠進(jìn)口CPU制造計算機(jī)的歷史終結(jié)了。2010年，胡偉武決定創(chuàng)辦企業(yè)，繼續(xù)深入研發(fā)的同時，讓龍芯走向產(chǎn)業(yè)化。之后經(jīng)歷了資金短缺，人才流失，產(chǎn)品性能跟不上等各項問題和挑戰(zhàn)，團(tuán)隊不斷克服直至

2015年，龍芯銷售額過億元，龍芯系列產(chǎn)品被應(yīng)用在交通、黨政、能源、電力、石油等領(lǐng)域，龍芯中科終于實現(xiàn)了盈虧平衡。到2022年，國產(chǎn)的CPU性能，已經(jīng)逼近市場主流的CPU產(chǎn)品了，目前龍芯致力于提高性價比，在實現(xiàn)自主性的同時接受開放性市場的考驗。

大力弘揚工匠精神

什么是工匠精神？有人會說：對于個人，工匠精神是干一行、愛一行、專一行、精一行，務(wù)實肯干、堅持不懈、精雕細(xì)琢的敬業(yè)精神；對于企業(yè)，是守專長、制精品、創(chuàng)技術(shù)、建標(biāo)準(zhǔn)，持之以恒、精益求精、開拓創(chuàng)新的企業(yè)文化；對于社會，是講合作、守契約、重誠信、促和諧，分工合作、協(xié)作共贏、完美向上的社會風(fēng)氣。工匠精神也是“執(zhí)著專注、精益求精、一絲不茍、追求卓越”十六個字。胡偉武及其團(tuán)隊的不懈努力彰顯了工匠精神的新時代價值，體現(xiàn)了大國工匠的責(zé)任與擔(dān)當(dāng)。工匠精神是我國優(yōu)秀傳統(tǒng)文化的重要內(nèi)容和寶貴財富?！犊脊び浗狻分?，“周人尚文采，古雖有車，至周而愈精，故一器而工聚焉。如陶器亦自古有之。舜防時，已陶漁矣，必至虞時，瓦器愈精好也?！狈从车恼俏覈糯哪芄で山硞儾粩嘧非蠹妓嚲M(jìn)的精神品格。工匠精神助力高質(zhì)量發(fā)展二十大聚焦：錨定高質(zhì)量建功新時代。報告指出：“建設(shè)現(xiàn)代化產(chǎn)業(yè)體系。堅持把發(fā)展經(jīng)濟(jì)的著力點放在實體經(jīng)濟(jì)上，推進(jìn)新型工業(yè)化，加快建設(shè)制造強(qiáng)國、質(zhì)量強(qiáng)國、航天強(qiáng)國、交通強(qiáng)國、網(wǎng)絡(luò)強(qiáng)國、數(shù)字中國?！薄?0年來，我國全社會研發(fā)經(jīng)費支出從一萬億元增加到二萬八千億元，居世界第二位，研發(fā)人員總量居世界首位?；A(chǔ)研究和原始創(chuàng)新不斷加強(qiáng)，一些關(guān)鍵核心技術(shù)實現(xiàn)突破，戰(zhàn)略性新興產(chǎn)業(yè)發(fā)展壯大，載人航天、探月探火、深海深地探測、超級計算機(jī)、衛(wèi)星導(dǎo)航、量子信息、核電技術(shù)、大飛機(jī)制造、生物醫(yī)藥等取得重大成果，進(jìn)入創(chuàng)新型國家行列。實現(xiàn)中華民族偉大復(fù)興的中國夢的新時代，呼喚并迫切需要大國工匠精神。就是要把“工匠精神”打造成一個大國、強(qiáng)國的重要精神支柱。凱歌奮進(jìn)，揚帆遠(yuǎn)航。如今，每一位勞動者都是主角，更加需要“工匠精神”的引領(lǐng)，并成為“工匠精神”的踐行者。讓我們對“工匠精神”多一份敬重敬畏、多一份純粹、多一份腳踏實地、多一份專注持久。

簽到測距頁面布局01ranspageT浙江工商大學(xué)7.1簽到測距頁面布局

（1）添加簽到tabBar右擊pages目錄，單擊“新建目錄”按鈕，命名為signin。右擊signin目錄，單擊“新建Page”按鈕。命名為signin，完成簽到測距頁面的新建。去icon下載網(wǎng)站下載兩個圖片作為簽到測距頁面的icon與selectedIcon，將下載的圖片存放在doudouyun項目的images文件夾下。浙江工商大學(xué)7.1簽到測距頁面布局

app.json文件的tabBar屬性的代碼"tabBar":{

"list":[{

"pagePath":"pages/index/index",

"text":"主頁面",

"iconPath":"images/tab_account1.png",

"selectedIconPath":"images/tab_account2.png"},{

"pagePath":"pages/signin/signin",

"text":"簽到",

"iconPath":"images/signin2.png",

"selectedIconPath":"images/signin1.png"},{

"pagePath":"pages/my/myinfo",

"text":"我的",

"iconPath":"images/tab_course1.png",

"selectedIconPath":"images/tab_course2.png"}]},pages/signin/signin為簽到測距頁面的頁面路徑images/signin2.png為簽到測距頁面的片路徑images/signin1.png為被選中時的圖片路徑浙江工商大學(xué)7.1簽到測距頁面布局

（2）簽到測距頁面基本布局簽到測距頁面主要包括了四個部分，分別是選擇位置、獲取當(dāng)前位置、測距按鈕和所測得的距離將測量的距離顯示在初始值為“helloworld”的view組件中。浙江工商大學(xué)7.1簽到測距頁面布局

★選擇位置與獲取當(dāng)前位置①在WeUI樣式庫的表單->list中找到帶說明、帶跳轉(zhuǎn)的列表項②將該列表項的wxml代碼拷貝至signin.wxml文件中③修改代碼中對應(yīng)的文字，并將代碼中原本的navigator組件改為view組件，刪除組件中的url屬性<view

class="weui-cellsweui-cells_after-title">

<view

class="weui-cellweui-cell_access"

hover-class="weui-cell_active">

<view

class="weui-cell__bd">選擇位置</view>

<view

class="weui-cell__ftweui-cell__ft_in-access">（）</view>

</view>

<view

class="weui-cellweui-cell_access"

hover-class="weui-cell_active">

<view

class="weui-cell__bd">獲取當(dāng)前位置</view>

<view

class="weui-cell__ftweui-cell__ft_in-access">（）</view>

</view></view>修改后的代碼?浙江工商大學(xué)7.1簽到測距頁面布局

★測距按鈕①在WeUI樣式的表單->button中找到“頁面主操作Normal”按鈕②將對應(yīng)button的wxml代碼拷貝至signin.wxml中③將“頁面主操作Normal”改為“測距”<button

class="weui-btn"

type="primary">測距</button>浙江工商大學(xué)7.1簽到測距頁面布局

添加button后，編譯發(fā)現(xiàn)測距button的兩端占滿了這個頁面，沒有空隙，相對不是很美觀在signin.wxss中添加測距buttion組件中對應(yīng)的weui-btn樣式.weui-btn{

margin:

20px

15px;}樣式代碼添加后的樣式浙江工商大學(xué)7.1簽到測距頁面布局

（3）測距結(jié)果在signin.wxml中添加一個view組件，用于顯示變量{{motto}}，在signin.js文件的data數(shù)組中添加變量motto，初始值為“helloworld”，添加的代碼具體如下：signin.wxml代碼<view

class="motto">{{motto}}</view>signin.wxss代碼.motto{

margin-top:

150px;

text-align:

center}sign.js代碼data:{motto:'helloworld',},motto樣式中，margin-top屬性用于控制該組件與上一個button組件之間的距離，text-align值為center則是為了使得該組件居中。位置相關(guān)信息API調(diào)用02ranspageT浙江工商大學(xué)7.2位置信息相關(guān)API調(diào)用★選擇位置API(1)在signin.wxml文件選擇位置所在列表項的view組件中添加bindtap函數(shù)chooseLocation，并在signin.js文件的data數(shù)組中添加一個

choosen數(shù)組，其中choosen數(shù)組中有l(wèi)atitude和longitude兩個變量，變量初始值為0。(2)在signin.wxml文件選擇位置所在列表項中說明文字所在view組件，將“()”改為“({{choosen.longitude}},{{choosen.latitude}})”。這樣選擇位置對應(yīng)的經(jīng)緯度坐標(biāo)初始值為(0,0)。(3)在signin.js文件中添加chooseLocation函數(shù)，使用wx.chooseLocation獲取所選目標(biāo)位置的經(jīng)緯度，并賦值給choosen數(shù)組的longitude和

latitude，chooseLocation函數(shù)的代碼chooseLocation:function(){wx.chooseLocation({success:(res)=>{

this.setData({choosen:res,})},})},浙江工商大學(xué)7.2位置信息相關(guān)API調(diào)用在wx.chooseLocation中使用console.log(res)打印成功回調(diào)函數(shù)的返回值浙江工商大學(xué)7.2位置信息相關(guān)API調(diào)用對chooseLocation函數(shù)進(jìn)行簡單修改，也可以實現(xiàn)調(diào)用選擇位置API，并獲取目標(biāo)位置的經(jīng)緯度。修改后的代碼浙江工商大學(xué)7.2位置信息相關(guān)API調(diào)用chooseLocation函數(shù)寫完后，單擊“選擇位置”按鈕，會跳轉(zhuǎn)至選擇位置頁面，該頁面主要調(diào)用了騰訊地圖，選擇一個位置后，單擊“確定”按鈕，即跳轉(zhuǎn)回簽到測距頁面，可見選擇位置后面的經(jīng)緯度坐標(biāo)中顯示了所選位置的經(jīng)緯度。浙江工商大學(xué)7.2位置信息相關(guān)API調(diào)用★獲取當(dāng)前位置API（1）在signin.wxml文件獲取當(dāng)前位置所在列表項的view組件中添加bindtap函數(shù)getLocation，并在signin.js文件的data數(shù)組中添加一個got數(shù)組，其中g(shù)ot數(shù)組中有l(wèi)atitude和longitude兩個變量，變量初始值為0。（2）在signin.wxml文件獲取當(dāng)前位置所在列表項中說明文字所在view組件，將“()”改為“({{got.longitude}},{{got.latitude}})”。這樣獲取當(dāng)前位置對應(yīng)的經(jīng)緯度坐標(biāo)初始值為(0,0)。（3）在signin.js文件中添加getLocation函數(shù)，使用wx.getLocation獲取，并且在app.json添加權(quán)限聲明用戶當(dāng)前位置的經(jīng)緯度，并賦值給got數(shù)組的longitude和latitude，

getLocation函數(shù)的代碼getLocation:function(){wx.getLocation({type:'gcj02',success:(res)=>{

this.setData({got:res,})},})},"permission":{

"scope.userLocation":{

"desc":"你的位置信息將用于學(xué)習(xí)在線簽到到功能"

}}浙江工商大學(xué)7.2位置信息相關(guān)API調(diào)用在wx.getLocation中使用console.log(res)打印成功回調(diào)函數(shù)的返回值浙江工商大學(xué)7.2位置信息相關(guān)API調(diào)用getLocation函數(shù)寫完后，單擊“獲取當(dāng)前位置”按鈕，即可看見獲取當(dāng)前位置后面的經(jīng)緯度坐標(biāo)中顯示了用戶當(dāng)前位置的經(jīng)緯度實現(xiàn)測距功能03ranspageT浙江工商大學(xué)7.3實現(xiàn)測距功能★巧用button的disabled屬性（1）在signin.js文件的data數(shù)組中定義flag1和flag2兩個變量，用來表示是否完成位置選擇和是否獲取當(dāng)前位置信息，初始值為false，當(dāng)調(diào)用選擇位置

API時，給變量flag1賦值為true，當(dāng)調(diào)用獲取當(dāng)前位置API時，給變量

flag2賦值為true。signin.js中data數(shù)組代碼data:{motto:'helloworld',choosen:{latitude:0,longitude:0},got:{latitude:0,longitude:0},flag1:false,flag2:false},signin.js中chooseLocation代碼

chooseLocation:function(){wx.chooseLocation({success:(res)=>{this.setData({choosen:res,flag1:true})},})},signin.js中g(shù)etLocation代碼getLocation:function(){wx.getLocation({type:'gcj02',success:(res)=>{

this.setData({got:res,flag2:true})},})},浙江工商大學(xué)7.3實現(xiàn)測距功能（2）在signin.wxml文件的button組件中添加一個disabled屬性代碼如下：<button

class="weui-btn"

type="primary"

disabled="{{!(flag1&&flag2)}}"

>測距

</button>當(dāng)兩個API均未被調(diào)用時，flag1和flag2均為false，!(flag1&&flag2)=true，測距按鈕被禁用當(dāng)僅調(diào)用了選擇位置API時，flag1值為true，flag2值為false，!(flag1&&flag2)=true，測距按鈕被禁用浙江工商大學(xué)7.3實現(xiàn)測距功能當(dāng)僅調(diào)用了獲取當(dāng)前位置API時，flag1值為false，flag2值為true，!(flag1&&flag2)=true，測距按鈕仍被禁用當(dāng)且僅當(dāng)兩個API均被調(diào)用時，flag1和flag2均為true，!(flag1&&flag2)=false，測距按鈕可用浙江工商大學(xué)7.3實現(xiàn)測距功能★js實現(xiàn)經(jīng)緯度測距（1）給測距按鈕添加一個bindtap函數(shù)，名為calculate，具體代碼如下：

<button

class="weui-btn"

type="primary"

disabled="{{!(flag1&&flag2)}}"

bindtap='calculate'>測距</button>

（2）經(jīng)緯度測距通過數(shù)學(xué)公式計算，測距的代碼可以去網(wǎng)上找，在網(wǎng)上可以找到很多相關(guān)的代碼，本文主要參考了標(biāo)題名為“js根據(jù)經(jīng)緯度計算兩點距離”的博客，該博客鏈接為：

/weixin_40687883/article/details/80361779。將其中的測距相關(guān)的js代碼拷貝至signin.js，并根據(jù)情況進(jìn)行簡單修改。浙江工商大學(xué)7.3實現(xiàn)測距功能Rad:function(d){

returnd*Math.PI/180.0;},

calculate:function(){