? ? ? ?沒想到我的第一篇簡書是介紹微信小程序,哈哈~
? ? ? ?本人真的是前端的入門級菜鳥,但公司的技術大大們對我都好好,給我很多鍛煉機會,因此我決定好好學習總結,隨時記錄自己的心得,爭取在幾年內達到一個讓自己滿意的水平。小程序這個東西確實比較新,但是寫起來蠻有意思,比起Vue這種框架好理解太多!福音哪~~~
? ? ? ?感覺實在沒法把這東西寫個教程,暫且算成自己的開發心得?這里主要講一下剛開始接觸小程序需要知道的基本知識,話不多說,開搞哈哈。。
我們知道開發小程序前首先要獲取微信小程序的APPID,不然,真的就只能看文檔玩兒啦~然后還要安裝個微信開發者工具,就可以開始創建項目了,如下:
這里提一句,如果是多人開發的話,開發目錄最好是統一將代碼文件放在桌面。添加完后,左側導航欄可以選擇項目進行預覽,調試,編輯代碼(也可以在自己本地編譯器編輯),純屬吐槽一下自帶的編譯器是真不好用→_→
代碼部分:
微信小程序已經存在初始化的一些文件:app.js、app.json、app.wxss
app.js是小程序的腳本代碼,這個文件中可以監聽并處理小程序的生命周期函數、聲明全局變量,調用豐富的API:
可以看到,wx.login( ) ?wx.UserInfo( ) 等都是開放接口,獲取用戶登錄的相關信息。
app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成,配置小程序的窗口 背景色,配置導航條樣式,配置默認標題。但需注意該文件不可添加任何注釋:
app.wxss 是整個小程序的公共樣式表:
創建:
接下來說說具體的創建頁面:
我們會在pages下新建項目文件夾,比如index文件夾,里面包含index.js, index.wxml,index.wxss, index.json (wxml可看做html,wxss可看做css)。
需要強調的是,index.wxml 里搭建頁面結構時,基本用<bock>, <view>(塊級),<text>(行內),<image>等標簽組成,同時可以在上面綁定數據和交互處理函數。而index.json可對該頁做一些配置,例如窗口title:
{
"navigationBarTitleText": "首頁"
}
還有像下面這種底部菜單導航條的配置:
index.js里,生命周期運作流程如下:
路由:
開發中很核心的一個東西就是路由了,不需要我們配置,微信已經封裝得棒棒的三種跳轉方法:
wx.navigateTo(object):保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面。
wx.redirectTo(object):關閉當前頁面,跳轉到應用內的某個頁面。
wx.navigateBack():關閉當前頁面,回退前一頁面
大家看過微信文檔應該知道,微信限制了保留頁面的跳轉(navigateTo)只能有5層,所以當超過5層時,就可以考慮(redirectTo)即關閉當前頁面的跳轉了。
? ? ? 作為一個新手寫到這里覺得截圖好累,哈哈基本的配置,創建介紹差不多了,準備下去再多擼幾遍小程序的官方文檔和項目代碼,再接著往下分享~