小程序開發如何跳轉頁面以及參數的傳遞與視圖層顯示

近在研究小程序開發，看了一些官網文檔，我們今天就來學習一下如何跳轉，順便把跳轉過程中的參數傳遞，以及接收賦值到模板中顯示學習了。

首先我們創建一個小程序，填寫項目名稱，以及路徑，這里AppID我用的測試賬號。

我們進入到開發頁面顯示的默認代碼中Pages目錄中只有index和logs，小程序頁面一般都包裹.js文件主要是邏輯層的一些內容，.json文件主要作用是頁面的獨立配置文件，wxml文件主要是我們直觀顯示的頁面相當于html，wxss文件主要是用于頁面的樣式相當于css，不對贅述詳細可以看官方文檔，這里主要講頁面跳轉以及傳參。

我們首先增加一個新的頁面test，創建的時候，系統會自動在app.json中創建一條路由，還有更簡單的辦法，直接在app.json中添加一條路由，系統就會幫你直接創建相對應的內容，這里要注意的是，如果刪除頁面，路由是不會自動刪除的，需要手動刪除一下，路由也是一樣。

接下來我們改造一下首頁的內容，index文件夾中的index.wxml，增加跳轉，小程序中是沒有a標簽的，跳轉的標簽是<navigator>，這樣就可以正常跳轉到設置好的頁面了。

除了這種類似于a標簽的跳轉，小程序還集成api按鈕跳轉，只需要在button中設置bindtap參數即可，bindtap這個是小程序的事件綁定，寫法<button bindtap="ondemo">api跳轉</button>，同樣是在index.wxml中寫，這里js中事件沒有寫報錯，和回調等。關于跳轉有多種api，根據官方文檔，我們文中使用的是navigateTo會保留當前頁面，跳轉到應用內的某個頁面，另外還有redirectTo是會關閉當前頁面，跳轉到應用內的某個頁面，以及navigateBack關閉當前頁面，返回上一頁面或多級頁面等，具體可以查詢一下官網文檔，或者在文章下方回復。

接下來我們講怎么傳遞參數以及接收參數，傳遞很簡單沒什么可說的，直接上代碼了

接下來我們說一下如何接收傳遞過來的參數，接收過來的數據是放在options中的，我們直接用console.log打印一下。

我們在onLoad中可以直接打印出來了，onLoad會在創建頁面的時候執行，所以跳轉之后會直接打印出來。

接下來我們講怎么把傳遞過來的數據顯示出來，需要對js以及wxml文件進行一定的改造，我先改造一下test.wxml

既然要獲取數據就要在js文件中操作，這里要提到setData，這個函數用于將數據從邏輯層發送到視圖層（異步），同時改變對應的 this.data 的值（同步），看到網上有說用this.data的，官網文檔特別說明了一下，是不行的，原文在這里：直接修改 this.data 而不調用 this.setData 是無法改變頁面的狀態的，還會造成數據不一致。

最后上一張效果圖：

個系列的上一篇教程，教大家寫了一個最簡單的 Hello world 微信小程序。

但是，那只是一個裸頁面，并不好看。今天接著往下講，如何為這個頁面添加樣式，使它看上去更美觀，教大家寫出實際可以使用的頁面。

所有示例的完整代碼，都可以從 GitHub 的代碼倉庫^[1]下載。

一、總體樣式

微信小程序允許在頂層放置一個app.wxss文件，里面采用 CSS 語法設置頁面樣式。這個文件的設置，對所有頁面都有效。

注意，小程序雖然使用 CSS 樣式，但是樣式文件的后綴名一律要寫成.wxss。

打開上一篇教程的示例，在項目頂層新建一個app.wxss文件，內容如下。

page {
background-color: pink;
}

text {
font-size: 24pt;
color: blue;
}

上面代碼將整個頁面的背景色設為粉紅，然后將<text>標簽的字體大小設為 24 磅，字體顏色設為藍色。

開發者工具導入代碼之后，得到了下面的渲染結果。

可以看到，頁面的背景色變成粉紅，文本字體變大了，字體顏色變成了藍色。

實際開發中，直接對<text>標簽設置樣式，會影響到所有的文本。一般不這樣用，而是通過class屬性區分不同類型的文本，然后再對每種class設置樣式。

打開pages/home/home.wxml文件，把頁面代碼改成下面這樣。

<view>
<text class="title">hello world</text>
</view>

上面代碼中，我們為<text>標簽加上了一個class屬性，值為title。

然后，將頂層的app.wxss文件改掉，不再直接對<text>設置樣式，改成對class設置樣式。

page {
background-color: pink;
}

.title {
font-size: 24pt;
color: blue;
}

上面代碼中，樣式設置在 class 上面（.title），這樣就可以讓不同的class呈現不同的樣式。修改之后，頁面的渲染結果并不會有變化。

這個示例的完整代碼，可以到代碼倉庫^[2]查看。

二、Flex 布局

各種頁面元素的位置關系，稱為布局（layout），小程序官方推薦使用 Flex 布局。不熟悉這種布局的同學，可以看看我寫的《Flex 布局教程》^[3]。

下面演示如何通過 Flex 布局，將上面示例的文本放置到頁面中央。

首先，在pages/home目錄里面，新建一個home.wxss文件，這個文件設置的樣式，只對 home 頁面生效。這是因為每個頁面通常有不一樣的布局，所以頁面布局一般不寫在全局的app.wxss里面。

然后，home.wxss文件寫入下面的內容。

page {
height: 100%;
width: 750rpx;
display: flex;
justify-content: center;
align-items: center;
}

開發者工具導入項目代碼，頁面渲染結果如下。

下面解釋一下上面這段 WXSS 代碼，還是很簡單的。

（1）height: 100%;：頁面高度為整個屏幕高度。

（2）width: 750rpx;：頁面寬度為整個屏幕寬度。

注意，這里單位是rpx，而不是px。rpx是小程序為適應不同寬度的手機屏幕，而發明的一種長度單位。不管什么手機屏幕，寬度一律為750rpx。它的好處是換算簡單，如果一個元素的寬度是頁面的一半，只要寫成width: 375rpx;即可。

（3）display: flex;：整個頁面（page）采用 Flex 布局。

（4）justify-content: center;：頁面的一級子元素（這個示例是<view>）水平居中。

（5）align-items: center;：頁面的一級子元素（這個示例是<view>）垂直居中。一個元素同時水平居中和垂直中央，就相當于處在頁面的中央了。

這個示例的完整代碼，可以到代碼倉庫^[4]查看。

三、WeUI

如果頁面的所有樣式都自己寫，還是挺麻煩的，也沒有這個必要。騰訊封裝了一套 UI 框架 WeUI^[5]，可以拿來用。

手機訪問 weui.io^[6]，可以看到這套 UI 框架的效果。

這一節就來看看，怎么使用這個框架的小程序版本 WeUI-WXSS^[7]，為我們的頁面加上官方的樣式。

首先，進入它的 GitHub 倉庫^[8]，在dist/style目錄下面，找到`weui.wxss`^[9]這個文件，將源碼^[10]全部復制到你的app.wxss文件的頭部。

然后，將page/home/home.wxml文件改成下面這樣。

<view>
<button class="weui-btn weui-btn_primary">
主操作
</button>
<button class="weui-btn weui-btn_primary weui-btn_loading">
<i class="weui-loading"></i>正在加載
</button>
<button class="weui-btn weui-btn_primary weui-btn_disabled">
禁止點擊
</button>
</view>

開發者工具導入項目代碼，頁面渲染結果如下。

可以看到，加入 WeUI 框架以后，只要為按鈕添加不同的 class，就能自動出現框架提供的樣式。你可以根據需要，為頁面選擇不同的按鈕。

這個示例中，<button>元素使用了下面的class。

“
weui-btn：按鈕樣式的基類
weui-btn_primary：主按鈕的樣式。如果是次要按鈕，就使用weui-btn_default。
weui-btn_loading：按鈕點擊后，操作正在進行中的樣式。該類內部需要用<i>元素，加上表示正在加載的圖標。
weui-btn_disabled：按鈕禁止點擊的樣式。
”

WeUI 提供了大量的元素樣式，完整的清單可以查看這里^[11]。

這個示例的完整代碼，可以到代碼倉庫^[12]查看。

四、加入圖片

美觀的頁面不能光有文字，還必須有圖片。小程序的<image>組件就用來加載圖片。

打開home.wxml文件，將其改為如下代碼。

<view>
<image src="https://picsum.photos/200"></image>
</view>

開發者工具加載項目代碼，頁面的渲染結果如下，可以顯示圖片了。

<image>組件有很多屬性^[13]，比如可以通過style屬性指定樣式。

<view>
<image
src="https://picsum.photos/200"
style="height: 375rpx; width: 375rpx;"
></image>
</view>

默認情況下，圖片會占滿整個容器的寬度（這個例子是<view>的寬度），上面代碼通過style屬性指定圖片的高度和寬度（占據頁面寬度的一半），渲染結果如下。

當然，圖片樣式不一定寫在<image>組件里面，也可以寫在 WXSS 樣式文件里面。

這個示例的完整代碼，可以到代碼倉庫^[14]查看。

五、圖片輪播

小程序原生的`^[15]可以提供圖片輪播效果。

上面頁面的圖片上面，有三個提示點，表示一共有三張圖片，可以切換顯示。

它的代碼很簡單，只需要改一下home.wxml文件即可。

<view>
<swiper
indicator-dots="{{true}}"
autoplay="{{true}}"
style="width: 750rpx;">
<swiper-item>
<image src="https://picsum.photos/200"></image>
</swiper-item>
<swiper-item>
<image src="https://picsum.photos/250"></image>
</swiper-item>
<swiper-item>
<image src="https://picsum.photos/300"></image>
</swiper-item>
</swiper>
</view>

上面代碼中，<swiper>組件就是輪播組件，里面放置了三個`^[16]，表示有三個輪播項目，每個項目就是一個<image>組件。

<swiper>組件的indicator-dots屬性設置是否顯示輪播點，autoplay屬性設置是否自動播放輪播。它們的屬性值都是一個布爾值，這里要寫成{{true}}。這種{{...}}的語法，表示里面放置的是 JavaScript 代碼，這個放在下一次講解。

這個示例的完整代碼，可以到代碼倉庫^[17]查看。

頁面樣式就講到這里，下一篇教程講解怎么在微信小程序里面加入 JavaScript 腳本，跟用戶互動。

注意，由于腳本代碼比較多，這個系列的后兩篇教程將不在微信公號上連載了，大家可以去我的個人網站閱讀。

（完）

參考資料

[1]

代碼倉庫: https://github.com/ruanyf/wechat-miniprogram-demos

[2]

代碼倉庫: https://github.com/ruanyf/wechat-miniprogram-demos/tree/master/demos/03.css

[3]

《Flex 布局教程》: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

[4]

代碼倉庫: https://github.com/ruanyf/wechat-miniprogram-demos/tree/master/demos/04.flex

[5]

WeUI: https://github.com/Tencent/weui

[6]

weui.io: https://weui.io/

[7]

WeUI-WXSS: https://github.com/Tencent/weui-wxss/

[8]

GitHub 倉庫: https://github.com/Tencent/weui-wxss/

[9]

weui.wxss:https://github.com/Tencent/weui-wxss/blob/master/dist/style/weui.wxss

[10]

源碼: https://raw.githubusercontent.com/Tencent/weui-wxss/master/dist/style/weui.wxss

[11]

這里: https://github.com/Tencent/weui-wxss

[12]

代碼倉庫: https://github.com/ruanyf/wechat-miniprogram-demos/tree/master/demos/05.weui

[13]

很多屬性: https://developers.weixin.qq.com/miniprogram/dev/component/image.html

[14]

代碼倉庫: https://github.com/ruanyf/wechat-miniprogram-demos/tree/master/demos/06.image

[15]

<swiper>組件:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

[16]

<swiper-item>組件:https://developers.weixin.qq.com/miniprogram/dev/component/swiper-item.html

[17]

代碼倉庫: https://github.com/ruanyf/wechat-miniprogram-demos/tree/master/demos/07.swiper

在面試，都會問，你會不會小程序呀，你做沒做過小程序呀，其實小程序很簡單，只要嚴格按照小程序的官網來開發就行，一些常用api呀，組件呀，小程序都幫你做好了，你只需要負責用就行了。今天我們來說一下小程序面試中可能遇到的問題。

一、簡述一下小程序的文件類型

我們可以看到在項目的根目錄有一個 app.json、app.js 和 project.config.json 我們依次來說明一下它們的用途。

首先我們看一下小程序的目錄結構，下面是小程序目錄結構的截圖；

1、小程序配置 app.json

必須要有這個文件，如果沒有這個文件，項目無法運行，因為微信小程序把這個作為配置文件入口，是當前小程序的全局配置，包括了小程序的所有頁面路徑、界面表現、跳轉到其他小程序配置、開啟定位權限、是否開啟調試模式、指定sitemap文件、分包的配置、網絡超時時間、底部 tab 等。

2、全局app.js

必須要有這個文件，沒有也會報錯！這個文件創建一下就行，可以什么都不寫，以后我們可以在這個文件中監聽并處理小程序的生命周期函數、聲明全局變量。

3、工具配置 project.config.json

小程序工具的個性化配置，例如界面顏色、編譯配置等等。

4、pages里面的文件，分為四種類型，下面來簡單介紹一下這四程類型

WXML模板：和HTML非常像，WXML由標簽屬性等構成，但是和HTML也有很多不一樣的地方，例如：

標簽名字不一樣，寫 HTML 的時候，經常會用到的標簽是 div, p, span，而小程序的 WXML 用的標簽是 view, button, text 等等
多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達式

WXSS 樣式：WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些擴充和修改。

新增了尺寸單位rpx。1rpx=0.5px=1物理像素
提供了全局的樣式和局部樣式。你可以寫一個 app.wxss 作為全局樣式，會作用于當前小程序的所有頁面，局部頁面樣式 page.wxss 僅對當前頁面生效。
此外 WXSS 僅支持部分 CSS 選擇器

JS 交互邏輯：一個服務僅僅只有界面展示是不夠的，還需要和用戶做交互：響應用戶的點擊、獲取用戶的位置等等。在小程序里邊，我們就通過編寫 JS腳本文件來處理用戶的操作。

頁面配置page.json：獨立定義每個頁面的一些屬性，例如頂部顏色、是否允許下拉刷新等等。

二、小程序的事件

1、事件分類

冒泡事件：當一個組件上的事件被觸發后，該事件會向父節點傳遞。
非冒泡事件：當一個組件上的事件被觸發后，該事件不會向父節點傳遞。

2、事件的綁定

事件綁定的寫法同組件的屬性，以 key、value 的形式。

key 以bind或catch開頭，然后跟上事件的類型，如bindtap、catchtouchstart。
value 是一個字符串，需要在對應的 Page 中定義同名的函數。不然當觸發事件的時候會報錯。

bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定可以阻止冒泡事件向上冒泡。

3、如何實現下拉刷新

監聽用戶下拉刷新事件。

需要在app.json的window選項中或頁面配置中開啟enablePullDownRefresh。
可以通過wx.startPullDownRefresh觸發下拉刷新，調用后觸發下拉刷新動畫，效果與用戶手動下拉刷新一致。
當處理完數據刷新后，wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。

三、小程序更新頁面的值

函數用于將數據從邏輯層發送到視圖層（異步）

this.setData(Object data, Function callback)
復制代碼

參數說明：

data：傳一個object，是這次要改變的數據

callback：傳一個function，是setData引起的界面更新渲染完畢后的回調函數

四、小程序的路由方式

打開新頁面：調用 API wx.navigateTo 或使用組件 < navigator open-type="navigateTo"/>

頁面重定向：調用 API wx.redirectTo 或使用組件 <navigator open-type="redirectTo"/>

頁面返回：調用 API wx.navigateBack 或使用組件<navigator open-type="navigateBack">或用戶按左上角返回按鈕

Tab 切換：調用 API wx.switchTab 或使用組件 <navigator open-type="switchTab"/> 或用戶切換 Tab

重啟動：調用 API wx.reLaunch 或使用組件 <navigator open-type="reLaunch"/>

五、常用的小程序請求接口的方式

HTTPS 請求（wx.request）、上傳文件（wx.uploadFile）、下載文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）

在線咨詢

上一篇：精選15個頂尖Web設計與開發博客
下一篇：大家都看得懂的設計規范-輸入框篇

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商