本文通過具體的實例記錄微信小程序的入門知識。
1、特點
- 不需要安裝
- 依賴微信應用
- 更接近原生APP
- 豐富的框架及API可達到快速開發的目的
2、工具使用
在開發的過程中可以使用微信開發者工具,更加直觀的進行調式及看到界面:下載地址
3、目錄結構
- pages:小程序頁面,包括
js
(頁面邏輯),wxml
(頁面結構),wxss
(頁面樣式)和json
(頁面配置) app.js
:小程序公共邏輯app.json
:小程序公共配置app.wxss
:小城市公共樣式
4、公共配置
window
:設置默認頁面的窗口表現,如圖的頂部紅色區域
"window":{
// 導航欄背景顏色
"navigationBarBackgroundColor": "#bc162c",
// 導航欄標題文字內容
"navigationBarTitleText": "初始微信小程序",
// 導航欄標題顏色,僅支持 black/white
"navigationBarTextStyle":"white"
}
tabBar
:設置小程序的tab最多5個,最少2個,如圖的底部tab
"tabBar": {
// 背景色
"backgroundColor": "#bc162c",
// 背景文字
"color": "#8a8a8a",
// 高亮背景文字
"selectedColor":"#fff",
"list": [
{
"pagePath": "pages/index/index", // 路由頁面
"text": "首頁", // 路由文字
"iconPath":"images/home1.png", // 默認顯示圖標必須是圖片81*81
"selectedIconPath":"images/home.png" // 高亮顯示圖標
},
{
"pagePath": "pages/logs/logs",
"text": "日志",
"iconPath":"images/log1.png",
"selectedIconPath":"images/log.png"
}
]
}
5、微信組件應用
微信小程序自帶一些常規組件,包括輪播,表單組件等。
輪播圖組件swiper
用於首頁的輪播圖顯示,可以設置自動輪播和序號點
核心代碼:
<!-- index.wxml -->
<swiper indicator-dots="indicatorDots"
indicator-color="#FFF"
indicator-active-color = "#bc162c"
autoplay="{{autoplay}}"
interval="{{interval}}"
duration="{{duration}}">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" class="slide-image"/>
</swiper-item>
</block>
</swiper>
// index.js
Page({
data: {
imgUrls: [
'/images/vue.jpg',
'/images/angular.jpg',
'/images/react.jpg'
],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000
}
})
/* index.wxss */
.slide-image{
width: 100%;
height: 300rpx;
}
可以看出,微信的組件開發和vue一樣都是通過數據控制view層的,知識點:
雙大括號
:表示數據綁定,支持簡單的表達式;wx:for
:表示列表渲染,使用item
表示數組數據;使用index
表示數組的下標;data
:放置變量的數據;rpx
:微信中的單位,rpx單位是微信小程序中css的尺寸單位,rpx可以根據屏幕寬度進行自適應,規定屏幕寬為750rpx
可滾動組件scroll-view
用於顯示多個模塊的滾動顯示
核心代碼:
<!-- index.wxml -->
<scroll-view class="scroll-view" scroll-x="true">
<view class="scroll-view-item" wx:for="{{viewDatas}}">
<view class="view-item-title">
<text>{{item.title}}\n</text>
<text>¥{{item.price}}</text>
</view>
<image class="view-item-image" src="{{item.imgUrl}}"></image>
</view>
</scroll-view>
// index.js
viewDatas:[{
title:"使用AngularJS開發下一代Web應用",
price:"299.00",
imgUrl:"/images/10-min.png"
},{
title:"Vue+Webpack打造web應用",
price:"229.00",
imgUrl:"/images/2-min.png"
},{
title:"React知識點綜合運用實例",
price:"329.00",
imgUrl:"/images/7-min.png"
},{
title:"微信小程序入門",
price:"99.00",
imgUrl:"/images/3-min.png"
}]
這里用到scroll-view
組件,設置scroll-x="true"
表示橫向滾動。此時需要設置以下樣式保證效果。
/* index.wxss */
.scroll-view {
display: flex;
width: 100%;
height: 285rpx;
white-space: nowrap;
box-sizing: border-box;
}
.scroll-view-item {
display: inline-block;
width: 685rpx;
height: 285rpx;
}
6、頁面跳轉
下面介紹點擊【購買】按鈕如何進入購買頁面。
事件綁定
事件的類型即移動端的事件如touch
類事件,tap
事件,寫法是以bind
或catch
開頭,然后跟上事件的類型。其中,bind
事件綁定不會阻止冒泡事件向上冒泡,catch
事件綁定可以阻止冒泡事件向上冒泡。比如下面的bindtap
表示點擊按鈕。
<button type="warn" size="mini" bindtap="buyit data-id="{{item.id}}"">購買</button>
buyit(event){
console.log(event)
}
點擊結果
分析:返回結果中包含event的各種信息,包括觸摸點的位置,目標對象的dataset,可以通過
data-
的新形式定義模板,通過event.dataset
獲取值
跳轉路由
微信小程序有棧的概念,跳轉的方式有4種:
wx.navigateTo(options)
:將原頁面保存在頁面棧中,由此進入的下個頁面也會進棧,只有在這個情況下點擊手機的返回按鈕才可以重新跳轉到上個頁面;wx.redirectTo(options)
:清除棧,下一個頁面進棧,無法通過返回按鈕返回;wx.switchTab(options)
:同上,且跳轉的頁面必須是tabBar中聲明的頁面;wx.navigateBack(options)
:只能返回到頁面棧中的指定頁面,一般和navigateTo配合使用。
參數說明
參數 | 說明 |
---|---|
url | 跳轉得頁面路徑 |
success | 成功的回調函數 |
fail | 失敗的回調函數 |
complete | 束的回調函數 |
因此我們可以使用wx.navigateTo
的方法跳轉到購買頁面,並且獲取到當前點擊的條目的id,直接在url加上,通過url傳參。
buyit(event) {
var id = event.currentTarget.dataset.id;
wx.navigateTo({
url: "/pages/buy/buy?id=" + id
})
}
進入購買頁面
7、API請求
上面介紹的頁面都是靜態數據,下面介紹如何通過請求獲得數據,以購買頁面的課程詳情為例說明。我將數據放在本地的一個環境下模擬接口返回數據:
請求API
wx.request(OBJECT)
發起網絡請求。
主要參數說明
參數 | 說明 |
---|---|
url | 接口地址 |
data | 請求的參數 |
method | 請求方法 |
success | 成功的回調函數 |
fail | 失敗的回調函數 |
complete | 束的回調函數 |
在前面,我們在點擊【購買】按鈕的時候在地址傳入了一個id
,真實環境中,我們會根據這個id來請求接口獲取數據,那么問題來了:
- 1.什么時候請求接口?
- 2.如何獲取地址中的id呢?
生命周期函數
微信小程序和vue一樣擁有生命周期函數,微信提供的函數方法有:
方法 | 說明 |
---|---|
onLoad | 監聽頁面加載 |
onReady | 監聽頁面初次渲染完成 |
onShow | 監聽頁面顯示 |
onHide | 監聽頁面隱藏 |
onUnload | 監聽頁面卸載 |
因此解決問題1,我們可以在onLoad
方法中請求接口。打印一下這個方法下的參數。
從打印的數據可以看到,微信很貼心的已經將路徑中的參數傳給我們了,解決問題2,實現請求:
<view class="buy-list-item" wx:for="{{buylist}}" wx:key="{{index}}">
<text>{{item.title}}</text>
<text>{{item.desc}}</text>
<view class="item-tip">
<image src="/images/play.png" />
<text>{{item.tip}}</text>
</view>
</view>
Page({
data:{
buylist:[]
},
onLoad(option){
var that = this;
wx.request({
url:"http://localhost:8888/static/test.json",
data:{
id: option.id
},
success(res){
that.setData({
buylist: res.data.buylist
})
}
})
}
})
微信小程序中通過
setData
的方法給data中的變量賦值
實現效果:
8、本地緩存
在前面的案例中我們通過url傳參的形式實現組件之間的數據傳遞。還有一種方式就是可以使用本地緩存的形式。可以對本地緩存進行設置、獲取和清理。同一個微信用戶,同一個小程序 storage 上限為 10MB。
wx.setStorage(OBJECT)
設置緩存,異步接口wx.setStorageSync(KEY,DATA)
設置緩存,同步接口wx.getStorage(OBJECT)
獲取緩存,同步接口wx.getStorageSync(KEY)
獲取緩存,同步接口wx.removeStorage(OBJECT)
移除緩存,同步接口wx.removeStorageSync(KEY)
移除緩存,同步接口wx.clearStorage()
清理全部本地緩存,同步接口wx.clearStorageSync()
清理全部本地緩存,同步接口
同步參數說明
參數 | 說明 |
---|---|
key | 本地緩存中的指定的 key |
data | 需要存儲的內容 |
異步參數添加
參數 | 說明 |
---|---|
success | 調用成功的回調函數,獲取緩存 |
fail | 調用失敗的回調函數 |
complete | 調用結束的回調函數 |
9、總結
總的來說,小程序的簡單應用跟其他的MVVM框架一樣是通過數據操作視圖層,組件化開發,提供各種內置的 API,wxml文件不可寫html標簽而是用它自身封裝的組件。