從零開始小程式

今天一不小心拿到了小程式的內測資格，為了不辜負微信團隊的信任，我決定十一奮鬥一把！不過話說我可是一個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檔案的配置