初探微信小程序

囉裏八嗦

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

因此，放假休閒的程序猿必定要感到深深的罪惡感，爲了啥？爲了避免生病，爲了啥？

沒出正月，都在年裏，給你們拜個晚年，祝你們晚年幸福。

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

概念

小程序是一種不須要下載安裝便可使用的應用，它實現了應用「觸手可及」的夢想，用戶掃一掃或者搜一下便可打開應用。

能夠理解成一套嵌套在微信裏面的app，和原生app不一樣的是不須要下載，屬於小而輕的應用。

開發前的準備

一、註冊帳號 二、下載開發者工具, 下載1.02.1801081這個版本的，最新版的有bug，編譯的時候調試器Wxml窗口會出現空的page標籤，裏面沒有內容。編輯器內複製也會偶爾失效。

三、註冊好後登陸下微信公衆平臺，在設置裏找到開發設置，把appID保存下來，一會開發的時候須要用到

快速開始

一、此時，工具備了，ID有了，接下來開始咱們的擼碼之旅。打開開發者工具，掃碼登陸後選擇小程序項目，點擊右下角的加號，建立新項目，選擇項目目錄，填寫appID，項目名稱，寫好後點擊肯定。

二、肯定之後，默認打開後，發現給咱們建立了一些代碼，代碼一會咱們再講。

頁面是空白的，打開調試器後發現頁面有報錯，以下

點擊右上角的詳情，修改下配置，把調試基礎庫改爲1.9.1，而後把不校驗安全域名、web-view 域名、TLS 版本以及 HTTPS 證書勾選上，否則咱們的請求就必須得是https的了

三、此時控制檯沒有報錯了，頁面展現以下，點擊按鈕，咱們能夠看到微信受權，點擊容許，咱們的頭像和暱稱就顯示在頁面上了

項目結構

咱們主要看app.js、app.json、app.wxss三個文件和pages文件夾裏面的wxml

一、app.js作爲小程序的入口，裏面有個App實例，每一個小程序只會有一個App實例，小程序啓動之後觸發onLaunch函數執行，獲取用戶信息

二、app.json是小程序的全部全局配置，pages字段放置全部頁面的路徑，window字段定義全部頁面的頂部背景顏色，文字顏色 詳細配置請戳這裏👇

三、app.wxss文件就是頁面公用的樣式，僅支持部分css選擇器

四、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函數拓展

一、修改嵌套多層的數據， 若是是寫死的參數可使用引號將參數包起來

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，這裏列舉兩個經常使用的，詳細請戳👇這裏

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

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

複製代碼

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

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

經過上面的API跳轉帶的參數，在頁面上咱們須要怎麼獲取呢？

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

數據過濾 過濾器

若是你使用過vue、angular框架，對|管道符確定不陌生，它用來對咱們的數據進行轉換，那小程序裏面有沒有過濾器呢，不過這個是真沒有。

可是目前有兩種方法，能夠實現過濾。

一、獲取數據的時候，直接改了，乾脆利落、好不優雅。 二、使用最後咱們要介紹的wxs

WXS

WXS是小程序的一套腳本語言，首先和js是不一樣的語言，其次運行環境和js也是隔離開的，wxs不能調用js文件中的函數，也不能調用小程序的API，它主要用來加強wxml。

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

接下來咱們來實現一個使用wxs實現一個簡單的過濾器 一、首先咱們建立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>

複製代碼

總結： 一、每一個wxs標籤都有一個module 屬性 一、wxs能夠寫在wxml裏面的wxs標籤裏和.wxs文件裏 二、wxs文件中引入其餘wxs文件時候，可使用require函數，接受相對路徑 三、在wxml標籤裏使用外部wxs文件的時候，src屬性是相對路徑

tip

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

二、wcss 文件裏面不能使用本地圖片，請使用base6四、網上圖片或者image

三、修改頁面的背景，相似與css中設置body，能夠直接設置page

四、不要直接操做this.data,使用this.setData函數，切記、切記