微信小程序開發初體驗

微信小程序是一個介於原生app和H5之間的一個東東。若是用過cordova,Hbuiler,appCan之類的開發過混合式app,那麼微信小程序可能與這種方式更爲接近。不過微信小程序是依賴微信開發平臺的，甚至連IDE都是專用的，作出來的成品，也只能在微信中經過搜索或掃碼找到入口，而後進行訪問。這些天一直在嘗試用微信小程序來改寫原來的H5項目。有一些小小的心得，怕太久了會忘記，因而就寫下來，看成一個備忘隸，也給正好給想要學習微信小程序的同窗分享一下。

微信小程序是國產的，不用擔憂文檔看不懂，也不用擔憂網絡被牆，這一點很方便。官方的起步教程寫的很簡單，直接給連接 。 若是你以前沒有接觸過微信小程序，那麼能夠跟着個人步驟一塊兒來。

首先是下載開發工具，磨刀不誤砍材工。點此下載  這是一個針對微信小程序開發的IDE工具，集預覽，打包發佈，調試，語法提示於一身，僅管如此，我仍是不太習慣，我習慣是在sublime中進行代碼的編輯，只是用它進行代碼的調試。

安裝挺簡單，就很少說了。雙擊打開它，若是提示要掃碼登錄，則經過微信掃一掃進行受權，而後就能夠進行下面的操做了。

我如今只想體驗一下，點擊 `無APP` ， 項目名稱本身根據實際須要真寫，目錄選一個空目錄就行了。點擊添加項目，完成效果以下：

點擊編輯，左側是目錄結構，中間是預覽效果，右則是控制檯。

 

若是鉤選了就會生成示例代碼，則目錄下面有三個app開頭的文件及pages,utils兩個目錄，關於整個目錄結構，請參考官方關於框架介紹部分，下面是須要搞明白的一些知識點：

.js是小程序的腳本代碼，.wxss是樣式，.json是配置信息。每新增一個頁面，就要在app.json的page項中進行新增一條配置。如增長一個「關於咱們」：

"pages":[
    "pages/index/index",
    "pages/logs/logs",
   "pages/about/about" //添加關於咱們
  ],

　

 保存以後，自動會生成必要的文件和目錄，接下來，就是根據本身的業務進行相應的修改。注意，在微信小程序中，不能再用jQuery/zetpo這類工具了。由於微信小程序中沒有window

對於本身建立的頁面，都以Page({})開始，若是用過Vue的話，就想象成new Vue({}) 的調用方式。微信小程序的語法和思想和Vue像極了,說不定是參考它的方式也是可能的。

 

Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  onLoad: function () {
     //初始化
  }
})

　　

微信小程序的頁面部分，是以.wxml結尾的，當成.html就好，只是它的語法，是相似於xml結構的，標籤要自閉合，如<input />。小程序中，把有着固定用法的標籤，叫做組件，如<view>視圖容器組件，<swiper>滑塊組件，<icon>圖標組件，若是用過React，那麼就會有似曾相識的感受。view的用法：

<view class="usermotto">
    <text class="user-motto">{{motto}}</text>
</view>

組件的用法很簡單，<開始標籤>中間內容區</結束標籤> ，組件要成對使用，若是是單標籤就用自閉合的形式。組件經過添加屬性來修飾，如class,id,data-*等，這和html標籤用法一致，全部組件名和屬性名都是小寫，中間可用「-」鏈接。（在React中的class要寫成className，組件首字母大寫，這裏沒有這個限制),

圖片組件的用法示例：

 <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

其中的src是變量，用{{變量名的形式邦定}}。若是app中的數據進行了變化，view中會自動更新。

對於在樣式中使用本地圖片，要當心坑哦：

對於樣式中的圖片地址，如:background-image:url('../images/logo.png') 這樣子是不行滴，打包以後，看不到圖片，解決辦法有兩種：

 1. 用<image>標籤代替樣式。

 2. 用絕對路徑。如:http://img.server.com/logo.png

邦定事件，如點擊事件：

<view  bindtap="bindViewTap" class="userinfo">

bindtap是固定寫法就至關於onclick，bindViewTap就是事件要作的事情。至關於onclick=bindViewTap，不過和直接在html中的on綁定又有點區別，這裏用的bindtap是虛擬邦定，最終都是經過事件代理進行實際派發，因此event對象也是一個二次封裝的對象。這一點和React中的事件邦定用法是一樣的套路。

在view上邦定好事件類型和方法名以後，要在頁面（好比index)中添加相應的事件函數。好比：

Page({
  data: {
    motto: 'Hello World',
    userInfo: {}
  },
  //事件處理函數
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  }

更多參考信息

變量循環：wx:for

頁面中使用 block 控制標籤來組織代碼，在 block上使用 wx:for 綁定 循環數據，並將 循環體數據循環展開節點

<block wx:for="{{數組變量}}">
   {{item}} //item數組成員
</block>

　　

頁面跳轉：wx.navigateTo 

wx.navigateTo({
      url: '../about/about'
 })

插件API:

依靠插件，微信小程序可使用原生APP纔有的功能，具體內容查看官方插件列表。下面以調用攝像頭和相冊爲例，介紹插件的用法：

wx.chooseImage

首頁在頁面中綁定一個點擊事件：

<!--pages/about/about.wxml-->
<view>
    <text>pages/about/about.wxml</text>
    <icon type="success" bindtap="bindEvent"></icon>
</view>

而後在about.js中添加事件函數

// pages/about/about.js
Page({
  data:{},
  //....省略無關代碼
  bindEvent:function(e){
    wx.chooseImage({
      count: 1, // 默認9
      sizeType: ['original', 'compressed'], // 能夠指定是原圖仍是壓縮圖，默認兩者都有
      sourceType: ['album', 'camera'], // 能夠指定來源是相冊仍是相機，默認兩者都有
      success: function (res) {
        // 返回選定照片的本地文件路徑列表，tempFilePath能夠做爲img標籤的src屬性顯示圖片
        var tempFilePaths = res.tempFilePaths
      }
    })
  }
})

　　

預覽：

點擊IDE工具的左邊，「項目」 ，若是有AppID ，能夠上傳，經過手機在微信中進行查看。

其它：

微信小程序中有許多與傳統開發方式不同的地方，須要多留意官方的F&Q ,避免趟一些沒必要要的坑。