微信小程序校園導(dǎo)航設(shè)計(jì)與實(shí)現(xiàn)

盧松升 潘國慶 周瑋

摘 要：小程序是一款以主流社交軟件微信為載體，并在其基礎(chǔ)上拓展微信功能的軟件，在以微信為基礎(chǔ)之上開發(fā)的微信小程序相比于普通手機(jī)APP軟件將更容易被用戶所接受，也更符合互聯(lián)網(wǎng)及社會(huì)發(fā)展的方向.將對微信小程序的系統(tǒng)框架，關(guān)鍵技術(shù)，以及平臺特點(diǎn)和應(yīng)用前景進(jìn)行研究，為開發(fā)者提供一種可行的思路。本課題設(shè)計(jì)開發(fā)的是應(yīng)用在Android手機(jī)上的校園導(dǎo)航微信小程序。所設(shè)計(jì)的校園通信軟件采用了Android開源系統(tǒng)技術(shù)，在微信開發(fā)者工具開發(fā)環(huán)境下，使用了的語言有html，css和js，該小程序可以通過簡單的系統(tǒng)操作來實(shí)現(xiàn)校園信息的獲取，在Android系統(tǒng)中能夠獨(dú)立的運(yùn)行。

關(guān)鍵詞：微信小程序；校園導(dǎo)航；設(shè)計(jì)

微信小程序校園導(dǎo)航系統(tǒng)采用了騰訊位置服務(wù)開源技術(shù)，利用html，JavaScript，css語言和微信開發(fā)者工具對微信小程序校園導(dǎo)航系統(tǒng)進(jìn)行編寫開發(fā)，可以讓用戶能很方便的了解學(xué)院簡介信息、校園周邊環(huán)境、校園內(nèi)部建筑物位置、校園風(fēng)景、校園簡介。在系統(tǒng)的開發(fā)過程中，涉及到微信開發(fā)者工具、html，JavaScript，css，調(diào)用騰訊接口等相關(guān)理論及技術(shù)。

一、開發(fā)環(huán)境搭建

開發(fā)環(huán)境搭建在微信開發(fā)者工具開發(fā)中，是比較重要的一個(gè)過程，現(xiàn)描述如下：要想在Android平臺下順利地開發(fā)出新的微信小程序，首先就要在電腦上搭建屬于Android的環(huán)境。下面就具體介紹下Android的開發(fā)環(huán)境配置。

搭建開發(fā)環(huán)境需要的軟件：

操作系統(tǒng)：windows 10

工具：微信開發(fā)者工具

安裝步驟如下：

第一步：安裝微信開發(fā)者工具

要編寫微信小程序需要先在微信公眾號平臺網(wǎng)站，進(jìn)行賬號注冊。

第二步：下載完后進(jìn)行安裝，打開后第一次進(jìn)入需要進(jìn)行登錄，在創(chuàng)建項(xiàng)目的時(shí)候選擇JS模板。小程序項(xiàng)目創(chuàng)建成果后，會(huì)進(jìn)入開發(fā)調(diào)試環(huán)境中.

二、模塊功能設(shè)計(jì)

（一）首頁功能與學(xué)院簡介功能

首頁主要是一張背景圖以及兩個(gè)控件，用戶可根據(jù)需要了解學(xué)校的信息進(jìn)行選項(xiàng)，“學(xué)院簡介”控件和“逛一逛”控件，分別可以查詢學(xué)校每一個(gè)學(xué)院的信息和校園內(nèi)主要建筑物的地理位置的導(dǎo)航，最后可以到達(dá)需要去的地方規(guī)劃相關(guān)路線。在學(xué)院簡介功能頁面中，包括信息工程學(xué)院管理，管理學(xué)院，外國語學(xué)院等，用戶可以根據(jù)需要查看選擇查相關(guān)學(xué)院，可以有效的了解到學(xué)院的相關(guān)消息。

（二）相關(guān)建筑物顯示功能

用戶可以通過首頁的“逛一逛”控件進(jìn)入到學(xué)校建筑物顯示界面，頁面內(nèi)包括五個(gè)校園景點(diǎn)查詢顯示，三個(gè)教學(xué)樓查詢顯示，兩個(gè)校園查詢顯示，六個(gè)學(xué)院查詢顯示，12個(gè)宿舍查詢顯示，三個(gè)食堂查詢顯示，一個(gè)超市查詢顯示。

（三）路線規(guī)劃功能

當(dāng)用戶進(jìn)入到建筑物位置顯示頁面時(shí)，可以選擇需要查詢的建筑類相關(guān)位置，將其在地圖中顯示，再在可在當(dāng)前界面選擇需要到達(dá)的目的地，通過按下圖表控件進(jìn)行路線規(guī)劃。