場(chǎng)景如下

需求是：

• 點(diǎn)擊首頁(yè)的城市定位，進(jìn)入選擇城市的頁(yè)面。
• 選好后，將選中的結(jié)果返回首頁(yè)處

分析：

• 這是兩個(gè)不同的頁(yè)面。需要在它們之間傳遞信息，實(shí)現(xiàn)通信。
• 我們需利用 全局?jǐn)?shù)據(jù) 來(lái)實(shí)現(xiàn)這一目的。

app.json

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

而利用全局?jǐn)?shù)據(jù)， 把大象裝進(jìn)冰箱分三步：

• 設(shè)置全局?jǐn)?shù)據(jù)
• 城市選擇頁(yè)面 修改全局?jǐn)?shù)據(jù)
• 首頁(yè) 讀取、渲染全局?jǐn)?shù)據(jù)

截圖

• 首頁(yè)定位處與搜索框 
  pages/index/index.wxml 
  

  

• 城市選擇頁(yè)面 
  pages/cityselector/cityselector.wxml 
  

  

• 選定城市后，退回首頁(yè)，“銀川”需要變?yōu)樾逻x定的城市

開(kāi)始實(shí)戰(zhàn)

第一步 設(shè)置全局?jǐn)?shù)據(jù)

在app.js中，添加全局?jǐn)?shù)據(jù)：

App({
  onLaunch: () => {
  ...
  }
  defaultCity: ‘銀川’  //全局?jǐn)?shù)據(jù)
})
1
2
3
4
5
6

第二步 修改全局?jǐn)?shù)據(jù)

在城市選擇頁(yè)面里，我們選好城市后，對(duì)全局?jǐn)?shù)據(jù)進(jìn)行修改。

pages/cityselector/cityselector.js

....
let appInstance = getApp();

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

  //選擇城市
  bindCity: function (e) {
    this.setData({
      city: e.currentTarget.dataset.city,  //將我們選定的城市名保存到本頁(yè)面的數(shù)據(jù)中
    ...
    })
    ...
    appInstance.defaultCity = this.data.city //對(duì)全局?jǐn)?shù)據(jù)進(jìn)行修改

    //返回首頁(yè)
    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

首頁(yè) 讀取渲染 修改后的全局?jǐn)?shù)據(jù)

pages/index/index.js

let appInstance = getApp();

Page({
  data: {
    location: appInstance.defaultCity
  },
  onLoad: function() {
  … … 
  },
  onShow: function() { //每次打開(kāi)頁(yè)面都會(huì)調(diào)用一次
    this.setData({
      location: appInstance.defaultCity //利用全局?jǐn)?shù)據(jù)修改本頁(yè)面數(shù)據(jù)
    })
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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

pages/index/index.wxml

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

相關(guān)資料：

• 全局?jǐn)?shù)據(jù)相關(guān)文檔
• 生命周期函數(shù)相關(guān)文檔

相關(guān)項(xiàng)目：

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