一個C#程序員學習微信小程序的筆記

客戶端打開小程序的時候，就將代碼包下載到本地進行解析，首先找到了根目錄的 app.json ，知道了小程序的全部頁面。

在這個Index頁面就是咱們的首頁，客戶端在啓動的時候，將首頁的代碼裝載進來，經過微信的機制，就渲染出來了頁面。

App({
  onLaunch() {
    // 小程序啓動以後 觸發
  }
})

小程序在啓動的時候，首先經過 App() 定義的 App() 實例的 onLaunch  方法，這個方法是各個頁面共享的，固然還有更多的回調事件。

Page({
  data: {
    text: 'init data',
    array: [{msg: '1'}, {msg: '2'}]
  }
})

在頁面加載時，data這個屬性會提供給頁面使用，會以Json的形式返回給前端，而後咱們能夠試着把這個值渲染在頁面上。

<view>{{text}}</view>
<view>{{array[0].msg}}</view>

 小程序頁面中還有不少的方法，像 onReady() 當頁面加載穩當，能夠進行交互的時候觸發，還有小程序被切入後臺的 OnHide() 事件。固然這些都是應用級的事件，還有一些和用戶親密交互的事件，官方稱這種叫作頁面事件處理函數。

像最操蛋的是微信小程序沒有下拉事件 onPullDownRefresh() ，這個東西本身搞，我也是福氣了，不過也對，這東西解耦，就當我剛纔說的是放屁。。。例如如下代碼。

在.json文件裏設置 "enablePullDownRefresh": true,用於開啓頁面下拉加載效果，能夠當前頁設置也能夠全局設置；

{　　//當前頁
    "enablePullDownRefresh": true //當前頁
    "backgroundTextStyle": "dark" //頂部顯示顏色爲深色的三個點
}

 "window": {  //全局
    "enablePullDownRefresh": true //全局
    "backgroundTextStyle": "dark" //頂部顯示顏色爲白色的三個點
  }

而後在某個頁面的js中，去寫一個下拉事件，而後例如這樣的。

onPullDownRefresh:function(){
    var that = this;
    that.setData({
      currentTab: 0 //當前頁的一些初始數據，視業務需求而定
    })

　　　　wx.startPullDownRefresh()；

this.onLoad(); //從新加載onLoad()
    console.log('i am refreshing....');
  }

通過微信開發者的調試工具，咱們能夠輕鬆看到log的記錄，在那個setData裏面是初始的數據。

 最後，在onload事件中中止刷新。

onLoad: function (options) {
    wx.stopPullDownRefresh() //刷新完成後中止下拉刷新動效
  },

你能夠經過一個按鈕來進行刷新，bindtap能夠直接請求邏輯層。

下面就要說一說事件了，事件是視圖層到邏輯層的通信方式。事件是綁定到dom上的，當觸發的時候就回去執行響應的邏輯層。這些都是最基本的。

可是其中的事件分爲 bindtap 和 catchtap 。那這兩個有什麼區別呢？一個是冒泡 一個是不冒泡。那這冒不冒泡又是個什麼鬼意思呢？

<view id="outer" bindtap="handleTap1">
  outer view
  <view id="middle" catchtap="handleTap2">
    middle view
    <view id="inner" bindtap="handleTap3">
      inner view
    </view>
  </view>
</view>

通過測試，點擊inner view 會觸發 inner view和 middle view的事件，而點擊 middler view 則只會觸發它的事件，由於再放上走被outer view給擋住了 。

此處爲了調試，請在app.json中的pages中添加頁面，而後能夠經過如下代碼進行跳轉。

wx.navigateTo({
      url: '../demo/demo',
    })

在小程序中，也支持本地存儲。 例如api  wx.setStorage() 和wx. setStorageSync() 。

還有就是它和Vue同樣不支持jquery，也就是無法裝逼了。另外我關注的自適應。微信小程序支持rpx；能夠達到自適應。這我開心壞了。

爲了安全性，它不知道跳轉外網。這個可能須要申請（money，你懂的。）

問題：關於沒法小白我沒辦法獲取input裏面的值，由於沒辦法操做dom，這個是有緣由，由於微信小程序沒法肯定dom，由於是有中間的編譯，這和vue有點差距。能夠這麼操做。

解決：微信對input的組件，提供了多個事件，看來只能經過這些事件去實現單個input的值的獲取。

根據這些表單事件咱們能夠去獲取裏面的值而後去改data裏面的值，也就達到這效果。

看樣子，小程序比Vue還要優雅。