場景如下

需求是(shì)：

• 點擊首頁的(de)城市定位，進入選擇城市的(de)頁面。
• 選好後，将選中的(de)結果返回首頁處

分析：

• 這(zhè)是(shì)兩個(gè)不(bù)同的(de)頁面。需要(yào / yāo)在(zài)它們之(zhī)間傳遞信息，實現通信。
• 我們需利用 全局數據 來(lái)實現這(zhè)一目的(de)。

app.json

...
"pages": [
    "pages/index/index",
    "pages/cityselector/cityselector”,
...
1
2
3
4
5

而(ér)利用全局數據， 把大(dà)象裝進冰箱分三步：

• 設置全局數據
• 城市選擇頁面 修改全局數據
• 首頁 讀取、渲染全局數據

截圖

• 首頁定位處與搜索框 
  pages/index/index.wxml 
  

  

• 城市選擇頁面 
  pages/cityselector/cityselector.wxml 
  

  

• 選定城市後，退回首頁，“銀川”需要(yào / yāo)變爲(wéi / wèi)新選定的(de)城市

開始實戰

第一步 設置全局數據

在(zài)app.js中，添加全局數據：

App({
  onLaunch: () => {
  ...
  }
  defaultCity: ‘銀川’  //全局數據
})
1
2
3
4
5
6

第二步 修改全局數據

在(zài)城市選擇頁面裏，我們選好城市後，對全局數據進行修改。

pages/cityselector/cityselector.js

....
let appInstance = getApp();

Page({
  data: {
    city: "杭州市”,   //用來(lái)保存我們選定的(de)城市
    ....
    },
   ....

  //選擇城市
  bindCity: function (e) {
    this.setData({
      city: e.currentTarget.dataset.city,  //将我們選定的(de)城市名保存到(dào)本頁面的(de)數據中
    ...
    })
    ...
    appInstance.defaultCity = this.data.city //對全局數據進行修改

    //返回首頁
    wx.switchTab({
      url: '../index/index'
    })
  }, 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

首頁 讀取渲染 修改後的(de)全局數據

pages/index/index.js

let appInstance = getApp();

Page({
  data: {
    location: appInstance.defaultCity
  },
  onLoad: function() {
  … … 
  },
  onShow: function() { //每次打開頁面都會調用一次
    this.setData({
      location: appInstance.defaultCity //利用全局數據修改本頁面數據
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

展示層中渲染出(chū)來(lái)

pages/index/index.wxml

<navigator url="../cityselector/cityselector” … … >{{location}}</navigator>
1

相關資料：

• 全局數據相關文檔
• 生命周期函數相關文檔

相關項目：

微信小程序 城市/區縣定位選擇器 帶拼音搜索 可直接使用