摘要：最近微信小程序異?；鸨芏嗳嗽趯W習，下面帶著大家搭建下微信小程序的調試環(huán)境，并調試入門練手項目通訊錄和基礎即可微信推薦使用的語言，去菜鳥教程簡單學習下，，，即可，方便大家學習。

項目源碼：https://github.com/saucxs/wx_...
微信小程序自從2017年，被各種看好，不過一段時間過去了還是反響平平，下半年隨著各項功能的開放，很多企業(yè)陸續(xù)接入了小程序，我覺得就算是坑，咱們也得踩踩。不然怎么從微信這個大流量體系中推廣引流。

小程序內部可以理解成一個mvvm的框架，分為邏輯層和視圖層，邏輯層將數(shù)據(jù)進行處理后發(fā)送給視圖層，同時接受視圖層的事件反饋。

最近微信小程序異?；鸨?，很多人在學習，下面帶著大家搭建下微信小程序的調試環(huán)境（client+server），并調試入門練手項目--通訊錄（phoneBook）（JavaScript和node.js基礎即可,微信推薦使用的語言，去菜鳥教程簡單學習下 JavaScript，node.js，mysql，nginx即可），方便大家學習。

官方解釋：微信小程序是一種全新的連接用戶與服務的方式，它可以在微信內被便捷地獲取和傳播，同時具有出色的使用體驗。

小程序是一種不需要下載安裝即可使用的應用，它實現(xiàn)了應用“觸手可及”的夢想，用戶掃一掃或者搜一下即可打開應用?？梢岳斫獬梢惶浊短自谖⑿爬锩娴腶pp，和原生app不同的是不需要下載，屬于小而輕的應用。

可以參考快速新建簡單的koa2后端服務 這篇文章，教會你快遞建立簡單的koa后端服務。

（1）注冊賬號

（2）下載開發(fā)者工具, 下載1.02.x這個版本的，最新版的有bug，編譯的時候調試器Wxml窗口會出現(xiàn)空的page標簽，里面沒有內容。

（3）注冊好后登錄下微信公眾平臺|小程序，在設置里找到開發(fā)設置，把appID保存下來，一會開發(fā)的時候需要用到

1、此時，工具有了，ID有了，接下來開始我們的擼碼之旅。打開開發(fā)者工具，掃碼登錄后選擇小程序項目，點擊右下角的加號，創(chuàng)建新項目，選擇項目目錄，填寫appID，項目名稱，寫好后點擊確定。

2、確定以后，默認打開后，發(fā)現(xiàn)給我們創(chuàng)建了一些代碼。

3、設置不校驗合法域名

這個設置是本地開發(fā)換環(huán)境下，進行開發(fā)調試的，必須勾上。

4、運行起來了

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

1、app.js做為小程序的入口，里面有個App實例，每個小程序只會有一個App實例，小程序啟動以后觸發(fā)onLaunch函數(shù)執(zhí)行，獲取用戶信息

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

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

4、wxml就是我們的HTML文件，常用標簽為 view 、text 等，沒有所謂的div、span、p一類的標簽了，我們習慣稱它們?yōu)榻M件

分為邏輯層和視圖層，邏輯層將數(shù)據(jù)進行處理后發(fā)送給視圖層，同時接受視圖層的事件反饋。

// pages/login/login.js
const app = getApp();
Page({

  /**
   * 頁面的初始數(shù)據(jù)
   */
  data: {
    phone: "",
    password: "",
    isError: false,
    errorText: ""
  },

  /**
   * 生命周期函數(shù)--監(jiān)聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 輸入手機號
   */
  bindPhoneInput: function(item){
    this.setData({
      phone: item.detail.value
    })
  },
  
    /**
   * 輸入密碼
   */
  bindPasswordInput: function (item) {
    this.setData({
      password: item.detail.value
    })
  },


  /**
 * 點擊登錄按鈕
 */
  login: function (item) {
    if(this.data.phone === "" || this.data.password === ""){
      this.setData({
        isError: true,
        errorText: "手機號碼或密碼不能為空"
      })
      return;
    }
    let that = this;
    wx.request({
      url: `${app.globalData.apiUrl}/login`,
      data: {
        phone: this.data.phone,
        password: this.data.password
      },
      method: "POST",
      success: function(res){
        if(res.data.success){
          wx.setStorageSync("USERID", res.data.userID);
          wx.switchTab({
            url: "/pages/department/department",
          });
        }else{
          that.setData({
            isError: true,
            errorText: "請輸入正確的手機號碼或密碼"
          })
        }
      },
      fail: function(item){
        console.log(item)
      },
      complete: function(item){
        console.log(item)
      }
    })
  },

使用Page函數(shù)來注冊一個頁面，接收一個Object參數(shù)。

這里我們使用了onLoad來監(jiān)聽頁面的加載，

定義了一個輸入手機號bindPhoneInput函數(shù) ，并使用setData函數(shù)將text的值進行更改，

定義一個輸入密碼bindPasswordInput函數(shù)，并使用setData函數(shù)將text的值進行更改，

定義一個登陸按鈕login函數(shù)，通過wx.request方法請求后端服務接口，通過wx.setStorageSync方法將請求的結果加入到storage中，通過wx.switchTab方法跳轉到相應的路由。

  
    系統(tǒng)
    

      
        
      
      
        
      
      {{errorText}}
    
    
      立即登錄
    
  

更改data數(shù)據(jù)的時候必須調用setData函數(shù)進行更改，我們在button組件上添加了點擊事件，調用了login函數(shù)。

相應的事件可以參考官方文檔：https://developers.weixin.qq....

有時候我們需要觸發(fā)事件的時候，傳遞一些參數(shù)，那小程序怎么傳遞呢？很不幸，小程序不能類似js里面直接傳遞，往往我們需要將傳遞的數(shù)據(jù)綁定到事件元素上。

// index.wxml
點擊我
使用e.currentTarget.dataset來獲取值
// index.js
change(e){
  e.currentTarget.dataset.test  // 哈哈
}

小程序里面所有的頁面路由由框架進行管理

我們可以使用getCurrnetPages函數(shù)獲取當前頁面棧的實例，返回一個數(shù)組, 最后一個元素為當前頁面

小程序定義了五個用于導航跳轉的API，這里列舉兩個常用的

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

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

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

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

通過上面的API跳轉帶的參數(shù)，在頁面上我們需要怎么獲取呢？

// text.js
Page({
  data:{
     ... // 頁面數(shù)據(jù)
  },
  onLoad(options){
    console.log(options.text)  // saucxs 獲取上個頁面帶過來的值
  }
})

如果你使用過vue、angular框架，對|管道符肯定不陌生，它用來對我們的數(shù)據(jù)進行轉換，那小程序里面有沒有過濾器呢，不過這個是真沒有。

但是目前有兩種方法，可以實現(xiàn)過濾。

1、獲取數(shù)據(jù)的時候，直接改了，干脆利落、好不優(yōu)雅。

2、使用最后我們要介紹的wxs

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

wxs不能使用es6語法，接下來我們來實現(xiàn)一個使用wxs實現(xiàn)一個簡單的過濾器。

1、首先我們創(chuàng)建filter.wxs文件并寫入以下內容

// filter.wxs
var Filter = {
  getSatusStr: function(num){
    var str = "";
    switch (num) {
      case 0:
        string = "待支付"
        break;
      case 1:
        string = "已支付"
        break;
      default:
        string = "待發(fā)貨"
        break;
    }
    return str
  }
}
module.exports = {
  status: Filter.getSatusStr
}

同級下index.wxml使用

 

  {{filter.status(item.status)}}  

總結：

1、每個wxs標簽都有一個module 屬性

2、wxs可以寫在wxml里面的wxs標簽里和.wxs文件里

3、wxs文件中引入其他wxs文件時候，可以使用require函數(shù)，接受相對路徑

4、在wxml標簽里使用外部wxs文件的時候，src屬性是相對路徑。

微信小程序搭建環(huán)境必需的兩點：云服務器，域名，下面給搭建演示如果在一臺阿里云服務器上搭建微信小程序服務端環(huán)境。

可以參考這篇阿里云免費購買SSL證書，nginx無縫升級https：
https://www.mwcxs.top/page/43...

參考主要是申請和解析域名，以及將nginx的http跳轉到https。

1、修改mysql配置

const pool = mysql.createPool({
  host: "xx.xx.xx.xx",
  port: "3306",
  user: "root",
  password: "xxxxxxxxx",
  database: "wx_contactsadmin",
  connectionLimit: 100
})

host使用你的服務器外網(wǎng)IP，user數(shù)據(jù)庫用戶名，密碼，以及數(shù)據(jù)庫名稱。

2、修改請求后端的url

在app.js

globalData: {
    userInfo: null,
    // apiUrl: "http://localhost:8000/contact"
    apiUrl: "https://phonebook.mwcxs.top/contact"
  }

3、使用pm2管理koa的服務

4、本地修改設置不校驗合法域名
去掉不校驗合法域名的勾選