初探微信小程式

小心夾手發表於2018-02-27
微信小程式

囉裡八嗦

昨天上班第一天，沒錯，是第一天。公司今年放假很足，撒潑的我無（tian）憂（bu）無（zhi）慮（chi）的度過了漫長的十一天，上班了發現自己得了節後綜合症，這病嚴重嗎？嗯，估計得有個禮拜才能痊癒。

所以，放假休閒的程式猿一定要感到深深的罪惡感，為了啥？為了不生病，為了啥？

初探微信小程式

沒出正月，都在年裡，給大家拜個晚年，祝大家晚年幸福。

扯了會，接下來我們們開始正文，說點有用的。

概念

小程式是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，使用者掃一掃或者搜一下即可開啟應用。

可以理解成一套巢狀在微信裡面的app，和原生app不同的是不需要下載，屬於小而輕的應用。

開發前的準備

1、註冊賬號 2、下載開發者工具, 下載1.02.1801081這個版本的，最新版的有bug，編譯的時候偵錯程式Wxml視窗會出現空的page標籤，裡面沒有內容。編輯器內複製也會偶爾失效。

下載版本

3、註冊好後登入下微信公眾平臺，在設定裡找到開發設定，把appID儲存下來，一會開發的時候需要用到

appID

快速開始

1、此時，工具有了，ID有了，接下來開始我們的擼碼之旅。開啟開發者工具，掃碼登入後選擇小程式專案，點選右下角的加號，建立新專案，選擇專案目錄，填寫appID，專案名稱，寫好後點選確定。

小程式管理

填寫資訊

2、確定以後，預設開啟後，發現給我們建立了一些程式碼，程式碼一會我們再講。

目錄.png

頁面是空白的，開啟偵錯程式後發現頁面有報錯，如下

image.png

點選右上角的詳情，修改下配置，把除錯基礎庫改成1.9.1，然後把不校驗安全域名、web-view 域名、TLS 版本以及 HTTPS 證書勾選上，不然我們的請求就必須得是https的了

修改配置

3、此時控制檯沒有報錯了，頁面展示如下，點選按鈕，我們可以看到微信授權，點選允許，我們的頭像和暱稱就顯示在頁面上了

頁面展示.png

使用者資訊展示

專案結構

我們主要看app.js、app.json、app.wxss三個檔案和pages資料夾裡面的wxml

1、app.js做為小程式的入口，裡面有個App例項，每個小程式只會有一個App例項，小程式啟動以後觸發onLaunch函式執行，獲取使用者資訊

2、app.json是小程式的所有全域性配置，pages欄位放置所有頁面的路徑，window欄位定義所有頁面的頂部背景顏色，文字顏色 詳細配置請戳這裡?

3、app.wxss檔案就是頁面公用的樣式，僅支援部分css選擇器

4、wxml就是我們的HTML檔案，常用標籤為 view 、text 等，沒有所謂的div、span、p一類的標籤了，我們習慣稱它們為元件

設計理念

小程式內部可以理解成一個mvvm的框架，分為邏輯層和檢視層，邏輯層將資料進行處理後傳送給檢視層，同時接受檢視層的事件反饋。

// pages/test/index.js
Page({
  data:{  // 頁面的初始資料
      text: 'hello world'
  },
  onLoad(){
    console.log('hello')
  },
  change(){
    this.setData({
    text:'hello'
  })
  }
})
複製程式碼

使用Page函式來註冊一個頁面，接收一個Object引數。 這裡我們使用了onLoad來監聽頁面的載入和定義了一個change函式 並使用setData函式將text的值進行更改

更改data資料的時候必須呼叫setData函式進行更改

// pages/test/index.wxml
<view>{{text}}</view> //  顯示hello world
<button bindtap="change">點選更改上面文字</button> //  顯示hello 
複製程式碼

我們在button元件上新增了點選事件，呼叫了change函式，完整事件請戳?這裡

事件傳遞引數

有時候我們需要觸發事件的時候，傳遞一些引數，那小程式怎麼傳遞呢？很不幸，小程式不能類似js裡面直接傳遞，往往我們需要將傳遞的資料繫結到事件元素上

// index.wxml
<button data-test="哈哈"  bindtap="change">點選我</button>

複製程式碼

使用e.currentTarget.dataset來獲取值

// index.js
change(e){
  e.currentTarget.dataset.test  // 哈哈
}

複製程式碼

setData函式擴充

1、修改巢狀多層的資料， 如果是寫死的引數可以使用引號將引數包起來

this.setData({
    'text.msg': 'hello'
})
複製程式碼

如果是傳遞進來的值呢？很簡單將data的key用[]括起來

// index.wxml
<button bindtap="change" data-key="text.msg">點選我</button>
複製程式碼
// index.js
change(e){
var key = e.currentTarget.dataset.key
  this.setData({
    key: 'hello'     // 資料不會更改
  //  [key]: 'hello' //  資料會更改
  })
}
複製程式碼

路由

小程式裡面所有的頁面路由由框架進行管理

我們可以使用getCurrnetPages函式獲取當前頁面棧的例項，返回一個陣列, 最後一個元素為當前頁面

小程式定義了五個用於導航跳轉的API，這裡列舉兩個常用的，詳細請戳?這裡

1、wx.navigateTo 保留當前頁面，跳轉到應用內的某個頁面，使用wx.navigateBack可以返回到原頁面

wx.navigateTo({url:`/pages/text/index?text=${121212}`})

複製程式碼

2、wx.redirectTo 關閉當前頁面，跳轉到應用內的某個頁面

wx.navigateTo({url:`/pages/text/index?text=${121212}`})
複製程式碼

通過上面的API跳轉帶的引數，在頁面上我們需要怎麼獲取呢？

// text.js
Page({
  data:{
     ... // 頁面資料
  },
  onLoad(options){
    console.log(options.text)  // 121212 獲取上個頁面帶過來的值
  }
})
複製程式碼

資料過濾 過濾器

如果你使用過vue、angular框架，對|管道符肯定不陌生，它用來對我們的資料進行轉換，那小程式裡面有沒有過濾器呢，不過這個是真沒有。

但是目前有兩種方法，可以實現過濾。

1、獲取資料的時候，直接改了，乾脆利落、好不優雅。 2、使用最後我們要介紹的wxs

WXS

WXS是小程式的一套指令碼語言，首先和js是不同的語言，其次執行環境和js也是隔離開的，wxs不能呼叫js檔案中的函式，也不能呼叫小程式的API，它主要用來增強wxml。

wxs不能使用es6語法，人家不是js啦?

接下來我們來實現一個使用wxs實現一個簡單的過濾器 1、首先我們建立filter.wxs檔案並寫入以下內容

// filter.wxs
var Filter = {
  getSatusStr: function(num){
    var str = '';
    switch (num) {
      case 0:
        string = '我是0的狀態'
        break;
      case 1:
        string = '我是1的狀態'
        break;
      default:
        string = '我是預設的狀態'
        break;
    }
    return str
  }
}
module.exports = {
  status: Filter.getSatusStr
}

複製程式碼

同級下index.wxml使用

<wxs module="filter" src="./filter.wxs"></wxs> 
<view wx:for="{{list}}">
  <view>{{filter.status(item.status)}}</view>  
</view>

複製程式碼

總結： 1、每個wxs標籤都有一個module 屬性 1、wxs可以寫在wxml裡面的wxs標籤裡和.wxs檔案裡 2、wxs檔案中引入其他wxs檔案時候，可以使用require函式，接受相對路徑 3、在wxml標籤裡使用外部wxs檔案的時候，src屬性是相對路徑

tip

1、使用sass寫wxss檔案，在目錄下建立index.scss檔案，當前目錄下執行 sass --watch index.scss:index.wxss --style expanded

2、wcss 檔案裡面不能使用本地圖片，請使用base64、網上圖片或者image

3、修改頁面的背景，類似與css中設定body，可以直接設定page

4、不要直接操作this.data,使用this.setData函式，切記、切記

相關文章