亚洲免费av电影一区二区三区,日韩爱爱视频,51精品视频一区二区三区,91视频爱爱,日韩欧美在线播放视频,中文字幕少妇AV,亚洲电影中文字幕,久久久久亚洲av成人网址,久久综合视频网站,国产在线不卡免费播放

        ?

        基于微信小程序的AI 智能云路向?qū)У脑O(shè)計與實(shí)現(xiàn)

        2022-01-28 06:34:16郭晨晨李佳虎李雙張慧娥通信作者
        電子制作 2022年1期
        關(guān)鍵詞:頁面程序規(guī)劃

        郭晨晨,李佳虎,李雙,張慧娥(通信作者)

        (西安思源學(xué)院電子信息工程學(xué)院,陜西西安,710038)

        0 引言

        九月是收獲的季節(jié),各大高校迎來了新生力量,全國各地的學(xué)生來到新校園,開啟人生的新階段。為了更快的熟悉新環(huán)境,學(xué)校進(jìn)行的周密報道的安排,老生帶隊順利的完成了入學(xué)報道,可是想獨(dú)自瀏覽一下學(xué)校的美景,熟悉校園的整體布局,拿著學(xué)校準(zhǔn)備的紙質(zhì)地圖,還是經(jīng)常找不到地方。除了新生外,學(xué)校經(jīng)常會承接一些社會考試,這些考生對校園不熟悉,經(jīng)常有找不到考場的現(xiàn)象。微信小程序(Wechat Mini Program),是一種不需要下載安裝即可使用的應(yīng)用,它實(shí)現(xiàn)了應(yīng)用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應(yīng)用[1]。所以開發(fā)一款校園導(dǎo)航微信小程序是非常有必要的。不需要下載安裝軟件,新生和考生只需要掃碼,就可以在校園隨心所欲的暢游,更加深入的了解校園的每一個重要角落。

        1 功能設(shè)計

        ■1.1 總體功能

        智能云路向?qū)〕绦虻闹饕δ苣K是思源簡介和了解思源。思源簡介包含輪播圖展示、校園介紹和路徑規(guī)劃的功能。了解思源包含12 個景點(diǎn)導(dǎo)航、當(dāng)前定位、景點(diǎn)列表、地點(diǎn)搜索和路徑規(guī)劃功能。其中定位功能通過騰訊地圖中的地圖組件和定位接口進(jìn)行定位;路徑規(guī)劃通過高德地圖進(jìn)行。總體功能如圖1 所示。

        圖1 總體功能圖

        ■1.2 頁面設(shè)計

        該小程序共有5 個頁面,小程序首頁、簡介頁、校園導(dǎo)覽頁、路徑規(guī)劃頁、和搜索頁面。

        首頁中有思源簡介和了解思源兩個鏈接按鈕。

        簡介頁分為兩部分,第一部分以輪播的形式顯示校園的三張校園圖片,第二部分顯示學(xué)校的簡介,在兩部分中間添加路徑規(guī)劃按鈕,單擊此按鈕進(jìn)入路徑導(dǎo)航頁面。

        校園導(dǎo)覽頁分為三部分,第一部分是導(dǎo)航欄,包含景點(diǎn)、行政樓、平階教室、教學(xué)樓等8 個選項(xiàng)卡,第二部分是地圖展示,在地圖中標(biāo)識了學(xué)校的所有的建筑、景點(diǎn),運(yùn)動場所等,并且添加了搜索和規(guī)劃路徑按鈕,第三部分是每一個導(dǎo)航按鈕下的具體景觀列表,列表中包含圖片、文件和規(guī)劃路徑。

        路徑規(guī)劃頁利用騰訊地圖和高德地圖的Key 進(jìn)行路徑規(guī)劃,顯示起點(diǎn)和終點(diǎn)并進(jìn)行路徑導(dǎo)航[3]。

        搜索頁面通過在文本框中輸入景點(diǎn)、建筑或場所的名稱,點(diǎn)擊搜索按鈕,在頁面下方顯示搜索結(jié)果,可以進(jìn)行路徑規(guī)劃[4]。

        ■1.3 數(shù)據(jù)設(shè)計

        微信小程序數(shù)據(jù)以json 格式進(jìn)行顯示,在該小程序中創(chuàng)建一個公共資源文件夾,在文件夾下創(chuàng)建一個數(shù)據(jù)文件,包含學(xué)校簡介數(shù)據(jù)和學(xué)校地圖數(shù)據(jù)。學(xué)校簡介數(shù)據(jù)包含學(xué)??s寫,學(xué)校全名,首頁圖片地址,分享時展示圖片的地址,學(xué)校的經(jīng)度,緯度,簡介圖片和簡介。學(xué)校地圖數(shù)據(jù)以數(shù)組形式展示,數(shù)組元素是8 個選項(xiàng)卡,每個選項(xiàng)卡中又包括景點(diǎn)名稱,比例大小設(shè)置和具體數(shù)據(jù),其中具體數(shù)據(jù)以數(shù)組的形式列出,具體每個元素中記錄的信息有名稱,經(jīng)度、緯度、圖標(biāo)、寬度、高度、圖片和描述。在數(shù)據(jù)文件中通過module.exports 語句暴露簡介和地圖數(shù)據(jù)。這樣在其它的邏輯文件中通過require 就可以利用公共數(shù)據(jù)了。

        該小程序中存儲的部分建筑和主要場所的經(jīng)度(longitude)和緯度(latitude)內(nèi)容表1 所示。

        表1

        2 功能實(shí)現(xiàn)

        在小程序的主體文件中設(shè)置公共的內(nèi)容,App.json中設(shè)置pages 頁和window 的樣式,在App.js 中編寫onlaunch 回調(diào)函數(shù),獲取學(xué)校的地理位置信息,并通過自定義函數(shù)載入本地數(shù)據(jù)在加載網(wǎng)絡(luò)數(shù)據(jù)。在Untils 公共文件夾下創(chuàng)建地圖的邏輯處理文件amap-wx.js;創(chuàng)建配置文件config.js,包含調(diào)試模式開關(guān),調(diào)試模式下只調(diào)用本地數(shù)據(jù),學(xué)校名稱和高德路線規(guī)劃密鑰,并且需要把其域名加入為request 合法域名[2]。

        ■2.1 頁面實(shí)現(xiàn)

        該小程序共有5 個頁面,小程序首頁、簡介頁、校園導(dǎo)覽頁、路徑規(guī)劃頁、和搜索頁面。通過.wxml 文件進(jìn)行基本組件的布局,通過.wxss 文件進(jìn)行頁面的樣式設(shè)置。小程序首頁的.wxml 中主要使用view 組件作為容器組件,navigator 組件實(shí)現(xiàn)跳轉(zhuǎn),text 組件實(shí)現(xiàn)文字顯示;小程序首頁如圖2 所示。

        圖2 小程序首頁圖

        簡介頁通過swiper、block 和swipter-item 組件結(jié)合來實(shí)現(xiàn)輪播圖和學(xué)校簡介信息,使用導(dǎo)航組件鏈接到輪播圖中顯示的建筑的路徑規(guī)劃。

        校園導(dǎo)覽頁放在view 容器組件中,第一部分使用scroll-view 和lable 組件完成選項(xiàng)卡的實(shí)現(xiàn),scroll-view組件中的每一項(xiàng),即選項(xiàng)卡的顯示內(nèi)容使用view 組件;外層view 組件的樣式主要設(shè)置寬度為100%,scroll-view 組件的滾動方向設(shè)置為橫向,內(nèi)部view 組件的寬度需要計算;第二部分使用map 組件顯示地圖,使用經(jīng)度和緯度屬性顯示標(biāo)記,并且取得當(dāng)前定位;第三部分使用button 組件顯示后端景觀數(shù),使用scroll-view 組件顯示具體景點(diǎn)和建筑物列表,通過在scroll-view 組件中插入view 組件,使用循環(huán)語句實(shí)現(xiàn)后端數(shù)據(jù)的顯示,使用navigator 組件實(shí)現(xiàn)路徑規(guī)劃和搜索跳轉(zhuǎn)。

        路徑規(guī)劃頁使用map 地圖組件,需要顯示當(dāng)前位置的經(jīng)緯度、標(biāo)記、路線等屬性,使用cover-view 組件顯示后端的距離。

        搜索頁面主要使用表單的input 組件來展現(xiàn)搜索框,需要設(shè)置綁定事件和占位符屬性等,使用view 和navigator組件顯示搜到的結(jié)果和導(dǎo)航鏈接。

        ■2.2 邏輯功能實(shí)現(xiàn)

        邏輯功能通過.js 文件來實(shí)現(xiàn),首頁.js 文件主要包含數(shù)據(jù)集,onload 函數(shù);校園導(dǎo)覽頁的.js 文件主要包含數(shù)據(jù)集,onload 函數(shù),自定義定位函數(shù),單擊函數(shù)。定位函數(shù)的主要代碼如下:

        校園導(dǎo)覽頁如圖3 所示。

        圖3 校園導(dǎo)覽頁

        2.2.1 路徑規(guī)劃功能

        路徑規(guī)劃的邏輯文件.js的主要內(nèi)容包含聲明應(yīng)用實(shí)例,請求公共文件,page 頁面中又?jǐn)?shù)據(jù)集,onload 函數(shù),自定義路徑函數(shù),路徑規(guī)劃如圖4 所示。計算路徑長度的代碼如下:

        圖4 路徑規(guī)劃圖

        2.2.2 搜索功能

        從搜索框中獲取文本,判斷數(shù)據(jù)是否為空,如果不為空,在地圖中所標(biāo)注的圖標(biāo)中找相應(yīng)名稱,把對應(yīng)數(shù)據(jù)存入需要顯示的數(shù)據(jù)中,包含圖標(biāo),文字,路徑規(guī)劃鏈接。搜索功能圖如圖5 所示。

        圖5 搜索功能圖

        3 系統(tǒng)測試

        微信小程序測試主要包含權(quán)限測試,功能測試,兼容性測試和易用性測試。權(quán)限測試從未授權(quán)微信登錄小程序、已授權(quán)微信登錄小程序兩個方面測試;按照功能模塊、數(shù)據(jù)流向、同一功能不同的入口有效性和交互性檢查對導(dǎo)航小程序的功能進(jìn)行測試,系統(tǒng)可以正常進(jìn)行學(xué)校簡介,用戶的實(shí)時定位,目的地導(dǎo)航,路徑規(guī)劃,目的地搜索的完整過程。兼容性測試主要包含操作系統(tǒng)兼容性,屏幕兼容性和微信兼容性,通過對Android 操作系統(tǒng)和iOS 系統(tǒng)進(jìn)行測試,屏幕的正確顯示性測試,在不同微信版本上進(jìn)行了測試;通過導(dǎo)航、功能入口、上下級進(jìn)入與返回和字體、圖片、動態(tài)交互效果對易用性進(jìn)行了測試。在測試期間中間出現(xiàn)過bug,都一一排除。并且在2021 年9 月新生報到期,已經(jīng)推廣使用,學(xué)生在使用過程中沒有卡頓現(xiàn)象,運(yùn)行效果良好,用戶體現(xiàn)滿意度高。

        4 結(jié)束語

        基于微信小程序的智能云路向?qū)б晕靼菜荚磳W(xué)院為實(shí)例進(jìn)行開發(fā),主要實(shí)現(xiàn)了校園介紹、路線規(guī)劃、當(dāng)前定位、重要場所及建筑的列表,搜索等功能,使用微信小程序的通用組件和map 組件完成前端頁面布局,利用JavaScript 腳本語言實(shí)現(xiàn)邏輯處理,調(diào)用騰訊地圖接口獲取當(dāng)前定位,通過獲取高德地圖的key 完成路徑規(guī)劃。該智能云路向?qū)椭律煜ば@環(huán)境,讓新生更快更準(zhǔn)確的到達(dá)目的地,為參加考試的考生準(zhǔn)確導(dǎo)航到考場。該程序的不足之處是沒有實(shí)現(xiàn)語音導(dǎo)航功能,后期將進(jìn)一步完善語音導(dǎo)航功能。該導(dǎo)航系統(tǒng)有很廣泛的推廣價值,可以推廣到景區(qū),游客只要掃碼就該程序就可以實(shí)現(xiàn)電子導(dǎo)游的功能。

        猜你喜歡
        頁面程序規(guī)劃
        大狗熊在睡覺
        刷新生活的頁面
        試論我國未決羈押程序的立法完善
        規(guī)劃引領(lǐng)把握未來
        “程序猿”的生活什么樣
        快遞業(yè)十三五規(guī)劃發(fā)布
        商周刊(2017年5期)2017-08-22 03:35:26
        英國與歐盟正式啟動“離婚”程序程序
        多管齊下落實(shí)規(guī)劃
        迎接“十三五”規(guī)劃
        創(chuàng)衛(wèi)暗訪程序有待改進(jìn)
        国产亚洲精久久久久久无码77777| 水蜜桃精品视频在线观看| 中文字幕有码无码人妻av蜜桃 | 亚洲va视频一区二区三区| 精品久久久久香蕉网| 人体内射精一区二区三区| 97久久综合区小说区图片区| 免费人妖一区二区三区| 国产日韩av在线播放| 性一交一乱一伦| 日本激情视频一区在线观看| 国产av一卡二卡日韩av| 人妻无码一区二区不卡无码av| 无码AV高潮喷水无码专区线| 果冻国产一区二区三区| 日本一区二区三区视频免费在线 | 91精品福利观看| 91亚洲最新国语中文字幕| 久久精品国产亚洲av不卡国产| 无码丰满熟妇一区二区| 99福利网| 亚洲国产中文字幕九色| 每日更新在线观看av| 18禁超污无遮挡无码免费游戏| 久久青草亚洲AV无码麻豆| 国产精品亚洲综合久久| 公和我做好爽添厨房中文字幕| 久久精品片| 中文天堂一区二区三区| 国产成人精品无码免费看| 国精无码欧精品亚洲一区| 仙女白丝jk小脚夹得我好爽| av新型国产在线资源| 国产午夜伦鲁鲁| 最新国产拍偷乱偷精品| 蜜桃av一区二区三区久久| 国产精品国产三级国产av剧情| 大伊香蕉在线精品视频75| 中文字幕乱码中文乱码毛片| 中文字幕乱码熟女人妻在线| 小宝极品内射国产在线|