如何進行微信小程序的頁面跳轉(zhuǎn)

本篇文章為大家展示了如何進行微信小程序的頁面跳轉(zhuǎn)，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。

我們將創(chuàng)建第二個視圖，然后實現(xiàn)從第一個視圖到第二個視圖的跳轉(zhuǎn)。

首先開發(fā)第二個視圖：

微信小程序開發(fā)系列七：微信小程序的頁面跳轉(zhuǎn)

<view class="container log-list"><block wx:for="{{logs}}" wx:for-item="log"><text class="log-item">{{index + 1}}. {{log}}</text></block></view>

做過Angular開發(fā)的朋友們對上面的視圖設(shè)計一定不會陌生。這個視圖的數(shù)據(jù)源由模型logs提供，是一個列表結(jié)果，列表每個元素的數(shù)據(jù)源是模型logs里的一條記錄，用log代表。

為了讓log看起來顯示更整齊，在log內(nèi)容之前，顯示每條log的索引。因為log的索引從0開始，所以用{{index + 1}}在索引前加一，這樣顯示的索引更符合普通人的閱讀習(xí)慣。

這個視圖的控制器：

//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的實現(xiàn)：

我們可以回憶這個系列里第四篇文章介紹過控制器的實現(xiàn)邏輯：

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

在控制器里調(diào)用Page構(gòu)造函數(shù)，給當(dāng)前控制器指定名為logs的數(shù)據(jù)模型。

這個數(shù)據(jù)模型的值填充，通過微信框架提供的API wx.getStorageSync來獲取。

wx.getStorageSync的含義在微信小程序官網(wǎng)上有定義：從本地緩存中同步獲取指定 key 對應(yīng)的內(nèi)容。

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

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

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

bindViewTap在第一個控制器index.js里的實現(xiàn)：

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

跳轉(zhuǎn)還是通過微信小程序提供的API wx.navigateTo:

保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面，使用wx.navigateBack可以返回到原頁面。

上述內(nèi)容就是如何進行微信小程序的頁面跳轉(zhuǎn)，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。