從零開始小程序
今天一不小心拿到了小程序的內測資格，爲了不辜負微信團隊的信任，我決定十一奮鬥一把！不過話說我可是一個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文件的配置
最後附上github 地址 https://github.com/pwh0996/WXDemo.git最後由於着急睡覺 ，所以錯別字比較多，後面整理望大家見諒
喜歡的話歡迎打賞~！！！我會繼續寫下去的