可愛的小程序-- (一)

? ? ? ?沒想到我的第一篇簡書是介紹微信小程序,哈哈~

? ? ? ?本人真的是前端的入門級菜鳥,但公司的技術大大們對我都好好,給我很多鍛煉機會,因此我決定好好學習總結,隨時記錄自己的心得,爭取在幾年內達到一個讓自己滿意的水平。小程序這個東西確實比較新,但是寫起來蠻有意思,比起Vue這種框架好理解太多!福音哪~~~

? ? ? ?感覺實在沒法把這東西寫個教程,暫且算成自己的開發心得?這里主要講一下剛開始接觸小程序需要知道的基本知識,話不多說,開搞哈哈。。

我們知道開發小程序前首先要獲取微信小程序的APPID,不然,真的就只能看文檔玩兒啦~然后還要安裝個微信開發者工具,就可以開始創建項目了,如下:

這里提一句,如果是多人開發的話,開發目錄最好是統一將代碼文件放在桌面。添加完后,左側導航欄可以選擇項目進行預覽,調試,編輯代碼(也可以在自己本地編譯器編輯),純屬吐槽一下自帶的編譯器是真不好用→_→

左側導航條

代碼部分:

微信小程序已經存在初始化的一些文件:app.js、app.json、app.wxss

app.js是小程序的腳本代碼,這個文件中可以監聽并處理小程序的生命周期函數、聲明全局變量,調用豐富的API:


app.js

可以看到,wx.login( ) ?wx.UserInfo( ) 等都是開放接口,獲取用戶登錄的相關信息。

app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成,配置小程序的窗口 背景色,配置導航條樣式,配置默認標題。但需注意該文件不可添加任何注釋:


app.json

app.wxss 是整個小程序的公共樣式表:


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里,生命周期運作流程如下:


index.js

路由:

開發中很核心的一個東西就是路由了,不需要我們配置,微信已經封裝得棒棒的三種跳轉方法:

wx.navigateTo(object):保留當前頁面,跳轉到應用內的某個頁面,使用wx.navigateBack可以返回到原頁面。

wx.redirectTo(object):關閉當前頁面,跳轉到應用內的某個頁面。

wx.navigateBack():關閉當前頁面,回退前一頁面

大家看過微信文檔應該知道,微信限制了保留頁面的跳轉(navigateTo)只能有5層,所以當超過5層時,就可以考慮(redirectTo)即關閉當前頁面的跳轉了。

? ? ? 作為一個新手寫到這里覺得截圖好累,哈哈基本的配置,創建介紹差不多了,準備下去再多擼幾遍小程序的官方文檔和項目代碼,再接著往下分享~

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容