Gitee代碼倉(cāng)庫(kù)：桂院校園導(dǎo)航小程序

GitHub代碼倉(cāng)庫(kù)：GLU-Campus-Guide

先?假裝?大伙都成功安裝了靜態(tài)項(xiàng)目，并能在 微信開(kāi)發(fā)者工具 和 手機(jī) 上正確運(yùn)行。

接著就是 將項(xiàng)目 改成自己的學(xué)校。

代碼里的注釋我就不說(shuō)明了，有提到 我的學(xué)校 的文字都改成你自己的就行

升級(jí)日志 1.2

優(yōu)化調(diào)整了部分內(nèi)容，沒(méi)有修改地圖的功能和代碼。

1. 全局 app.json

app.json 中的 navigationBarTitleText 屬性 設(shè)置的是 全局的導(dǎo)航欄標(biāo)題文字內(nèi)容，改成自己的。

"navigationBarTitleText": "桂院校園導(dǎo)航",

2. 更改學(xué)校信息?utils.js

自行修改

包括但不限于?小程序名稱 、小程序封面 、學(xué)校全稱 、學(xué)校簡(jiǎn)稱 、學(xué)校英文名 、學(xué)校英文簡(jiǎn)稱 、學(xué)校坐標(biāo)（別把 經(jīng)度 和 緯度 填反了） 、?；?#xff08;進(jìn)入文件夾將新圖片覆蓋原圖片就行） 、學(xué)校信息 、 風(fēng)景輪播圖 、學(xué)校簡(jiǎn)介 、視頻 。

?天氣功能是調(diào)用 和風(fēng)天氣API 實(shí)現(xiàn)。我只展示學(xué)校那的天氣，所以相關(guān)的數(shù)據(jù)就寫(xiě)死了。使用坐標(biāo)拾取器就能獲取學(xué)校的坐標(biāo)。

坐標(biāo)拾取器

如果你想搞那種根據(jù)定位獲取天氣，或者是展示更多天氣的那種，可以參考下面的大佬的文章

微信小程序?qū)崿F(xiàn)天氣預(yù)報(bào)功能（支持自動(dòng)定位）（附源碼）

?

?4. 校園信息?pages/school/school

圖標(biāo)欄后面的兩個(gè)功能按鈕，自行更改，實(shí)現(xiàn)方式如下。

官微按鈕是通過(guò) wx.previewImage 接口實(shí)現(xiàn)（全屏預(yù)覽圖片）。

獲取 公眾號(hào)二維碼 的方法

招生官微按鈕也是?通過(guò)?wx.navigateToMiniProgram 接口實(shí)現(xiàn)（跳轉(zhuǎn)外部小程序）。跳轉(zhuǎn)“桂林學(xué)院 招生辦”小程序。如果你學(xué)校沒(méi)有招生小程序就換成學(xué)校別的小程序 或者 改成像樓上一樣全屏預(yù)覽圖片（學(xué)校的官方圖書(shū)館、學(xué)生會(huì)或者什么的公眾號(hào)）。

獲取 小程序 appId 的方法

??

5. 學(xué)校信息?pages/school/information/information

院系信息 和 部門聯(lián)絡(luò)電話?引用 utils.js 里的數(shù)據(jù)，院系信息是用list存儲(chǔ)的，部門聯(lián)絡(luò)電話是用嵌套list存儲(chǔ)的，比較好理解，?改成自己的。

嵌套list 外層 是 部門 ，內(nèi)層是當(dāng)前 部門 下的 所有 聯(lián)絡(luò)信息。

??

6. 交通信息?pages/school/traffic/traffic

因?yàn)槠渲猩婕暗搅硕喾N顏色，不好寫(xiě)在until.js里引入使用。就將文字全部寫(xiě)死，自行修改。

不同顏色的文字使用不同樣式渲染。

??

7. 個(gè)人中心?pages/mypage/mypage

去除了登錄的全部代碼，因?yàn)楝F(xiàn)在想要獲取小程序用戶頭像昵稱很麻煩

有需要的可以自行研究

小程序用戶頭像昵稱獲取規(guī)則調(diào)整公告

“特別說(shuō)明”按鈕中的說(shuō)明信息?自行修改?，或 直接刪除這段頁(yè)面代碼

“聯(lián)系作者”按鈕是通過(guò) wx.previewImage 接口實(shí)現(xiàn)（全屏預(yù)覽圖片），自行更改為你自己的微信二維碼。

?

8. 軟件聲明與致謝?pages/mypage/statement/statement

自行修改，如果用到了 我的項(xiàng)目或代碼 請(qǐng)說(shuō)明，謝謝！

如果你開(kāi)源自己項(xiàng)目，就自行更改；否則直接刪除那一部分

??

接下來(lái)的都是地圖相關(guān)的了。

9.地點(diǎn)數(shù)據(jù)

地點(diǎn)數(shù)據(jù) 引用 utils.js 里的數(shù)據(jù)。是用嵌套list存儲(chǔ)的，比較好理解，?改成自己的。

嵌套list 外層 是 類別 ，內(nèi)層是當(dāng)前 類別 下的 所有 地點(diǎn)。

里面的數(shù)據(jù)都要加上引號(hào)

name：地點(diǎn)名稱
aliases：地點(diǎn)別名（可為空）
img：圖片鏈接
desc：地點(diǎn)描述（可為空）
latitude：緯度
longitude：經(jīng)度

10. 地圖?pages/map/map

地圖中心點(diǎn)坐標(biāo)

這個(gè)我放在utils.js中了，修改那里就行。覺(jué)得放utils.js里不習(xí)慣就自行修改。

?修改 紅框 里的?經(jīng)度緯度 為 你自己學(xué)校的坐標(biāo)（別把 經(jīng)度 和 緯度 填反了！！！）

坐標(biāo)拾取器

??

地圖邊界

地圖邊界是通過(guò)?MapContext.setBoundary 接口實(shí)現(xiàn)（限制地圖的顯示范圍）。

這個(gè)接口使用有要求，基礎(chǔ)庫(kù) 2.22.0及以上版本

?修改 紅框 里的 西南角和東北角 的?經(jīng)度緯度 為 你自己學(xué)校區(qū)域西南角和東北角的坐標(biāo)（大概就行，選遠(yuǎn)一點(diǎn)也無(wú)妨）（別把 經(jīng)度 和 緯度 填反了！！！）

坐標(biāo)拾取器

??

自定義圖層（覆蓋校園地圖）

不使用的話就刪去整個(gè)函數(shù)

我使用這個(gè)是因?yàn)槲业膶W(xué)校在騰訊地圖上太干凈了（啥都沒(méi)有）。。。影響觀感。

之后用PS畫(huà)了三天三夜才畫(huà)出來(lái)，真的痛苦。

可以來(lái)比較一下（都是100米標(biāo)尺），簡(jiǎn)直是天壤之別

??

自定義圖層是通過(guò)?MapContext.addGroundOverlay 接口實(shí)現(xiàn)（創(chuàng)建自定義圖片圖層，圖片會(huì)隨著地圖縮放而縮放）。

自定義圖層不會(huì)在 微信開(kāi)發(fā)者工具上 顯示，只能在手機(jī)端查看。

如果你的學(xué)校在地圖上展示的效果很好就把 整個(gè)接口函數(shù)代碼 刪了。

??

判斷所在位置是否在校區(qū)內(nèi)

通過(guò)?wx.getLocation 接口獲取當(dāng)前的地理位置。將其中的 經(jīng)度 緯度 進(jìn)行判斷，經(jīng)度 和 緯度 在特定范圍內(nèi)，就說(shuō)明?你的位置在校區(qū)內(nèi)。

??

?（所在位置不在學(xué)校時(shí)的）默認(rèn)坐標(biāo)的修改

要修改 data 中的一個(gè)變量 和?location?和?markertap 這兩個(gè)自定義函數(shù)的部分代碼。

data

我設(shè)置的 默認(rèn)地點(diǎn) 是 東門 ，屬于第 4 個(gè) 類別（嵌套列表外層 id 是 4 ）

?

location 自定義函數(shù)

自行更改圖中的兩處的內(nèi)容

上面的是 地圖標(biāo)注點(diǎn) 的?氣泡文本內(nèi)容（左右的那個(gè)空格不要?jiǎng)h，不然顯示會(huì)有點(diǎn)奇怪）

下面的是?消息提示框 的內(nèi)容

??

markertap 自定義函數(shù)

默認(rèn)地點(diǎn)是那個(gè)類別的第幾個(gè)，就把那個(gè)數(shù)填入 紅框 處

??

到這里就完成了，表?yè)P(yáng)一下優(yōu)秀的你自己吧，能夠把這么長(zhǎng)的開(kāi)發(fā)教程看完