微信小程式開發教程-從零開始
從零開始小程式
今天一不小心拿到了小程式的內測資格,為了不辜負微信團隊的信任,我決定十一奮鬥一把!不過話說我可是一個Android工程師啊!所以就讓我們從零開始!
所以本文非常適合非前端工程師學習!哈哈!都說小程式出來前端會搶移動端飯碗,但是據我所知現在好多學習的都是移動開發工程師,誰搶誰的還不一定呢!
PS:表問我怎麼拿到小程式內測資格的,有種東西叫內部資源!
- 準備工作
- IDE搭建
- 知識準備
- 從零開始
- app.js
- app.json
- app.wxml
- app.wxss
- Hello World
- 建立程式例項
- 美化ActionBar
- 美化頁面
- 配置首頁
- 超級Hello World
- 事件繫結函式
- 更新介面資料
準備工作
IDE搭建
就不多說了,沒有內測碼去下載個破解版吧,我用了一下,學習完全夠了!IDE破解版+安裝教程
知識準備
JavaScrip還是要看看的,推薦教程 廖雪峰大神的部落格
HTML+CSS 大概知道是幹啥的就行
從零開始
微信小程式中就四種類型的檔案
- js ———- JavaScrip檔案
- json ——– 專案配置檔案,負責視窗顏色等等
- wxml ——- 類似HTML檔案
- wxss ——- 類似CSS檔案
在根目錄下用app來命名的這四中型別的檔案,就是程式入口檔案。
app.json
必須要有這個檔案,如果沒有這個檔案,IDE會報錯,因為微信框架把這個作為配置檔案入口,
你只需建立這個檔案,裡面寫個大括號就行
以後我們會在這裡對整個小程式的全域性配置。記錄了頁面組成,配置小程式的視窗 背景色,配置導航條樣式,配置預設標題。
app.js
必須要有這個檔案,沒有也是會報錯!但是這個檔案建立一下就行 什麼都不需要寫
以後我們可以在這個檔案中監聽並處理小程式的生命週期函式、宣告全域性變數。
app.wxss
這個檔案不是必須的。因為它只是個全域性CSS樣式檔案
app.wxml
這個也不是必須的,而且這個並不是指主介面哦~因為小程式的主頁面是靠在JSON檔案中配置來決定的
有了這兩個檔案你執行程式,IDE就不會報錯了,也意味著這是最簡單的微信小程式
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解釋如下
美化ActionBar
json檔案負責配置ActionBar顏色,我們只需要在裡面新增如下程式碼即可,下圖有引數說明!
{
"window":{
"navigationBarBackgroundColor": "#BBDEF8",
"navigationBarTitleText": "Demo",
"navigationBarTextStyle":"white"
}
}
現在看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(){
// 頁面關閉
}
})
函式解釋如下:
配置首頁
Json檔案負責配置頁面路徑
所以我們在裡面加入如下程式碼
其中index的含義 其實就是指index.js檔案
這裡需要說明一點 pages 裡面的路徑其實是指向js檔案的
如果一個目錄下沒有該名稱的js檔案是會報錯的!
"pages":[
"pages/index/index"
],
完成了!我們來執行程式!
超級Hello World
為了學習事件繫結,以及如何將資料在頁面上更新
我們來做個超級Hello World,就是我點選文字,能讓
它變色!
繫結事件
我們開啟index.wxml 將裡面程式碼改成這樣
<view>
<text catchtap="click" class="window">Hello</text>
</view>
其實也就是加了
- catchtap=”click”
這兩個屬性是什麼意思呢 彆著急 我會一一解釋
上圖展示了事件的一些的屬性名稱,這裡需要注意紅框標註起來的內容,區分出冒泡事件和非冒泡事件,其實冒泡事件就是需要往上面一層容器傳遞這個事件。
看了這圖 我們再來看 catchtap=”click” 的含義
catch 代表非冒泡事件
tap 代表點選事件
所以連在一起就是非冒泡點選事件
那後面那個click是啥
click 其實只是個變數名字
我們在index.js需要用這個名字繫結接收事件的函式
我們開啟index.js
然後新增如下函式
click:function(){
console.log("點選了文字");
},
新增完後代碼長這樣 紅框中就是 新增的這個程式碼
所以其實點選事件的回撥函式 就是 catchtap=”click”
中的 click 後面加上 :function() 構成的
現在我們來執行程式試試 然後點選文字
看是不是呼叫了 click:function 函式 並且打出了log
好接下來我們寫點選一下變色的邏輯
那如何讓一個文字變色呢,當然是css
所以我們需要再index.wxss 中新增一個樣式
.window-red{
color:#D23933;
}
然後我們進入index.js檔案
你會發現程式碼裡面有個 data:{} 它不是page生命週期函式
其實他是個變數的陣列,這個裡面申請的變數都可以在 wxml中使用
我們在這裡申請一個color
color的值就是index.wxss中的樣式名稱
然後進入index.wxml中,將class中的值改成 {{color}}
其實意思就是 將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
});
},
修改完後的程式碼如圖
其實就是在點選是後 更換color變數的值 而更換的這個值其實就是樣式的名稱
更新介面資料
這裡有個問題 我們更換完值 但是在wxml中不會立即生效
所以我們需要呼叫
this.setData()方法將值同步給wxml 讓它立即生效
好了我們執行程式 點選Hello 看看是不是點一下 變一下顏色!
最後再補充一點 index目錄下也是可以配置 json檔案的
也就是每個頁面都可以配置自己獨特的actionbar顏色等等
這裡的配置會覆蓋 app.json檔案的配置