微信小程序初使心得【微信小程序快速入門】

摘要: 2016年推出微信小程序，時至今日，歷經幾個版本的更新，已形成了相對實用和穩定的服務平台。本文簡單的介紹了微信小程序的入門用法，今后會繼續關注和實踐。

     

    2016年推出微信小程序，時至今日，歷經幾個版本的更新，已形成了相對實用和穩定的服務平台。本文簡單的介紹了微信小程序的入門用法，今后會繼續關注和實踐。

     2017年，春節剛過，想來，已經過了三四個工作日。接下來，期待的莫過於，十五的元宵。

近日，在工作閑暇之余，閱讀了一些關於微信小程序的文章，忍不住，想動手試他一試。本文就以“我的第一個微信小程序”為例，簡單的介紹下，微信小程序的入門級用法。

開發微信小程序前期，我們需要做以下幾項准備工作：

1.、注冊和認證一個微信小程序賬號，注冊后，騰訊審核很及時，我的是當天過的。

2、“工欲善其事，必先利其器。”，接着，我們需要下載一個微信開發者工具。相關下載鏈接信息：

https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html

做好前期的准備工作后，接下來需要做的是，就啟動微信開發者工具，通過前期准備的小程序賬號，獲取小程序的APPId，然后，創建一個小程序項目。如果不清楚怎樣獲取APPID，請訪問簡易教程。

在這里，我新建一個名為demo的小程序項目。我的目錄結構是這樣的：

點擊開發者工具左側導航的“編輯”，最關鍵也是必不可少的，是 app.js、app.json、app.wxss 這三個。其中，.js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件。微信小程序會讀取這些文件。APP函數用來注冊一個小程序。接受一個 object 參數，其指定小程序的生命周期函數等。app函數必須聲明在app.js中，而且一個小程序只允許出現一次App函數。關於微信小程序的更多概念性的東西，這里不做詳細說明，我們這里只談他的具體用法。

先來看下一個簡單的效果圖吧：

一、微信小程序（組件+框架）的應用

這是我的小程序的一個首頁（index）。下面我們先簡單的看下視圖標記：

<!--index.wxml-->
<!--自定義列表組-->
<view class="container">
<view class="list-group" style="flex-direction:column;">
    <view class="list-group-item" wx:for="{{classify}}" data-id="{{item.id}}" bindtap="bindViewTap">
       <image src="{{item.imageUrl}}" background-size="cover"></image>
       <text>{{item.name}}</text>
    </view>
   <view class="list-group-item" bindtap="bindViewTap">
       <image src="http://mobile.kaola100.com/images/more.png" background-size="cover"></image>
       <text>更多考試</text>
    </view>
  </view>
<view class="navigator">
<navigator url="../index/index">首頁</navigator>
<navigator url="../account/account" class="btn-danger" style="border-left:none;border-right:none;">登錄</navigator>
<navigator url="../sample/sample">幫助</navigator>
</view>
</view>

里面用了幾個嵌套的view容器，在微信小程序中，我認為view標記就類似於HTML標簽中的div。看着很簡單吧。最下面，我用了導航標簽（navigator ）。在index.wxss文件中，進行樣式的定義。

接下來，在index.js進行Page對象的注冊。代碼如下：

//index.js
//獲取應用實例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    classify:[{id:2,name:"建築工程",imageUrl:"http://static.kaola100.com/upload/admin/2015-07-20/20150720170910697.png"},
              {id:3,name:"醫葯衛生",imageUrl:"http://static.kaola100.com/upload/admin/2015-07-14/20150714113357871.png"},
              {id:4,name:"職業資格",imageUrl:"http://static.kaola100.com/upload/admin/20150521184649758.png"},
              {id:6,name:"外語",imageUrl:"http://static.kaola100.com/upload/admin/20150521184732112.png"},
              {id:1,name:"學歷教育",imageUrl:"http://static.kaola100.com/upload/admin/20150521183838915.png"}]
  },
  //事件處理函數
  bindViewTap: function(r) {
    wx.navigateTo({url: '../classify/classify?id='+r.currentTarget.dataset.id})
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //調用應用實例的方法獲取全局數據
    var data={};
    app.getUserInfo(function(userInfo){
      //更新數據
      data={userInfo:userInfo};
      that.setData(data);
    });
  },
      onShareAppMessage: function () {
    return {
      title: '自定義分享標題',
      desc: '自定義分享描述',
      path: '/index/index'
    }
  }
})

 

其中,getApp()是全局函數，用於獲取當前應用程序實例。通過app實例，可以獲取項目下，app.js中定義的成員。index.js中的Page函數進行頁面注冊。其中，data屬性，主要用於視圖頁面的數據綁定，從上面代碼中可以看到，我在data對象中，定了classify的數組成員，這些語法，和js語法基本一致。在這里定義好數據之后，我們就可以看到，上面的效果。這里說下，綁定列表：

    <view class="list-group-item" wx:for="{{classify}}" data-id="{{item.id}}" bindtap="bindViewTap">
       <image src="{{item.imageUrl}}" background-size="cover"></image>
       <text>{{item.name}}</text>
    </view>

 

wx:for="{{這里直接寫data屬性中定義的成員}}"，它的綁定語法是用兩個大括號包裹。{{item.iamgeUlr}}這是綁定數組中的一項，變量item是默認，要想獲取索引默認變量名index，這兩個變量都是可以自己定義的。更加詳細的介紹：https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/list.html

這樣，就把我們在index.js文件中Page方法注冊的對象，輕松拿到。個人覺得，Page方法就類似於MVC中的Controller,data屬性，就類似於MVC中的視圖模型(ViewModel)。於是得到以下關系：

微信小程序	MVC模式
wxml文件	視圖
Page	Controller
data屬性	視圖模型（ViewModel）

不妨，我們在看一看，下面的例子：

這里我簡單的做了一個登錄頁面：

這是一個簡單表單的應用，視圖代碼如下：

<!--pages/acccount/account.wxml-->
<view class="form-group">
<form>
<view><input type="text" auto-focus placeholder="請輸入登錄名" /></view>
<view><input type="text" auto-focus placeholder="請輸入登錄密碼" /></view>
<button bindtap="login" class="btn-login">立即登錄</button>
</form>
</view>
<view class="navigator">
<navigator url="../index/index">首頁</navigator>
<navigator url="../account/account" class="btn-danger" style="border-left:none;border-right:none;">注冊</navigator>
<navigator url="../logs/logs">幫助</navigator>
</view>

 

當我點擊登錄時，做了一次跳轉：

這是通過調用微信小程序的API，來呈現當前用戶信息。

//user.js
//獲取應用實例
var app = getApp()
Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件處理函數
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //調用應用實例的方法獲取全局數據
    app.getUserInfo(function(userInfo){
      //更新數據
      that.setData({userInfo:userInfo})
    })
  }
})

 

這也是，微信官方自帶演示小程序的寫法，它調用了app對象的getUserInfo方法，來獲取當前用戶信息。

getUserInfo中在app.js中事先定義：

//app.js
App({
  onLaunch: function () {
    //調用API從本地緩存中獲取數據
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
    var that = this
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      //調用登錄接口
      wx.login({
        success: function () {
          wx.getUserInfo({
            success: function (res) {
              that.globalData.userInfo = res.userInfo
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      })
    }
  },
  globalData:{
    userInfo:null
  }
})

 

二、微信小程序（API的應用）

經過以上的代碼示例，想必對微信小程序的框架結構有一個初步的認識。接下來，我們進行下一個進階：

獲取遠程服務器數據。

在此之前，我們必須先在微信小程序的平台上，設置下域名：

注意：微信小程序，不支持普通的HTTP協議，必須通過HTTPS協議。

於是，我在本地搭建了一個api服務，采用HTTPS協議，通過修改HOST文件，來映射本機訪問。這里我以

https://api.xxxx.com為例：

微信小程序是通過全局函數wx.request函數來完成，語法入下：

  wx.request({
    url: 'https://URL',
    data: {},
    method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
    // header: {}, // 設置請求的 header
    success: function(res){
      // success
    },
    fail: function() {
      // fail
    },
    complete: function() {
      // complete
    }
  })

 

相關：https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.html#wxrequestobject

情景是這樣的，通過點擊首頁的圖標，來跳轉至另一個頁面，跳轉的過程，需攜帶參數。

  onLoad:function(options){
    // 頁面初始化 options為頁面跳轉所帶來的參數
    //console.log(options);
    var that=this;
    wx.request({
      url: 'https://api.xxxxxxx.com/api/classify/GetChildrenClsssify?id='+options.id,
      data: {},
      method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
      // header: {}, // 設置請求的 header
      success: function(res){
        // success
         that.setData({courses:res.data.datas});
      },
      fail: function() {
        // fail
      },
      complete: function() {
        // complete
      }
    })
  }

 

我在Page的onLoad事件中，向遠程地址https://api.xxxxxxx.com/api/classify/GetChildrenClsssify發起GET請求，其中，攜帶參數名為id的參數。

在此過程中，總是觸發fail事件，接口響應200，這個錯誤，是由於本地域名映射，導致微信開發者工具，驗證域名不通過造成的，我們只需要通過以下設置：

紅色標注處，選中即可。至此，我們的請求便可順利完成，遠程請求返回成功后，我們通過訪問當前頁的

setData()方法來，設置當前頁面的data屬性。在這里，有些朋友可以注意到了，在we.request函數前，聲明了一個var that=this；的語句，用變量that來接收this對象，這樣是為了wx.request請求成功后，在success回到函數中，調用that.setData(object);方法，來賦值數據。wx.request中，success回調函數中的一個參數res，res.data就是獲取到的數據。這樣一來，頁面加載時，向遠程服務器發起請求，響應成功后，給data賦值，然后，就可以在視圖綁定數據后，進行渲染了。

在這個過程中，你可能想知道，怎樣傳參？

微信小程序的傳參，有點兒像HTTP請求中的傳參方式，?參數名=參數值。我們還是回到首頁，看一下代碼：

    <view class="list-group-item" wx:for="{{classify}}" data-id="{{item.id}}" bindtap="bindViewTap">
       <image src="{{item.imageUrl}}" background-size="cover"></image>
       <text>{{item.name}}</text>
    </view>

 

我在view標記中，自定義了一個名為data-id的屬性，這是自定義屬性，有點兒類似於html5中的data-xxx。這樣定義后，再看我們在index.js中是如何取值的：

  //事件處理函數 bindViewTap: function(r) { wx.navigateTo({url: '../classify/classify?id='+r.currentTarget.dataset.id}) }

bindViewTap是我自定義的函數名，用來綁定視圖view的點擊事件：（bindtap）。奧妙就在於bindViewTap的參數r,通過調試控制台輸出，我們可以清晰的看到r的結構：

 

這是控制台輸出的參數r的結構，這樣我就可以通過參數r來獲取到在index.wxml中給view標簽定義的屬性（data-id）；於是就有了這樣一句代碼：

 wx.navigateTo({url: '../classify/classify?id='+r.currentTarget.dataset.id})

wx.navigateTo是微信小程序提供的跳轉方法。於是，我們從首頁點擊，就看到了入下效果：

這是遠程請求的數據。

再有就是以下接口的應用了，相對簡單的多：

微信小程序API

數據緩存	查看詳細
位置	查看詳細
文件	查看詳細
媒體	查看詳細
網絡	查看詳細
界面	查看詳細
開放接口	查看詳細
設備	查看詳細

 

三、微信小程序（其它）

      以.wxss擴展的文件，為微信小程序的樣式定義，它支持大部分css屬性，那我們就可以像定義css一樣，定義微信小程序的樣式。app.wxss文件是站在全局來定義微信小程序樣式，那我們既可以把公用的一些樣式，定義在這里。每個頁面也都有自己的wxss文件。app.wxss和頁面的wxss文件之間，自然是繼承和重寫的關系了哈。

    目前，微信小程序的大小，不能超過1MB，官方的說法是為了保證微信小程序的體驗。不過，這也沒什么，我們做微信小程序的時候，盡量把資源文件，放在服務器上，比如：圖片、文檔、視頻、背景音樂等。小程序項目中，我們只保留程序必要的代碼文件即可。

簡單的整理了下微信小程序的這些常見問題：

不能直接操作 Page.data

避免在直接對 Page.data 進行賦值修改，請使用 Page.setData 進行操作才能將數據同步到頁面中進行渲染

怎么獲取用戶輸入

<input id="myInput" bindchange="bindChange" />
<checkbox id="myCheckbox" bindchange="bindChange" />

 

var inputContent = {}
Page({
  data: {
    inputContent: {}
  },
  bindChange: function(e) {
    inputContent[e.currentTarget.id] = e.detail.value
  }
})

 

為什么腳本內不能使用window等對象

頁面的腳本邏輯是在JsCore中運行，JsCore是一個沒有窗口對象的環境，所以不能在腳本中使用window，也無法在腳本中操作組件

本地資源無法通過 css 獲取

background-image：可以使用網絡圖片，或者 base64，或者使用<image/>標簽

目前好像不支持HTML內容。<text>標簽會把Html標簽顯示出來，不會進行渲染，目前還沒發現有類似於webview這樣的東東。

  關於微信小程序的研究，今天就到這里，最后預祝大家元宵節快樂！