天天看點

微信小程式開發系列七:微信小程式的頁面跳轉

微信小程式開發系列教程

微信小程式開發系列一:微信小程式的申請和開發環境的搭建

微信小程式開發系列二:微信小程式的視圖設計

微信小程式開發系列三:微信小程式的調試方法

微信小程式開發系列四:微信小程式之控制器的初始化邏輯

微信小程式開發系列五:微信小程式中如何響應使用者輸入事件

微信小程式開發系列六:微信架構API的調用

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

首先開發第二個視圖:

微信小程式開發系列七:微信小程式的頁面跳轉

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

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

微信小程式開發系列七:微信小程式的頁面跳轉

這個視圖的控制器:

微信小程式開發系列七:微信小程式的頁面跳轉

控制器logs.js的實作:

我們可以回憶這個系列裡第四篇文章介紹過控制器的實作邏輯:

在控制器裡調用Page構造函數,給目前控制器指定名為logs的資料模型。

這個資料模型的值填充,通過微信架構提供的API wx.getStorageSync來擷取。

微信小程式開發系列七:微信小程式的頁面跳轉

wx.getStorageSync的含義在微信小程式官網上有定義:從本地緩存中同步擷取指定 key 對應的内容。

https://developers.weixin.qq.com/miniprogram/dev/api/data.html#wxgetstoragesynckey
微信小程式開發系列七:微信小程式的頁面跳轉

第二個視圖的UI和控制器都開發完畢,剩下的事情就是在第一個視圖裡定義一個觸發點,讓它能觸發到第二個視圖的跳轉。

我在第一個視圖上通過屬性bindtap綁定了一個點選函數bindViewTap:

微信小程式開發系列七:微信小程式的頁面跳轉

bindViewTap在第一個控制器index.js裡的實作:

微信小程式開發系列七:微信小程式的頁面跳轉

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

保留目前頁面,跳轉到應用内的某個頁面,使用wx.navigateBack可以傳回到原頁面。

微信小程式開發系列七:微信小程式的頁面跳轉

繼續閱讀