場景如下

需求是：

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

分析：

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

app.json

...
"pages": [
    "pages/index/index",
    "pages/cityselector/cityselector”,
...

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

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

截圖

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

  

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

  

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

開始實戰(zhàn)

第一步 設(shè)置全局數(shù)據(jù)

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

App({
  onLaunch: () => {
  ...
  }
  defaultCity: ‘銀川’  //全局數(shù)據(jù)
})

相關(guān)資料：

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

相關(guān)項目：

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