也談微信小程序

  小程序是一種不須要下載安裝便可使用的應用，它實現了應用「觸手可及」的夢想，用戶掃一掃或者搜一下便可打開應用。也體現了「用完即走」的理念，用戶不關心是否安裝太多應用的問題。應用將無處不在，隨時隨地可用，但又無需安裝卸載。----張小龍

  最近一個微信小程序的內測刷爆了網絡,相信你們已經有了體會。這個小程序並不小,可能對移動互聯網的將來打開了一個新的方向,我想這也是不少猿們關心的緣由。

1、開始學習

官方文檔:
http://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1474632113_xQVCl&token=&lang=zh_CN

• 安裝開發工具

  文檔寫得比較用心,還有不少事例,這裏給一個贊。接下來就是跟着文檔一步一步建立第一個微信小程序了。
在開發者文檔,打開小程序開發者工具 有windows和mac兩個版本,自行選擇安裝,便可.
而後打開開發者工具,會提示:

,用本身的微信掃一下贊成就好。

• 新建項目

  選擇建立「項目」，填入上文獲取到的 AppID ，設置一個本地項目的名稱（非小程序名稱），好比「個人第一個項目」，並選擇一個本地的文件夾做爲代碼存儲的目錄，點擊「新建項目」就能夠了。

沒有APPIdd點擊「無AppID」便可。

• 編寫代碼

  開發工具很簡潔，以下:

  點擊開發者工具左側導航的「編輯」，咱們能夠看到這個項目，已經初始化幷包含了一些簡單的代碼文件。最關鍵也是必不可少的，是 app.js、app.json、app.wxss 這三個。其中，.js後綴的是腳本文件，.json後綴的文件是配置文件，.wxss後綴的是樣式表文件。微信小程序會讀取這些文件，並生成小程序實例。

  若是瞭解angular我想你會有種似曾類似的感受。

index視圖:

<view class="container">
  <view  bindtap="bindViewTap" class="userinfo">
    <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
    <text class="userinfo-nickname">{{userInfo.nickName}}</text>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
  <button bindtap="uploadClick" type="primary"> 文件上傳 </button>
  <button bindtap="download">文件下載</button>
</view>

index.js

//index.js
//獲取應用實例
var app = getApp()
Page({
  data: {
    motto: 'LuckyHu的第一個微信小程序',
    userInfo: {}
  },
  //事件處理函數
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onLoad: function () {
    console.log('onLoad')
    var that = this
    //調用應用實例的方法獲取全局數據
    app.getUserInfo(function(userInfo){
      //更新數據
      that.setData({
        userInfo:userInfo
      })
    })
  },
  //自定義事件處理函數
  uploadClick:function(){
      //console.log('dfdf');
      var that=this;
      console.log(that);

      wx.chooseImage({
  success: function(res) {
    wx.chooseImage({
  count: 1, // 默認9
  sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
  sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
  success: function (res) {
    console.log(res);
    // 返回選定照片的本地文件路徑列表，tempFilePath能夠做爲img標籤的src屬性顯示圖片
    var tempFilePaths = res.tempFilePaths;
    //更新數據
      that.setData({
        motto:'上傳成功!',
        upImg:tempFilePaths[0]
      })
  }
})
  }
})},
download:function(e){
   console.log('download');
wx.downloadFile({
  url: 'http://example.com/audio/123',
  type: 'audio',
  success: function(res) {
    console.log(res);
    wx.playVoice({
      filePath: res.tempFilePath
    })
  },
  fail:function(res){
    console.log(res);
  }
})
}
})

這個實例，只是測試了文件上傳,也可以有一點體會就是了。

效果以下:

2、結語

  無論微信小程序是否會火起來,對於熱愛程序的人均可以去了解一下和學習一下,畢竟這種「無需安裝」和「用完即走」的思想挺好。