微信小程序開發系列 (四) ：微信小程序的頁面跳轉路由設計详情 - 微信,微信小程序,微信開發,微信公眾平台,微信開放平台註銷日志

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

本教程前面三篇文章：

微信小程序開發系列 (一) ：開發環境搭建和微信小程序的視圖設計與開發
微信小程序開發系列 (二) ：微信小程序的單步調試和控制器實現步驟概述
微信小程序開發系列 (三) ：微信小程序如何響應用户點擊事件和微信平台 API 的使用方法介紹

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

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

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

<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}} 在索引前加一，這樣顯示的索引更符合普通人的閲讀習慣。

這個視圖的控制器：

//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 來獲取。

wx.getStorageSync 的含義在微信小程序官網上有定義：從本地緩存中同步獲取指定 key 對應的內容。

第二個視圖的 UI 和控制器都開發完畢，剩下的事情就是在第一個視圖裏定義一個觸發點，讓它能觸發到第二個視圖的跳轉。
我在第一個視圖上通過屬性 bindtap 綁定了一個點擊函數 bindViewTap:

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

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

跳轉還是通過微信小程序提供的 API wx.navigateTo:

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

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

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

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

具體步驟：

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

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 的實現：

getGeocode(location) {
const key = '此處填入您高德地圖app的key';
return axios.post('https://restapi.amap.com/v3/geocode/regeo?key=' + key + location);
}

看下面一個使用高德地圖 API 將經緯度轉換成文字描述的地址的例子，使用 postman 發送請求：

API 響應：

{
"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"
}