微信小程式開發教程--從零開始
從零開始小程式
今天一不小心拿到了小程式的內測資格，為了不辜負微信團隊的信任，我決定十一奮鬥一把！不過話說我可是一個Android工程師啊！所以就讓我們從零開始！ 所以本文非常適合非前端工程師學習！哈哈！都說小程式出來前端會搶移動端飯碗，但是據我所知現在好多學習的都是移動開發工程師，誰搶誰的還不一定呢！ PS：表問我怎麼拿到小程式內測資格的，有種東西叫內部資源！
- 準備工作
- IDE搭建
- 知識準備
- 從零開始
- app.js
- app.json
- app.wxml
- app.wxss
- Hello World
- 建立程式例項
- 美化ActionBar
- 美化頁面
- 配置首頁
- 超級Hello World
- 事件繫結函式
- 更新介面資料
準備工作
IDE搭建
就不多說了，沒有內測碼去下載個破解版吧，我用了一下，學習完全夠了！IDE破解版+安裝教程
圖片發自簡書App
知識準備
JavaScrip還是要看看的，推薦教程 廖雪峰大神的部落格 HTML+CSS 大概知道是幹啥的就行
從零開始
微信小程式中就四種類型的檔案
- js ---------- JavaScrip檔案
- json -------- 專案配置檔案，負責視窗顏色等等
- wxml ------- 類似HTML檔案
- wxss ------- 類似CSS檔案
在根目錄下用app來命名的這四中型別的檔案，就是程式入口檔案。
app.json
必須要有這個檔案，如果沒有這個檔案，IDE會報錯，因為微信框架把這個作為配置檔案入口， 你只需建立這個檔案，裡面寫個大括號就行 以後我們會在這裡對整個小程式的全域性配置。記錄了頁面組成，配置小程式的視窗 背景色，配置導航條樣式，配置預設標題。
app.js
必須要有這個檔案，沒有也是會報錯！但是這個檔案建立一下就行 什麼都不需要寫 以後我們可以在這個檔案中監聽並處理小程式的生命週期函式、宣告全域性變數。
app.wxss
這個檔案不是必須的。因為它只是個全域性CSS樣式檔案
app.wxml
這個也不是必須的，而且這個並不是指主介面哦~因為小程式的主頁面是靠在JSON檔案中配置來決定的
有了這兩個檔案你執行程式，IDE就不會報錯了，也意味著這是最簡單的微信小程式
Paste_Image.png
Hello World
建立程式例項
app.js檔案管理整個程式的生命週期，所以在裡面新增如下程式碼：（輸入App IDE會有提示）
-
App({ -
onLaunch: function () { -
console.log('App Launch') -
}, -
onShow: function () { -
console.log('App Show') -
}, -
onHide: function () { -
console.log('App Hide') -
} -
})
具體API解釋如下
Paste_Image.png
美化ActionBar
json檔案負責配置ActionBar顏色，我們只需要在裡面新增如下程式碼即可，下圖有引數說明！
Paste_Image.png
Paste_Image.png
-
{ -
"window":{ -
"navigationBarBackgroundColor": "#BBDEF8", -
"navigationBarTitleText": "Demo", -
"navigationBarTextStyle":"white" -
} -
}
Paste_Image.png
現在看ActionBar是不是像那麼回事了！好接下來我們繼續寫我們第一個介面
美化頁面
美化頁面我們用到了 wxml 和 wxss檔案 為了程式程式碼結構簡潔 我們需要在跟目錄下建立一個新資料夾 名字隨意，我們這裡叫pages 然後在pages資料夾裡再建立新資料夾 名字隨意 這裡我們叫 index 然後我們建立index.wxml檔案然後在裡面寫入以下程式碼
-
<view> -
<text class="window">Hello</text> -
</view>
然後建立index.wxss檔案然後在裡面寫入以下程式碼
-
.window{ -
color=#4995fa; -
}
然後我們建立 index.js檔案 在檔案中輸入如下程式碼（輸入Page IDE會有提示）
-
Page({ -
data:{ -
// text:"這是一個頁面" -
}, -
onLoad:function(options){ -
// 頁面初始化 options為頁面跳轉所帶來的引數 -
}, -
onReady:function(){ -
// 頁面渲染完成 -
}, -
onShow:function(){ -
// 頁面顯示 -
}, -
onHide:function(){ -
// 頁面隱藏 -
}, -
onUnload:function(){ -
// 頁面關閉 -
} -
})
函式解釋如下：
Paste_Image.png
配置首頁
Json檔案負責配置頁面路徑 所以我們在裡面加入如下程式碼 其中index的含義 其實就是指index.js檔案 這裡需要說明一點 pages 裡面的路徑其實是指向js檔案的 如果一個目錄下沒有該名稱的js檔案是會報錯的！
-
"pages":[ -
"pages/index/index" -
],
完成了！我們來執行程式！
Paste_Image.png
超級Hello World
為了學習事件繫結，以及如何將資料在頁面上更新 我們來做個超級Hello World，就是我點選文字，能讓 它變色！
繫結事件
我們開啟index.wxml 將裡面程式碼改成這樣
-
<view> -
<text catchtap="click" class="window">Hello</text> -
</view>
其實也就是加了
- catchtap="click"
這兩個屬性是什麼意思呢 彆著急 我會一一解釋
Paste_Image.png
上圖展示了事件的一些的屬性名稱，這裡需要注意紅框標註起來的內容，區分出冒泡事件和非冒泡事件，其實冒泡事件就是需要往上面一層容器傳遞這個事件。
看了這圖 我們再來看 catchtap="click" 的含義 catch 代表非冒泡事件 tap 代表點選事件 所以連在一起就是非冒泡點選事件 那後面那個click是啥 click 其實只是個變數名字 我們在index.js需要用這個名字繫結接收事件的函式 我們開啟index.js 然後新增如下函式
-
click:function(){ -
console.log("點選了文字"); -
},
新增完後代碼長這樣 紅框中就是 新增的這個程式碼
Paste_Image.png
所以其實點選事件的回撥函式 就是 catchtap="click" 中的 click 後面加上 :function() 構成的 現在我們來執行程式試試 然後點選文字
Paste_Image.png
看是不是呼叫了 click:function 函式 並且打出了log
好接下來我們寫點選一下變色的邏輯 那如何讓一個文字變色呢，當然是css 所以我們需要再index.wxss 中新增一個樣式
-
.window-red{ -
color:#D23933; -
}
Paste_Image.png
然後我們進入index.js檔案 你會發現程式碼裡面有個 data:{} 它不是page生命週期函式 其實他是個變數的陣列，這個裡面申請的變數都可以在 wxml中使用
Paste_Image.png
我們在這裡申請一個color
Paste_Image.png
color的值就是index.wxss中的樣式名稱 然後進入index.wxml中,將class中的值改成 {{color}}
Paste_Image.png
其實意思就是 將js檔案中變數 color的值在這裡使用 也就是值等於 window 然後我們再回到index.js檔案 在最上面申請一個變數控制點選 然後在click:function() 函式中新增如下程式碼
-
click:function(){ -
console.log("點選了文字"); -
if(flag){ -
color = "window-red"; -
flag = false; -
}else{ -
color = "window"; -
flag = true; -
} -
this.setData({ -
color -
}); -
},
修改完後的程式碼如圖
Paste_Image.png
其實就是在點選是後 更換color變數的值 而更換的這個值其實就是樣式的名稱
更新介面資料
這裡有個問題 我們更換完值 但是在wxml中不會立即生效 所以我們需要呼叫 this.setData()方法將值同步給wxml 讓它立即生效
好了我們執行程式 點選Hello 看看是不是點一下 變一下顏色！
111111.gif
最後再補充一點 index目錄下也是可以配置 json檔案的 也就是每個頁面都可以配置自己獨特的actionbar顏色等等 這裡的配置會覆蓋 app.json檔案的配置
喜歡的話歡迎打賞~！！！我會繼續寫下去的
作者：蒲文輝 連結：https://www.jianshu.com/p/aaef5ceb3936 來源：簡書 著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。 --------------------- 本文來自 Duan_Super 的CSDN 部落格 ，全文地址請點選：https://blog.csdn.net/Duan_Super/article/details/79390683?utm_source=copy