微信小程式是一個介於原生app和H5之間的一個東東。如果用過cordova,Hbuiler,appCan之類的開發(fā)過混合式app,那麼微信小程式可能與此方式更為接近。不過微信小程式是依賴微信開發(fā)平臺的，甚至連IDE都是專用的，做出來的成品，也只能在微信中透過搜尋或掃碼找到入口，然後進行存取。這幾天一直在嘗試用微信小程式來改寫原來的H5專案。有一些小小的心得，怕過久了會忘記，於是就寫下來，當作一個備忘隸，也給正好給想要學習微信小程序的同學分享一下。

微信小程式是國產(chǎn)的，不用擔心文件看不懂，也不用擔心網(wǎng)路被牆，這點很方便。官方的起步教學寫的很簡單，直接給連結(jié)?。 如果你之前沒有接觸過微信小程序，那麼可以跟著我的步驟一起來。

首先是下載開發(fā)工具，磨刀不會誤砍材工。點此下載? 這是一個針對微信小程式開發(fā)的IDE工具，集預覽，打包發(fā)布，調(diào)試#，語法提示於一身，僅管如此，我還是不太習慣，我習慣是在sublime中進行程式碼的編輯，只是用它來進行程式碼的調(diào)試。

安裝挺簡單，就不多說了。雙擊打開它，如果提示要掃碼登陸，則通過微信掃一掃進行授權(quán)，然後就可以進行下面的操作了。

我現(xiàn)在只想體驗一下，點擊 `無APP` ， 項目名稱自己根據(jù)實際需要真寫，目錄選一個空目錄就好了。點選新增項目，完成效果如下：

點擊編輯，左邊是目錄結(jié)構(gòu)，中間是預覽效果，右邊是控制臺。

?

如果鉤選了就會產(chǎn)生範例程式碼，則目錄下面有三個app開頭的檔案及pages,utils兩個目錄，關於整個目錄結(jié)構(gòu)，請參考官方關於框架介紹部分，以下是需要搞明白的一些知識點：

.js是小程式的腳本程式碼，.wxss是樣式，.json是配置資訊。每新增一個頁面，就要在app.json的page項目進行新增一筆配置。如增加一個「關於我們」：

"pages":[
    "pages/index/index",
    "pages/logs/logs",
   "pages/about/about" //添加關于我們
  ],

?保存之後，自動會產(chǎn)生必要的檔案和目錄，接下來，就是根據(jù)自己的業(yè)務進行相應的修改。注意，在微信小程式中，不能再用jQuery/zetpo這類工具了。因為微信小程式中沒有window

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

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

微信小程式的頁面部分，是以.wxml結(jié)尾的，當成.html就好，只是它的語法，是類似xml結(jié)構(gòu)的，標籤要自閉合，如視圖容器組件，滑塊組件，圖標組件，如果用過React，那麼就會有似曾相識的感覺。 view的用法：

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

元件的用法很簡單，<開始標籤>中間內(nèi)容區(qū) ，元件要成對使用，如果是單一標籤就用自閉合的形式。元件透過加入屬性來修飾，如class,id,data-*等，這和html標籤用法一致，所有元件名稱和屬性名稱都是小寫，中間可用「-」連接。 （在React中的class要寫成className，元件首字母大寫，這裡沒有這個限制),

圖片元件的用法範例：

?

其中的src是變數(shù)，以{{變數(shù)名稱的形式邦定}}。如果app中的資料進行了變化，view中會自動更新。

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

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

?1. 用標籤代替樣式。

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

邦定事件，如點擊事件：

bindtap是固定寫法就相當于onclick，bindViewTap就是事件要做的事情。相當于onclick=bindViewTap，不過和直接在html中的on綁定又有點區(qū)別，這里用的bindtap是虛擬邦定，最終都是通過事件代理進行實際派發(fā)，所以event對象也是一個二次封裝的對象。這一點和React中的事件邦定用法是同樣的套路。

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

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

更多參考信息

變量循環(huán)：wx:for

頁面中使用 block 控制標簽來組織代碼，在 block上使用 wx:for 綁定 循環(huán)數(shù)據(jù)，并將 循環(huán)體數(shù)據(jù)循環(huán)展開節(jié)點

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

頁面跳轉(zhuǎn)：wx.navigateTo

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

插件API:

依靠插件，微信小程序可以使用原生APP才有的功能，具體內(nèi)容查看官方插件列表。下面以調(diào)用攝像頭和相冊為例，介紹插件的用法：

wx.chooseImage

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

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

然后在about.js中添加事件函數(shù)

// 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 ，可以上傳，通過手機在微信中進行查看。

其它：

微信小程序中有許多與傳統(tǒng)開發(fā)方式不一樣的地方，需要多留意官方的F&Q ,避免趟一些不必要的坑。

以上是推薦給初次接觸微信開發(fā)的人的詳細內(nèi)容。更多資訊請關注PHP中文網(wǎng)其他相關文章！