微信小程序開發系列教程

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

微信小程序開發系列二：微信小程序的視圖設計

微信小程序開發系列三：微信小程序的調試方法

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

微信小程序開發系列五：微信小程序中如何響應用戶輸入事件

微信小程序開發系列六：微信框架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.jsconst 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 對應的內容。

https://developers.weixin.qq.com/miniprogram/dev/api/data.html#wxgetstoragesynckey

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

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

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

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

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

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

要獲取更多Jerry的原創技術文章，請關注公眾號"汪子熙"或者掃描下面二維碼:

總結

以上是生活随笔為你收集整理的微信小程序开发系列七：微信小程序的页面跳转的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。