開發前的準備：

  先把 微信開發者工具 下載了，具體百度全都有。

 （1）有人說，會Vue小程式根本不用學：微信小程式雖然是騰訊自己搞的，但是核心的西鄉跟Vue等框架是一樣的。

（2）善於蒐集精美的小元件，：“我們不生產程式碼，我們只是程式碼的搬運工，”善於找到自己想要的然後學習組裝成自己一個大專案，可以學到很多隻是。具體上Github搜尋，全都有。

（一）生成結構

首先是程式碼的構成，分為四個模板。1.Json配置 2.WXML模板（相當於Html）3.WXSS樣式（相當於Css）3.JS邏輯互動。

 看看他們分別的作用。

（1）Json配置

根目錄有一個app.json和project.config.json，此外在 page/logs目錄下還有一個logs.json。

 app.json是對小程式的全域性配置，包括小程式的所有頁面的路徑，介面的表現，網路超時的時間，底部的Tab。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

 pages是小程式所有頁面的路徑。

window是定義小程式頂部和底部等其他樣式。

檔名不需要寫檔案字尾，因為框架會自動去尋找路徑下 .json, .js, .wxml, .wxss 四個檔案進行整合。

具體window屬性請參考:https://developers.weixin.qq.com/miniprogram/dev/framework/config.html點選開啟連結

project.config.json 

是一個自定義配置，所有樣式和配置都在這裡面，當你換電腦的時候可以載入這個配置程式碼包。

（2）WXML模板

跟html一樣，也是採用html+css+js實現。

當你開啟page/index/index.wxml頁面時，你會看到以下程式碼：

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 獲取頭像暱稱 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

只是標籤名和屬性變換了而已，多了一些類似Vue裡面一些判斷屬性的表示式，簡單來說這種MVVM的開發模式，就是把渲染和邏輯分離，不要讓JS直接操作DOM，JS只要管理就好，然後再通過一種模板語法來描述狀態和介面結構的關係。

舉個例子：

wxml直接這樣寫  

<text>{{msg}}</text>

JS通過管理狀態這樣寫：

Page({
  data: {
    msg: 'Hello !'
  }
})

通過{{}}語法把一個變數繫結到介面上，我們稱為資料繫結。僅僅通過資料繫結還不能完整的描述狀態和介面的關係，加上一些if/else，for等控制力。

（3）WXSS樣式

 跟css之類的類似，新增了尺寸單位，因為是移動端開發，會有不同寬度和裝置畫素比，wxss加了rpx為新單位，免去了換算的煩惱，由於採用了浮點數運算，還有有一點的偏差。提供了全域性樣式和區域性樣式。此外僅支援部分css選擇器。

（4）JS的互動邏輯

僅僅一個介面是不夠的，還要響應使用者，做下互動，獲取當前位置等等。

舉個例子：

在wxml這樣寫：

<view>{{ msg }}</view>
<button bindtap="clickMe">點選我</button>

在js中這樣寫：

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

此外，小程式中還提供了豐富的API，在預設程式中，就舉了一個例子：

通過pages/index/index.js 呼叫了 wx.getUserInfo 獲取微信使用者的頭像和暱稱，最後 setData 把獲取到的資訊顯示到介面上。

wxml：

<!--wxml-->
<!-- 如果只是展示使用者頭像暱稱，可以使用 <open-data /> 元件 -->
<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>
<!-- 需要使用 button 來授權登入 -->
<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授權登入</button>
<view wx:else>請升級微信版本</view>

Page({
  data: {
    canIUse: wx.canIUse('button.open-type.getUserInfo')
  },
  onLoad: function() {
    // 檢視是否授權
    wx.getSetting({
      success: function(res){
        if (res.authSetting['scope.userInfo']) {
          // 已經授權，可以直接呼叫 getUserInfo 獲取頭像暱稱
          wx.getUserInfo({
            success: function(res) {
              console(res.userInfo)
            }
          })
        }
      }
    })
  },
  bindGetUserInfo: function(e) {
    console.log(e.detail.userInfo)
  }
})

       結束：2018.6.29 2:16