筆者由於工作需要，曾經參加過一個微信小程式同 SAP 系統整合的專案，因此從零開始學習了微信小程式的開發知識。這裡透過系列文章把自己所學分享出來，希望對相關學習者有所幫助。

本教程前面三篇文章：

- [微信小程式開發系列 (一) ：開發環境搭建和微信小程式的檢視設計與開發](https://xie.infoq.cn/article/4ca57a6eead2ab45914366874)
- [微信小程式開發系列 (二) ：微信小程式的單步除錯和控制器實現步驟概述](https://xie.infoq.cn/article/7fbce173a83e9de4e46971b43)
- [微信小程式開發系列 (三) ：微信小程式如何響應使用者點選事件和微信平臺 API 的使用方法介紹](https://xie.infoq.cn/article/c8ae51ad8f8298c7e852a5005)

透過本系列前面三篇文章的介紹，大家對微信小程式的檢視和控制器，微信偵錯程式的用法，以及如何消費微信平臺提供的 Public API，已經有了一個最基本的認識了。在這個基礎上，本文讓我們進一步學習微信小程式的頁面跳轉路由設計。

# 微信小程式的頁面跳轉路由設計

這個系列教程的前六篇文章我們都在單個的檢視上操作。現在讓我們建立第二個檢視，然後實現從第一個檢視到第二個檢視的跳轉。
首先開發第二個檢視：

![](https://img-blog.csdnimg.cn/img_convert/9edcf47dd86513a28c6ace584ba47bcf.png)

```html
<view class="container log-list">
<block wx:for="{{logs}}" wx:for-item="log">
<text class="log-item">{{index + 1}}. {{log}}</text>
</block>
</view>
```

做過 Angular 開發的朋友們對上面的檢視設計一定不會陌生。這個檢視的資料來源由模型 logs 提供，是一個列表結果，列表每個元素的資料來源是模型 logs 裡的一條記錄，用 log 代表。

為了讓 log 看起來顯示更整齊，在 log 內容之前，顯示每條 log 的索引。因為 log 的索引從 0 開始，所以用 `{{index + 1}}` 在索引前加一，這樣顯示的索引更符合普通人的閱讀習慣。

![](https://img-blog.csdnimg.cn/img_convert/14d42673f9597760e1975d8202434667.png)

這個檢視的控制器：

```javascript
//logs.js
const util = require('../../utils/util.js')
Page({
   data: {
        logs: []
   },
   onLoad: function () {
       this.setData({
            logs: (wx.getStorageSync('logs') || []).map(log => {
                  return util.formatTime(new Date(log))
            })
       })
   }
})
```

控制器 logs.js 的實現：

在控制器裡呼叫 Page 建構函式，給當前控制器指定名為 logs 的資料模型。
這個資料模型的值填充，透過微信框架提供的 API `wx.getStorageSync` 來獲取。

![](https://img-blog.csdnimg.cn/img_convert/97923177fb4c3b35636fde96f308353f.png)

wx.getStorageSync 的含義在微信小程式[官網](https://developers.weixin.qq.com/miniprogram/dev/api/data.html#wxgetstoragesynckey)上有定義：從本地快取中同步獲取指定 key 對應的內容。

![](https://img-blog.csdnimg.cn/img_convert/5a4d05f38bf89e582b795dc8d597f462.png)

第二個檢視的 UI 和控制器都開發完畢，剩下的事情就是在第一個檢視裡定義一個觸發點，讓它能觸發到第二個檢視的跳轉。
我在第一個檢視上透過屬性 bindtap 繫結了一個點選函式 `bindViewTap`:

![](https://img-blog.csdnimg.cn/img_convert/47b963755eac7109d4084fc34c93bbd1.png)

bindViewTap 在第一個控制器 index.js 裡的實現：

```javascript
bindViewTap: function() {
   wx.navigateTo({
         url: '../logs/logs'
    })
},
```

跳轉還是透過微信小程式提供的 API `wx.navigateTo`:

保留當前頁面，跳轉到應用內的某個頁面，使用 `wx.navigateBack` 可以返回到原頁面。

![](https://img-blog.csdnimg.cn/img_convert/97f27129ba03fedcb3122f3f5f92b68a.png)

學習了微信小程式頁面路由跳轉之後，我們來進行一個實際的需求開發。

# 在微信小程式裡自動獲得當前手機所在的經緯度並轉換成地址

效果：我在手機上開啟微信小程式，自動顯示出我當前所在的地理位置：

![](https://img-blog.csdnimg.cn/img_convert/e7630a33303befeb4831c5f0a056fb84.png)

具體步驟：

1. 使用微信 `jssdk` 提供的 `getLocation` API 拿到經緯度；
2. 呼叫高德地圖的 `api` 使用經緯度去換取地址的文字描述。

![](https://img-blog.csdnimg.cn/img_convert/3440a639d66cb076534c70fd82fa1124.png)

```javascript
wx.ready(() => {
wx.getLocation({
	type: "gcj02",
	success: function(res) {
		var location = "&location=" + res.longitude + "," + res.latitude;
		ReservationService.getGeocode(location).then(response => {
		if (response.data.status === "1" && response.data.info === "OK" ) {
			self.country = response.data.regeocode.addressComponent.country;
			self.city = response.data.regeocode.addressComponent.city;
			var express = "/" + self.country + "|" +
response.data.regeocode.addressComponent.province + "|" + self.city + "|" + response.data.regeocode.addressComponent.district + "|" +
response.data.regeocode.addressComponent.township + "/g";
			self.address = response.data.regeocode.formatted_address.replace(eval(express), ""
		);
		} else {
			// get location error, plz input address
			alert("無法獲取地址資訊,請稍後再試");
		}
	});
}
});
```

ReservationService.getGeocode 的實現：

```javascript
getGeocode(location) {
const key = '此處填入您高德地圖app的key';
return axios.post('https://restapi.amap.com/v3/geocode/regeo?key=' + key + location);
}
```
看下面一個使用高德地圖 API 將經緯度轉換成文字描述的地址的例子，使用 postman 傳送請求：

![](https://img-blog.csdnimg.cn/img_convert/b8fbb7a857ec2c8afee0fbe044885438.png)

API 響應：

```json
{
"status": "1",
"regeocode": {
"addressComponent": {
"city": [],
"province": "北京市",
"adcode": "110101",
"district": "東城區",
"towncode": "110101001000",
"streetNumber": {
"number": "44號",
"location": "116.39795,39.9097239",
"direction": "東北",
"distance": "117.874",
"street": "廣場東側路"
},
"country": "中國",
"township": "東華門街道",
"businessAreas": [
{
"location": "116.3998109423077,39.90717459615385",
"name": "天安門",
"id": "110101"
},
{
"location": "116.39981058278138,39.92383706953642",
"name": "景山",
"id": "110101"
},
{
"location": "116.4118112683418,39.91461494422115",
"name": "王府井",
"id": "110101"
}
],
"building": {
"name": "天安門",
"type": "風景名勝;風景名勝相關;旅遊景點"
},
"neighborhood": {
"name": [],
"type": []
},
"citycode": "010"
},
"formatted_address": "北京市東城區東華門街道天安門"
},
"info": "OK",
"infocode": "10000"
}
```

![](https://img-blog.csdnimg.cn/img_convert/b7734ae1e80bdf8a4e879008adda295b.png)
![](https://img-blog.csdnimg.cn/img_convert/f4160ec912b3667b3720cc1e93236325.png)

# 如何使用微信開發者工具除錯在微信端訪問的網頁

假設我用 vue 開發了一個 web 應用,需要在手機微信裡訪問並除錯, 可以按照本文介紹的步驟,使用微信開發者工具來除錯。

假設我的 web 應用的訪問入口是如下公眾號選單的"預約"按鈕:

![](https://img-blog.csdnimg.cn/img_convert/9bff3db173146de3938ddfcca6c9c415.png)

那麼為了能夠在微信開發者工具裡除錯,需要首先進入該公眾號的後臺,在 web 開發者工具裡,將開發者本人的微訊號新增進去:

![](https://img-blog.csdnimg.cn/img_convert/b8ece0eb5544565f87583006a7f645c2.png)

點選"繫結開發者賬號":

![](https://img-blog.csdnimg.cn/img_convert/6fb5622a3a5edba03106274b45ba77f5.png)

輸入待繫結的微信賬號:

![](https://img-blog.csdnimg.cn/img_convert/b3e5e26c0930e4b64bb2e88c57e1ca02.png)

點選繫結,該微訊號會收到一條訊息,詢問是否繫結:

![](https://img-blog.csdnimg.cn/img_convert/396f71ae3ff6db5cfc5ded05481a1ada.png)

點選同意操作完成繫結。

![](https://img-blog.csdnimg.cn/img_convert/a4d0640e1f9796825329cd2c219021d2.png)

接下來, 把要除錯的 web 應用的 url 放到微信開發者工具位址列裡，回車之後，微信開發者工具就會彈出一個詢問視窗，點選 Allow 之後，就可以在微信開發者工具提供的類似 Chrome 開發者工具偵錯程式一樣的介面裡進行單步除錯了。

![](https://img-blog.csdnimg.cn/img_convert/a025bd8fcb0512ea26f650530982c878.png)

這個貼上到位址列的 url 很有講究。

https://open.weixin.qq.com/connect/oauth2/authorize?appid=yyyy&redirect_uri=https%3a%2f%2fwww.xxx.com%2fsmart&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect

其中 `appid=` 後面的值，是從微信公眾號控制檯裡複製出來的 `appid`：

![](https://img-blog.csdnimg.cn/img_convert/61e02bbf278cb455368121c75f226ef3.png)

redirect_uri, 即為我們開發的 web 應用，部署到伺服器之後生成的 url，需要經過 url encode 處理：

https://www.xxx.com/smart
這個 url 準備好之後，將其貼上到微信開發者工具位址列裡，回車，即可看到一個對話視窗，要求獲得我們公開資訊的許可：

![](https://img-blog.csdnimg.cn/img_convert/d0a3822bb6a4b2501f92895d633af420.png)

點選 Allow 之後，就可以像使用 Chrome 開發者工具的偵錯程式一樣，在微信開發者工具裡進行單步除錯了：

![](https://img-blog.csdnimg.cn/img_convert/1a7c151333aae63fc86942e5838e76b5.png)

# 總結

本文首先介紹了微信小程式多頁面內的路由跳轉設計，接著透過獲得手機當前經緯度並轉換成地址的需求實現，進一步深入瞭解了微信小程式如何消費微信平臺提供 Public API 的方法。

本教程前面三篇文章：

- [微信小程式開發系列 (一) ：開發環境搭建和微信小程式的檢視設計與開發](https://xie.infoq.cn/article/4ca57a6eead2ab45914366874)
- [微信小程式開發系列 (二) ：微信小程式的單步除錯和控制器實現步驟概述](https://xie.infoq.cn/article/7fbce173a83e9de4e46971b43)
- [微信小程式開發系列 (三) ：微信小程式如何響應使用者點選事件和微信平臺 API 的使用方法介紹](https://xie.infoq.cn/article/c8ae51ad8f8298c7e852a5005)

微信小程式開發系列 (四) ：微信小程式的頁面跳轉路由設計

相關文章