這幾天圈子裡到處都在傳播著這樣一個東西，微信公眾平臺提供了一種新的開放能力，開發者可以快速開發一個小程式，取名曰：微信公眾平臺-小程式
       據說取代移動開發安卓和蘋果，那這個東東究竟是幹嗎用的？但很多人覺得是網頁版應用。

有的人很雞凍，但是……最後文章會提及具體的許可權開放問題，所以，還是保持一顆冷靜的❤比較好。

那我們先來看看元件和API開放了哪些服務：

檢視容器：檢視(View)、滾動檢視、Swiper

基礎內容：圖示、文字、進度條

表單元件：按鈕、表單等等

操作反饋

導航

媒體組建：音訊、圖片、視訊。

地圖

畫布

檔案操作能力

網路：上傳下載能力、WebSocket

資料：資料快取能力

位置：獲取位置、檢視位置

裝置：網路狀態、系統資訊、重力感應、羅盤

介面：設定導航條、導航、動畫、繪圖等等

開放介面：登入，包括簽名加密，使用者資訊、微信支付、模板訊息

不過還沒看到具體的文件，目前只能瞭解到這些。

題外：其實可以理解為微信版的AppStore， 個人感覺小應用的技術是從 js-SDK 而來，有的人調侃是和APPSTORE結了仇。

提及：估計很多人已經看了Vux，但Vux並非微信應用號小程式的專案，但其實是WeUI的UI庫。

微信小程式 —— 簡易教程

1. 獲取微信小程式的AppID

  首先，我們需要擁有一個帳號，如果你能看到該文件，我們應當已經邀請併為你建立好一個帳號。注意不可直接使用服務號或訂閱號的AppID。 利用提供的帳號，登入

  如果沒看懂的可以參考：微信接入指南。

注意：如果我們不是用註冊時繫結的管理員微訊號，在手機上體驗該小程式。那麼我們還需要操作“繫結開發者”。即在“使用者身份”-“開發者”模組，繫結上需要體驗該小程式的微訊號。本教程預設註冊帳號、體驗都是使用管理員微訊號。

2. 建立專案

​ 我們需要通過開發者工具，來完成小程式建立和程式碼編輯。

​ 開發者工具安裝完成後，開啟並使用微信掃碼登入。選擇建立“專案”，填入上文獲取到的AppID，設定一個本地專案的名稱（非小程式名稱），比如“我的第一個專案”，並選擇一個本地的資料夾作為程式碼儲存的目錄，點選“新建專案”就可以了。

​ 為方便初學者瞭解微信小程式的基本程式碼結構，在建立過程中，如果選擇的本地資料夾是個空資料夾，開發者工具會提示，是否需要建立一個quick start專案。選擇“是”，開發者工具會幫助我們在開發目錄裡生成一個簡單的demo。

​ 專案建立成功後，我們就可以點選該專案，進入並看到完整的開發者工具介面，點選左側導航，在“編輯”裡可以檢視和編輯我們的程式碼，在“除錯”裡可以測試程式碼並模擬小程式在微信客戶端效果，在“專案”裡可以傳送到手機裡預覽實際效果。

3. 編寫程式碼

建立小程式例項

​ 點選開發者工具左側導航的“編輯”，我們可以看到這個專案，已經初始化幷包含了一些簡單的程式碼檔案。最關鍵也是必不可少的，是app.js、app.json、app.wxss這三個。其中，.js字尾的是指令碼檔案，.json字尾的檔案是配置檔案，.wxss字尾的是樣式表文件。微信小程式會讀取這些檔案，並生成小程式例項。

​ 下面我們簡單瞭解這三個檔案的功能，方便修改以及從頭開發自己的微信小程式。

​ app.js是小程式的指令碼程式碼。我們可以在這個檔案中監聽並處理小程式的生命週期函式、宣告全域性變數。呼叫MINA提供的豐富的API，如本例的同步儲存及同步讀取本地資料。想了解更多可用API，可參考API文件

//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
  }
})

​ app.json是對整個小程式的全域性配置。我們可以在這個檔案中配置小程式是由哪些頁面組成，配置小程式的視窗背景色，配置導航條樣式，配置預設標題。注意該檔案不可新增任何註釋。更多可配置項可參考配置詳解

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

​ app.wxss是整個小程式的公共樣式表。我們可以在頁面元件的class屬性上直接使用app.wxss中宣告的樣式規則。

/**app.wxss**/
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 200rpx 0;
  box-sizing: border-box;
}

建立頁面

​ 在這個教程裡，我們有兩個頁面，index頁面和logs頁面，即歡迎頁和小程式啟動日誌的展示頁，他們都在pages目錄下。微信小程式中的每一個頁面的【路徑+頁面名】都需要寫在app.json的pages中，且pages中的第一個頁面是小程式的首頁。

​ 每一個小程式頁面是由同路徑下同名的四個不同字尾檔案的組成，如：index.js、index.wxml、index.wxss、index.json。.js字尾的檔案是指令碼檔案，.json字尾的檔案是配置檔案，.wxss字尾的是樣式表文件，.wxml字尾的檔案是頁面結構檔案。

​ index.wxml是頁面的結構檔案：

<!--index.wxml-->
<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>
</view>

​ index.js是頁面的指令碼檔案，在這個檔案中我們可以監聽並處理頁面的生命週期函式、獲取小程式例項，宣告並處理資料，響應頁面互動事件等。

//index.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
      })
    })
  }
})

​ index.wxss是頁面的樣式表：

/**index.wxss**/
.userinfo {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  margin: 20rpx;
  border-radius: 50%;
}

.userinfo-nickname {
  color: #aaa;
}

.usermotto {
  margin-top: 200px;
}

​ 頁面的樣式表是非必要的。當有頁面樣式表時，頁面的樣式表中的樣式規則會層疊覆蓋app.wxss中的樣式規則。如果不指定頁面的樣式表，也可以在頁面的結構檔案中直接使用app.wxss中指定的樣式規則。

​ index.json是頁面的配置檔案：

​ 頁面的配置檔案是非必要的。當有頁面的配置檔案時，配置項在該頁面會覆蓋app.json的window中相同的配置項。如果沒有指定的頁面配置檔案，則在該頁面直接使用app.json中的預設配置。

​ logs的頁面結構

<!--logs.wxml-->
<view class="container log-list">
  <block wx:for-items="{{logs}}" wx:for-item="log">
    <text class="log-item">{{index + 1}}. {{log}}</text>
  </block>
</view>

​ logs頁面使用<block/>控制標籤來組織程式碼，在 <block/>上使用wx:for-items繫結logs資料，並將logs資料迴圈展開節點

//logs.js
var util = require('../../utils/util.js')
Page({
  data: {
    logs: []
  },
  onLoad: function () {
    this.setData({
      logs: (wx.getStorageSync('logs') || []).map(function (log) {
        return util.formatTime(new Date(log))
      })
    })
  }
})

執行結果如下：

4. 手機預覽

​ 開發者工具左側選單欄選擇"專案"，點選"預覽"，掃碼後即可在微信客戶端中體驗。

微信小程式——為何如此？

  那麼大家都在擔心一個優缺點，那這裡引用網上的一張圖作為解釋，如下圖：

其次，雖然說已經有相關的加密，但是對資料安全度很高的不應該接入，微信只是讀取了介面，不會直接讓服務者提交相關資料，快取的資料也沒有相關的保障，所以使用也需要看它的產品是否適合。 

如果你打算接入微信小程式的話，可以先試著瞭解下基本架構和邏輯關係。

使用者會頻繁和微信互動，微信也會頻繁與OS互動，當然微信也通過API的方式來獲取第三方的資料，並且通過服務元件、開發工具和互動框架來定義小程式的互動樣式、展現方式和擴充套件功能。可以參考文章前面提及到的VUX。

有兩個方向，小程式會極大降低開發的難度。

1. 元件與前端控制元件：根據目前透露的情況來看，微信小程式提供了基礎元件、前段原生控制元件和API，目的是讓一個雲端的H5產品具有原生應用的元件和擴充套件能力。這些元件，之前是由第三方來提供的框架，這次小程式，把更多的許可權也開放出來了，來幫助開發者快速接入小程式，儘量標準化和結構化去處理資料。
2. 互動框架：早在上半年，微信就已經開始公佈了一套UI和互動框架，用來統一UI規範和互動示例。這些UI規範和互動示例早早就準備好，我們有理由相信，你就是一個初級程式設計師，沒有UI、沒有前端，只會寫後臺PHP，也可以通過接入API的方式完成自己的小程式。

許可權問題

• 有人關心的許可權介面問題，大致可以分為三塊： 

1. 只開放公開資訊：暱稱、頭像，其實也就是登陸ID，所有的開發者都可以接入，比如航旅縱橫。
2. 有條件開放：開放共同使用的好友。比如大眾點評。所以基於大眾點評，你可以看到有好友去哪。比如美團外賣，可以看到好友頭條，比如58同城旗下的，能看到好友在賣，但很抱歉，這個關係鏈的開放，目前只有騰訊投資的公司，才能享受如此特權。
3. 基於基本許可權  

• 大概的邏輯是：

• -- 所以，大家先別激動的太早，小程式目前的開放程度還是很低的，離Facebook的全能力開放還是有差距的

  
  

大程度的開放：除了登陸和好友關係，還開放了朋友圈許可權，能把一些操作直接輸送到朋友圈做動作，這個很抱歉，只有騰訊自有的產品才有，比如，QQ音樂、騰訊視訊等。

對不起，如果你不是親兒子，又不是乾兒子，那就乾坐著吧。