微信小程序開發初體驗

上週被 小程序 刷了屏，嚇得我週末趕忙擼了個 小程序 版的 知乎日報 壓壓驚, 總結一下這個開發體驗，和踩過的坑。

先上圖

開發環境準備

小程序 出來次日就被破解，第三天微信就把開發工具開發下載了， 如今只須要下載 微信開發者工具 就可使用了，

建立項目的時候，要選擇無 appid, 這樣就不會有 appid 的驗證了。

目錄結構

• app.js 註冊app邏輯， app.wxss 全局樣式文件 app.json 配置信息

• pages 存放頁面文件

• utils 工具類代碼

• images 圖片資源文件

小程序中每個頁面都會有三個文件 .wxml .wxss .js ，對應着結構、樣式、和邏輯，至關於網頁中的 html css 和 js 的關係。

開發第一個頁面

代碼來自新建項目

<!--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.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;
}

//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 下都會看到這些代碼，接下來分別介紹 wxml wxss js

wxml

這個是頁面結構的描述文件, 主要用於如下內容

• 用標籤形式指定組件使用 <view></view>

• 使用 wx:for wx:if 等指令完成一些模板上的邏輯處理

• 使用 bind* 綁定事件

wxss

樣式文件，和 css 語法基本一致，不過支持的選擇器語法有限 看這裏， 可使用 flexbox 完成佈局。
內部也可使用 import 命令引入外部樣式文件

@import "common.wxss";

.pd {
    padding-left: 5px;
}

js

頁面邏輯控制， 遵循 commonJs 規範

// util.js
function formatTime(date) {
  // ....
}

function formatDate(date, split) {
  // ...
}
module.exports = {
  formatTime: formatTime,
  formatDate: formatDate
}

var utils = require('../../utils/util.js')

這裏的js 並非在 瀏覽器環境下運行， 因此 window.* 這一類的代碼都會報錯， dom 操做也是不被容許的，官方目前好像是不能支持其餘的 js 庫運行，全封閉式，這個之後應該會逐漸完善。

頁面上使用 Page 方法來註冊一個頁面

Page({
  data:{
    // text:"這是一個頁面"
  },
  onLoad:function(options){
    // 頁面初始化 options爲頁面跳轉所帶來的參數
  },
  onReady:function(){
    // 頁面渲染完成
  },
  onShow:function(){
    // 頁面顯示
  },
  onHide:function(){
    // 頁面隱藏
  },
  onUnload:function(){
    // 頁面關閉
  }
})

當咱們須要改變 綁定的數據時，必須調用 setData 方法修改，纔會觸發頁面更新，像這樣：

Page({
    data: {
        text: '這是一個頁面'
    },
    onLoad: function() {
        this.setData({
            text: 'this is page'
        })
    }
})

條件渲染和列表渲染

如下內容來自微信官方文檔。

小程序使用 wx:if="{{condition}}" 完成條件渲染，相似於 vue 的 v-if

<view wx:if="{{condition}}"> True </view>

也能夠用 wx:elif 和 wx:else 來添加一個 else 塊：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

wx:for 控制屬性綁定一個數組，便可使用數組中各項的數據重複渲染該組件。
內置變量 index （數組遍歷的下標）， item （數組遍歷的每一項）

<view wx:for="{{items}}">
  {{index}}: {{item.message}}
</view>

Page({
  items: [{
    message: 'foo',
  },{
    message: 'bar'
  }]
})

使用wx:for-item能夠指定數組當前元素的變量名

使用wx:for-index能夠指定數組當前下標的變量名：

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName.message}}
</view>

事件綁定

wxml 只是用 bind[eventName]="handler" 語法綁定事件

<view  bindtap="bindViewTap" class="userinfo"><text>tap</text></view>

Page({
    bindViewTap: function(e) {
        console.log(e.taget)
    }
})

經過 data-* 和 e.target.dateset 傳遞參數

<view  bindtap="bindViewTap" data-test-msg="啦啦啦啦啦啦" class="userinfo"><text>tap</text></view>

Page({
    bindViewTap: function(e) {
        // 會自動轉成駝峯式命名
        console.log(e.taget.dataset.testMsg) // 啦啦啦啦啦啦
    }
})

目前踩過的坑

事件綁定中 e.target.dataset

當在父組件綁定事件和參數，點擊時又子組件冒泡事件到父組件，這個時候 e.target.dataset 爲空

<view  bindtap="bindViewTap" data-test-msg="啦啦啦啦啦啦" class="userinfo">
    <view><text>tap</text></view>
</view>

Page({
    bindViewTap: function(e) {
        console.log(e.taget.dataset.testMsg) // undefined
    }
})

在線圖片加載不穩定

在知乎日報這個項目上有大量圖片須要從網上下載，這裏 image 組件額顯示顯得極其不穩定，有不少的圖片都顯示不出來.

最後

微信小程序如今還在內測階段，有不少的問題須要完善，不過對於開發速度和體驗來講仍是不錯的，期待正式發佈的那一天。

資源

• 官方文檔

• 開發工具下載

• awesome-wechat-weapp