近在研究小程序開發,看了一些官網文檔,我們今天就來學習一下如何跳轉,順便把跳轉過程中的參數傳遞,以及接收賦值到模板中顯示學習了。
首先我們創建一個小程序,填寫項目名稱,以及路徑,這里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]查看。
各種頁面元素的位置關系,稱為布局(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]查看。
如果頁面的所有樣式都自己寫,還是挺麻煩的,也沒有這個必要。騰訊封裝了一套 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也有很多不一樣的地方,例如:
WXSS 樣式:WXSS 具有 CSS 大部分的特性,小程序在 WXSS 也做了一些擴充和修改。
JS 交互邏輯:一個服務僅僅只有界面展示是不夠的,還需要和用戶做交互:響應用戶的點擊、獲取用戶的位置等等。在小程序里邊,我們就通過編寫 JS腳本文件來處理用戶的操作。
頁面配置page.json:獨立定義每個頁面的一些屬性,例如頂部顏色、是否允許下拉刷新等等。
二、小程序的事件
1、事件分類
2、事件的綁定
事件綁定的寫法同組件的屬性,以 key、value 的形式。
bind事件綁定不會阻止冒泡事件向上冒泡,catch事件綁定可以阻止冒泡事件向上冒泡。
3、如何實現下拉刷新
監聽用戶下拉刷新事件。
三、小程序更新頁面的值
函數用于將數據從邏輯層發送到視圖層(異步)
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)
*請認真填寫需求信息,我們會在24小時內與您取得聯系。