最近領導交給一個任務,單獨開發(fā)一個小程序項目,還要出一篇小程序課題文檔。這也是我第一次接觸小程序,遂把領導對課題的要求以及自己開發(fā)過程中遇到的問題做如下總結:
1. 如何創(chuàng)建小程序項目
這一步在官方文檔中的描述已經很清楚了,主要分為幾步:
申請賬號,擁有小程序賬號。
在小程序管理平臺,可以看到小程序的 AppID與AppSecret。
綁定在一個微信開放平臺賬戶下的訂閱號、服務號、小程序、APP、PC網站都叫做”應用“,每個應用都有自己的AppID和AppSecret,AppID叫做應用唯一標識,AppSecret叫做應用密鑰。
AppID與AppSecret 的作用及使用方式:
在開發(fā)過程中如果要使用微信相關功能,必須有官方認證的賬號密碼
小程序項目中app.js的data需要添加appid和secret屬性,二者配合使用,可調用公眾號的接口能力
管理員需要將開發(fā)人員的微信號設置為開發(fā)者賬號才可以進行小程序的開發(fā)
安裝開發(fā)工具
簡要介紹開發(fā)工具
微信小程序和公眾號開發(fā)有自己的微信開發(fā)工具,集成了公眾號網頁調試和小程序調試兩種開發(fā)模式。
使用公眾號網頁調試,開發(fā)者可以調試微信網頁授權和微信JS-SDK 詳情
使用小程序調試,開發(fā)者可以完成小程序的 API 和頁面的開發(fā)調試、代碼查看和編輯、小程序預覽和發(fā)布等功能。
增加了支持甘特圖的mermaid語法1 功能;
2. 如何獲取微信賬號信息及與第三方賬號做綁定(小程序啟動的過程都經歷了哪些東西)
功能性的小程序一般都需要獲取用戶的微信賬號信息。最初小程序可以在首次進入時調用wx.getUserInfo(Object object) 彈窗微信授權,
后來接口getUserInfo做了調整,在用戶未授權過的情況下調用此接口,將不再出現授權彈窗,會直接進入 fail 回調。在用戶已授權的情況下調用此接口,可成功獲取用戶信息。
現在小程序獲取授權需要通過button組件的bindgetuserinfo屬性,配合open-type屬性,實現點擊按鈕返回獲取到的用戶信息:
小程序的啟動:
. 微信客戶端在打開小程序之前,會把整個小程序的代碼包下載到本地。
. 緊接著通過 app.json 的 pages 字段就可以知道當前小程序的所有頁面路徑,寫在 pages 字段的第一個頁面就是這個小程序的首頁(打開小程序看到的第一個頁面)。
. 于是微信客戶端就把首頁的代碼裝載進來,通過小程序底層的一些機制,就可以渲染出這個首頁。
. 小程序啟動之后,在 app.js 定義的 App 實例的 onLaunch(小程序啟動時觸發(fā)) 回調會被執(zhí)行
我的小程序在app.js的onLaunch 方法中都執(zhí)行了哪些操作:
1.項目啟動時執(zhí)行 wx.getSetting() 獲取用戶的當前設置,判斷用戶是否已授權
2. 如果用戶已授權,調用wx.getUserInfo()獲取用戶信息,頭像昵稱等,然后進行自己小程序的內部操作
3. 如果用戶未授權,則跳轉至登錄頁,用戶通過點擊按鈕彈窗授權,獲取用戶信息
如果需要將微信賬號信息與自己的項目賬號做綁定,那么可以將獲取到的微信賬號信息作為參數傳送給后臺,后臺生成一個相對應的項目賬號。
3. 小程序配置 : 全局&頁面
全局配置
app.json是小程序的全局配置,包括小程序的所有頁面路徑、界面表現、底部 tab 等,一般包含幾個字段:pages、window、tabBar
pages字段 —— 用于描述當前小程序所有頁面路徑,這是為了讓微信客戶端知道當前你的小程序頁面定義在哪個目錄。
window字段 —— 定義小程序所有頁面的頂部背景顏色,文字顏色定義等。
tabBar字段 —— 定義小程序底部tab欄的表現,以及 tab 切換時顯示的對應頁面。
注: tab欄的圖標icon 大小限制為40kb,建議尺寸為 81px * 81px,不支持網絡圖片,同時tab列表配置最少2個,最多5個。
頁面配置
一個小程序頁面由四個文件組成:
.json 后綴的 JSON 配置文件
.wxml 后綴的 WXML 模板文件
.wxss 后綴的 WXSS 樣式文件
.js 后綴的 JS 腳本邏輯文件
每個小程序頁面可以使用自己的.json文件來對本頁面的窗口表現進行配置。
頁面配置一般包括導航欄標題文字內容(navigationBarTitleText),是否開啟下拉刷新(enablePullDownRefresh)等等。
————————————————
頁面的配置只能設置 app.json 中部分 window 配置項的內容,頁面中配置項會覆蓋 app.json 的 window 中相同的配置項。
小程序為開發(fā)者提供了一系列基礎組件,開發(fā)者可以通過組合這些基礎組件進行快速開發(fā)。
組件是視圖層的基本組成單元,一個組件通常包括 開始標簽 和 結束標簽,屬性 用來修飾這個組件,內容 在兩個標簽之內,例如:
小程序組件參考。
小程序注冊完成后,加載頁面,觸發(fā)onLoad方法。
頁面載入后觸發(fā)onShow方法,顯示頁面。
首次顯示頁面,會觸發(fā)onReady方法,渲染頁面元素和樣式,一個頁面只會調用一次。
當小程序后臺運行或跳轉到其他頁面時,觸發(fā)onHide方法。
當小程序有后臺進入到前臺運行或重新進入頁面時,觸發(fā)onShow方法。
當使用重定向方法wx.redirectTo(OBJECT)或關閉當前頁返回上一頁wx.navigateBack(),觸發(fā)onUnload
小程序頁面之間有時需要進行數據的傳遞,個人使用的頁面間數據通訊有兩種方式:
頁面A跳轉到頁面B時,在頁面路由后攜帶參數,頁面B在onLoad時獲取options中的參數。
頁面A:
如果頁面之間需要傳遞的參數為對象或者數組,那么通過路由拼接參數的形式就不可取了,此時可以通過app.js中的globalData全局變量進行賦值。
頁面A:
5. 如何開發(fā)公共代碼
開發(fā)公共組件,個人使用的是component構造器定義公共組件。
Component構造器可用于定義組件,調用Component構造器時可以指定組件的屬性、數據、方法等。
具體開發(fā)方式是:
項目外層目錄中創(chuàng)建components文件夾,創(chuàng)建組件文件夾然后新建Component,在這里寫好公共組件的頁面結構,樣式,事件等。
組件的js文件中包含組件屬性,組件數據,組件方法等,與vue組件有相似之處。
properties是組件的對外屬性,比如引用組件的頁面?zhèn)鬟f給公共組件的值就通過properties來接收
在需要使用公共組件的頁面JSON文件中,添加usingComponents配置,使用公共組件,key值是組件要在頁面中使用時的標簽名,val是公共組件的路徑。
在頁面的wxml文件中,使用json定義的公共組件標簽,引用公共組件,并傳遞數據:
公共組件中通過properties接收引用頁面?zhèn)鬟f的值,然后使用{{}}在組件頁面進行數據綁定即可。