微信小程式(天氣預報)開發文件
相關Demo以放到github上 ---------飛機------------https://github.com/193Eric/XCXdemo.git
小程式技術文件
一.小程式應用分析
1. 簡單介紹
小程式是一種微信開發不需要下載安裝即可使用的應用。
2. 實質
微信小程式就是Hybrid技術的應用。 Hybrid App(混合模式移動應用)。 小程式能夠更多的可以更多的呼叫手機本身的功能(如位置資訊,攝像頭等)。
3. 小程式註冊
小程式開發框架的邏輯層是由JavaScript編寫。 邏輯層將資料進行處理後傳送給檢視層,同時接受檢視層的事件反饋。小程式再次基礎上做了一些修改方便開發: 增加 App 和 Page 方法,進行程式和頁面的註冊。
App() 函式用來註冊一個小程式。接受一個 object 引數,其指定小程式的生命週期函式等。
Page() 函式用來註冊一個頁面。接受一個 object 引數,其指定頁面的初始資料、生命週期函式、事件處理函式等。生命週期函式為:
onLoad: 頁面載入
一個頁面只會呼叫一次。
onShow: 頁面顯示
每次開啟頁面都會呼叫一次。
onReady: 頁面初次渲染完成
一個頁面只會呼叫一次,代表頁面已經準備妥當,可以和檢視層進行互動
onHide: 頁面隱藏
當navigateTo或底部tab切換時呼叫
onUnload: 頁面解除安裝
當redirectTo或navigateBack的時候呼叫
二.小程式例項解析
1. 建立專案
現在是測試版本,所有的AppID全部都是騰訊內部發布的。但是,沒有AppID也不影響測試開發,我們可以選擇無AppID進行測試開發,只是不能在手機真機上面除錯。
選擇專案目錄,再新增專案即可。
2. 編寫程式碼
點選開發者工具左側導航的「編輯」,我們可以看到這個專案,已經初始化幷包含了一些簡單的程式碼檔案。是app.js、app.json、app.wxss這三個。其中app.js是我們傳統的js檔案,app.json是專案配置檔案,app.wxss是專案css檔案,微信小程式會讀取這些檔案,並生成小程式例項。
(1)app.json:
app.json
我們可以在這個檔案中配置小程式是由哪些頁面組成,配置小程式的視窗 背景色,配置導航條樣式,配置預設標題。注意該檔案不可新增任何註釋。
window是用於設定小程式的狀態列、導航條、標題、視窗背景色。
pages裡面是程式的所有頁面的目錄,所有需要跳轉的頁面,都需要在pages裡面配置好。
(2)tabBar:
tabBar是底部導航欄部分,tabBar API為
tabBar配置好後,在任何頁面下,都會有一個tab導航欄,其中list裡面是配置tab裡有多少個按鈕,案例中為兩個。list裡面有多個屬性,
案例APP的app.json為:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "green",
"navigationBarTitleText": "APP",
"navigationBarTextStyle":"white"
},
"tabBar": {
"selectedColor":"red",
"list": [{
"pagePath": "pages/index/index",
"text": "首頁",
"iconPath":"goods_mgold.png",
"selectedIconPath":"goods_mgold.png"
}, {
"pagePath": "pages/logs/logs",
"text": "天氣查詢",
"iconPath":"icon_community.png",
"selectedIconPath":"icon_community.png"
}]
}
}
上面那段配置程式碼展示出來的效果是:
(3)wxml檔案:
微信的wxml檔案相當於傳統的html檔案,省去了一些微信APP開發不需要的標籤,如H1-H5,用了這些就會報錯,其中html中的div標籤,在微信中變成了view標籤。(也就是換了個名字。。。)
(4)app.js:
app.js是小程式的指令碼程式碼。我們可以在這個檔案中監聽並處理小程式的生命週期函式、宣告全域性變數。呼叫 MINA 提供的豐富的 API。程式碼主要是寫在APP物件裡面作用於全域性。
其中每個頁面都可以有自己的js檔案,例如index.js就是Index.wxml頁面的js程式碼,其中js程式碼的一些應用主要是寫在page物件裡面。
事件的使用方式:
首先在wxml裡面寫入一個bindtap點選事件。
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
然後再js的page物件中定義:
就可以實現一個點選事件。其中bind是繫結,type為tap。type是事件型別。
資料渲染:
在元件上使用wx:for控制屬性繫結一個數組,即可使用陣列中各項的資料重複渲染該元件。預設陣列的當前項的下標變數名預設為index,陣列當前項的變數名預設為item
xwml裡面寫入:
index.js裡面寫入:
條件渲染:
wx:if來判斷是否在頁面是進行渲染顯示
可以在Page物件裡面的data屬性裡面寫入condition的值為true或者false判斷是否渲染。
模板定義:
可以在模板中定義程式碼片段,然後在不同的地方呼叫。
直接在外部新建一個box.wxml的模板:
然後建立一個外部commom.js模組。
通過module.exports匯出模組,
先在需要引入模組的wxml檔案中直接include 帶上src地址
然後在需要引入模組的js檔案中:
然後用common.show()呼叫。
這樣就可以複用這個模組了。在任何頁面中只需要用include匯入wxml程式碼,用require引入js檔案就可以新增這個模組。
(5)wxss:
wxss檔案就是傳統的css檔案,沒有很大的區別。
但是其中微信給一套響應式的佈局
rpx(responsive pixel): 可以根據螢幕寬度進行自適應。規定螢幕寬為750rpx。如在 iPhone6 上,螢幕寬度為375px,共有750個物理畫素,則750rpx = 375px = 750物理畫素,1rpx = 0.5px = 1物理畫素。
rpx的原理就是rem佈局原理。只是換個名字,少了一步螢幕fon-size換算的Js程式碼,微信在內部執行了,不需要自己寫了。
(6)介面API:
小程式開發框架提供豐富的微信原生 API,可以方便的調起微信提供的能力,如獲取使用者資訊,本地儲存,支付功能等。
API文件地址
https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-network.html?t=1477656494973