摘要：最近微信小程序異?；鸨?，很多人在學(xué)習(xí)，下面帶著大家搭建下微信小程序的調(diào)試環(huán)境，并調(diào)試入門練手項(xiàng)目通訊錄和基礎(chǔ)即可微信推薦使用的語言，去菜鳥教程簡單學(xué)習(xí)下，，，即可，方便大家學(xué)習(xí)。

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

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

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

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

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

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

（1）注冊賬號(hào)

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

（3）注冊好后登錄下微信公眾平臺(tái)|小程序，在設(shè)置里找到開發(fā)設(shè)置，把a(bǔ)ppID保存下來，一會(huì)開發(fā)的時(shí)候需要用到

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

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

3、設(shè)置不校驗(yàn)合法域名

這個(gè)設(shè)置是本地開發(fā)換環(huán)境下，進(jìn)行開發(fā)調(diào)試的，必須勾上。

4、運(yùn)行起來了

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

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

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

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

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

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

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

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

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

  },

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


  /**
 * 點(diǎn)擊登錄按鈕
 */
  login: function (item) {
    if(this.data.phone === "" || this.data.password === ""){
      this.setData({
        isError: true,
        errorText: "手機(jī)號(hào)碼或密碼不能為空"
      })
      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: "請輸入正確的手機(jī)號(hào)碼或密碼"
          })
        }
      },
      fail: function(item){
        console.log(item)
      },
      complete: function(item){
        console.log(item)
      }
    })
  },

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

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

定義了一個(gè)輸入手機(jī)號(hào)bindPhoneInput函數(shù) ，并使用setData函數(shù)將text的值進(jìn)行更改，

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

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

  
    系統(tǒng)
    

      
        
      
      
        
      
      {{errorText}}
    
    
      立即登錄
    
  

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

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

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

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

小程序里面所有的頁面路由由框架進(jìn)行管理

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

小程序定義了五個(gè)用于導(dǎo)航跳轉(zhuǎn)的API，這里列舉兩個(gè)常用的

1、wx.navigateTo 保留當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面，使用wx.navigateBack可以返回到原頁面

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

2、wx.redirectTo 關(guān)閉當(dāng)前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁面

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

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

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

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

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

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

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

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

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

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

// 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)}}  

總結(jié)：

1、每個(gè)wxs標(biāo)簽都有一個(gè)module 屬性

2、wxs可以寫在wxml里面的wxs標(biāo)簽里和.wxs文件里

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

4、在wxml標(biāo)簽里使用外部wxs文件的時(shí)候，src屬性是相對路徑。

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

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

參考主要是申請和解析域名，以及將nginx的http跳轉(zhuǎn)到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ù)器外網(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的服務(wù)

4、本地修改設(shè)置不校驗(yàn)合法域名
去掉不校驗(yàn)合法域名的勾選