一.微信小程序簡介
小程序是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用。也體現了“用完即走”的理念，用戶不用關心是否安裝太多應用的問題。應用將無處不在，隨時可用，但又無需安裝卸載。
二.小程序界面結構
在成功創建一個微信小程序項目之后,在根目錄下存在app.json(配置文件),app.js(邏輯文件),app.wxss(樣式文件).文件夾pages為界面相關文件所在類,pages/index為默認的首頁(index)所在文件夾,其中index.js(邏輯文件),index.json(配置文件),index.wxml(結構文件),index.wxss(樣式文件):
--觀察根目錄下app.json文件:
--在windows中,定義設置了導航欄的樣式:
backgroundTextStyle: 設置背景文字顏色,默認只能設置為dark和light
navigationBarBackgroundColor: 設置導航欄背景顏色
navigationBarTitleText: 設置導航欄的標題
navigationBarTextStyle: 設置導航欄文字顏色,默認只能設置為black和white
--在pages中設置路徑:
"pages/index/index":尋找的是pages/index/index頁面鏈接
"pages/logs/logs":尋找的是pages/logs/logs頁面鏈接
--在微信官方開發文檔中給出了其他可以自定義設置的配置屬性信息:點擊此處跳轉官方文檔
--自定義配置tabBar:
--在成功配置后,我們可以發現在頁面模擬器中進行頁面切換:
--app.js文件相關描述
1 //app.js
2 var obj = { 3 onLaunch: function () { 4 // 展示本地存儲能力
5 var logs = wx.getStorageSync('logs') || [] 6 logs.unshift(Date.now()) 7 wx.setStorageSync('logs', logs) 8
9 // 登錄
10 wx.login({ 11 success: res => { 12 // 發送 res.code 到后台換取 openId, sessionKey, unionId
13 } 14 }) 15 // 獲取用戶信息
16 wx.getSetting({ 17 success: res => { 18 if (res.authSetting['scope.userInfo']) { 19 // 已經授權，可以直接調用 getUserInfo 獲取頭像昵稱，不會彈框
20 wx.getUserInfo({ 21 success: res => { 22 // 可以將 res 發送給后台解碼出 unionId
23 this.globalData.userInfo = res.userInfo 24
25 // 由於 getUserInfo 是網絡請求，可能會在 Page.onLoad 之后才返回
26 // 所以此處加入 callback 以防止這種情況
27 if (this.userInfoReadyCallback) { 28 this.userInfoReadyCallback(res) 29 } 30 } 31 }) 32 } 33 } 34 }) 35 }, 36 globalData: { 37 userInfo: null
38 } 39 }; 40 //調用了一個APP方法(全局方法)
41 App(obj);
--app.js文件在小程序運行時就會被加載,我們可以在該文件下方添加console.log()方法來驗證該類的加載,在該類中主要作用是調用了一個App()全局方法,調用此方法的作用就是用來創建應用程序實例對象.定義應用程序的生命周期事件;在app.wxss中,定義了一些css樣式屬性.
--在pagex/index中,存在index.js文件主要是完成頁面的邏輯,功能的實現;在index.wxml中則是進行界面定義,和html相似,但是是嚴格遵循XML語法的,在index.wxss中定義界面的樣式,使用的是CSS語法,但是區別於CSS提供了更加方便的rpx單位(可以解決手機屏幕顯示碎片化的問題).index.json文件,可以用來重寫app.json中window中的屬性樣式,來調整頁面的某些屬性(只能設置windows當中的屬性);
三.小程序的配置
在開發小程序的時候,通常都需要自定義小程序的標題導航來,底部導航欄等等界面設置,因此我們需要進行小程序的配置,我們可以在app.json中進行配置,也可以在每個頁面的json文件中進行配置.
--配置app.json文件,該文件遵循JSON語法,可以進行導航來樣式和組成的相關配置..
1 { 2 "pages": [ 3 "pages/index/index", 4 "pages/logs/logs", 5 "pages/demo/demo"
6 ], 7 "window": { 8 "backgroundTextStyle": "light", 9 "navigationBarBackgroundColor": "#ccc", 10 "navigationBarTitleText": "微信小程序", 11 "navigationBarTextStyle": "black"
12 }, 13 "tabBar": { 14 "list": [ 15 { 16 "pagePath": "pages/index/index", 17 "text": "首頁"
18 }, 19 { 20 "pagePath": "pages/demo/demo", 21 "text": "自定義"
22 }, 23 { 24 "pagePath": "pages/logs/logs", 25 "text": "日志"
26 } 27 ] 28 }, 29 "sitemapLocation": "sitemap.json", 30 "style": "v2", 31 "debug":true
32 }
--在開啟debug日志后,將會打印程序開發階段的日志文件信息,方便我們測試調優.
--配置底部導航欄(標簽欄)