首先安裝微信web開發者工具，微信賬號登入。

1 簡介

2 目錄結構

小程式啟動時，會讀取app開頭的檔案，生成小程式例項。並從app.json中找到入口頁面進行顯示。

3 框架結構

由微信小程式的系統層來控制檢視層和邏輯層的互動。

4 配置資訊

全域性配置：
在app.json中進行，可以配置視窗，頁面，選單欄等資訊

區域性配置：
在各頁面所在的 .json檔案中進行。但是隻能配置視窗相關的資訊。
區域性配置的資訊會覆蓋掉全域性配置資訊。

5 邏輯層

微信小程式的邏輯層程式碼是由JavaScript編寫的，只不過微信小程式在JavaScript的基礎上，作了一些擴充套件和修改：
1.增加 App 和 Page 方法，進行程式和頁面的註冊。
2.提供豐富的 API，如掃一掃，支付等微信特有能力。
3.不能進行DOM節點操作。

1 程式碼模組化

工具程式碼寫到單獨的.js檔案中，用module.exports來暴露
需要使用工具程式碼的檔案用require(path)的方式引入。

練習：
每隔1秒鐘列印一次：明年高考的倒計時
335天12小時34分23秒
在wxml檔案中書寫程式碼

<view class="myview">
{{ time }}
  <button bindtap="shiClick">
     檢視
  </button>

</view>

js中程式碼

// page1.js
//獲取全域性app物件
var app = getApp();
//引入封裝的程式碼檔案
 

var common = require("../../utils/gaokao.js");
var that;
Page({
  //獲取全域性app物件

  /**
   * 頁面的初始資料
   */
  data: {
     time :"還有xx天xx小時xx分鐘xx秒"
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
  //這個函式一定會執行
  that = this
  console.log("頁面載入完成");
  //  setInterval(function(){
  //    var time = common.getTime("2018-6-8 09:00:00");
 


  //    console.log(time);
  //  },1000)
  },
  shiClick: function () {

    setInterval(function () {
      var time = common.getTime                ("2018-3-3 07:00:00");
      that.setData({
        time: time
      })


      console.log(time);
    }, 1000)
  }
})

把倒計時的方法封裝

function getTime(data){
  var time = 437 * 24 * 60 * 60 + 24 * 60 * 60 +60 * 60 + 60;
    var time1 = new Date(data).getTime();
    var time2 = new Date().getTime();
    var shijian = time1 - time2;
    var day = parseInt(shijian/(24*60*60*1000));
 var hour = parseInt(shijian/1000/60/60%24);
 var minute = parseInt(shijian/1000/60%60);
 var second = parseInt(shijian / 1000 % 60);

    return day + "天" + hour + "小時" + minute +"分鐘"+second+"秒";
}

module.exports = {
  getTime: getTime
}

2 資料繫結和修改

資料放在js的data中


練習：
點選開關按鈕，控制燈泡的亮和滅，改變背景顏色，就是改變css的屬性類
wxml程式碼

<!--page3.wxml-->

<view class="{{classname}}">
{{ content }}

  <button bindtap="myClick">
     按鈕
  </button>
<button bindtap="changeClass">
     改變view的類
  </button>

<image src="{{img}}"></image>
<button bindtap="kai">
     開
  </button>
  <button bindtap="guan">
     關
  </button>
<button bindtap="kag">
     開關
  </button>
</view>

js程式碼

// page3.js
var that;
var kaig = false;
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    content:"這是預設內容",
    classname:"myview",
    img : "../../image/fa.png"
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  onLoad: function (options) {
       that = this

  },

myClick:function(){

  this.setData({
    content:"這是修改後的內容"
  })

  console.log(123)
},

changeClass:function(){
that.setData({
    classname:"A"

})

},
kai: function () {
  that.setData({
    img: "../../image/fa_selected.png"

  })

},
guan: function () {
  that.setData({
    img: "../../image/fa.png"

  })

},
kag: function () {
  if(kaig){
    that.setData({
      img: "../../image/fa_selected.png"

    })
    kaig = false;
  }else{
    that.setData({
      img: "../../image/fa.png"

    })
    kaig = true;
  }



},



  /**
   * 生命週期函式--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命週期函式--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命週期函式--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命週期函式--監聽頁面解除安裝
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函式--監聽使用者下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {

  },

  /**
   * 使用者點選右上角分享
   */
  onShareAppMessage: function () {

  }
})

3 條件渲染 和 列表渲染

根據不同的條件，來決定是否將標籤顯示在頁面上。

不渲染和被隱藏的區別：
不渲染，根本不會出現文件結構中。
被隱藏，會出現在文件結構中，只是使用者看不見罷了。

從網路獲取列表資料

4 事件

用法和網頁開發是一致的，但是繫結方式有所不同。

兩種繫結方式
1.bind + 事件型別
2.catch + 事件型別
具體參考官方手冊

6 元件

view
scroll-view
swiper

輪播圖效果：+列表

表單：

7 頁面跳轉

帶資料的頁面跳轉：

目標頁面接收傳遞過來的資料：

8 互動彈窗

用於和使用者互動的彈框。提升使用者體驗

wx.showToast()
wx.showModle()

9 動畫效果

1.建立動畫物件

2.描述動畫效果，平移，旋轉。。。

3.呼叫step方法完成描述

4.呼叫export方法匯出動畫資料給需要動畫的標籤。

需要動畫的標籤：

總結

掌握這些基礎，加上一些邏輯程式碼基本可以完成百度音樂播放器和豆瓣電影的微信小程式了。