微信小程式初體驗，入門練手專案--通訊錄，後臺是阿里雲伺服器（一）

saucxs發表於2018-11-05
微信小程式阿里伺服器

內容：

一、前言

二、相關概念

三、開始工作

四、啟動專案起來

五、專案結構

六、設計理念

七、路由

八、部署線上後端服務

同步交流學習社群： www.mwcxs.top/page/440

原始碼地址：github.com/saucxs/wx_p…


一、前言（坑爹的玩意）

微信小程式自從2017年，被各種看好，不過一段時間過去了還是反響平平，下半年隨著各項功能的開放，很多企業陸續接入了小程式，我覺得就算是坑，我們們也得踩踩。不然怎麼從微信這個大流量體系中推廣引流。

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

最近微信小程式異常火爆，很多人在學習，下面帶著大家搭建下微信小程式的除錯環境（client+server），並除錯入門練手專案--通訊錄（phoneBook）（JavaScript和node.js基礎即可,微信推薦使用的語言，去菜鳥教程簡單學習下 JavaScript，node.js，mysql，nginx即可），方便大家學習。

二、相關概念

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

小程式是一種不需要下載安裝即可使用的應用，它實現了應用“觸手可及”的夢想，使用者掃一掃或者搜一下即可開啟應用。可以理解成一套巢狀在微信裡面的app，和原生app不同的是不需要下載，屬於小而輕的應用。

三、開始工作

1、本地koa後臺服務部署

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

2、準備註冊等工作

（1）註冊賬號

（2）下載開發者工具, 下載1.02.x這個版本的，最新版的有bug，編譯的時候偵錯程式Wxml視窗會出現空的page標籤，裡面沒有內容。

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

四、啟動專案起來

1、此時，工具有了，ID有了，接下來開始我們的擼碼之旅。

開啟開發者工具，掃碼登入後選擇小程式專案，點選右下角的加號，建立新專案，選擇專案目錄，填寫appID，專案名稱，寫好後點選確定。

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

3、設定不校驗合法域名

這個設定是本地開發換環境下，進行開發除錯的，必須勾上。

4、執行起來了

五、專案結構

我們主要看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一類的標籤了，我們習慣稱它們為元件

六、設計理念

1、小程式可以理解成一個mvvm的框架

分為邏輯層和檢視層，邏輯層將資料進行處理後傳送給檢視層，同時接受檢視層的事件反饋。

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

  /**
   * 頁面的初始資料
   */
  data: {
    phone: '',
    password: '',
    isError: false,
    errorText: ''
  },

  /**
   * 生命週期函式--監聽頁面載入
   */
  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函式來註冊一個頁面，接收一個Object引數。

這裡我們使用了onLoad來監聽頁面的載入，

定義了一個輸入手機號bindPhoneInput函式 ，並使用setData函式將text的值進行更改，

定義一個輸入密碼bindPasswordInput函式，並使用setData函式將text的值進行更改，

定義一個登陸按鈕login函式，通過wx.request方法請求後端服務介面，通過wx.setStorageSync方法將請求的結果加入到storage中，通過wx.switchTab方法跳轉到相應的路由。

<!--pages/login/login.wxml-->
<view class="container">
  <view class="login-container">
    <text class="app-title">系統</text>
    <form class="login-form">
      <view class="section">
        <input name="phone" type="number" bindinput="bindPhoneInput" maxlength="11" placeholder="手機號碼" />
      </view>
      <view class="section">
        <input name="password" bindinput='bindPasswordInput' type="password" password="true" placeholder="密碼" />
      </view>
      <text class="{{ isError ? 'error' : ''}}">{{errorText}}</text>
    </form>
    <view class="section">
      <button bindtap="login">立即登入</button>
    </view>
  </view>
</view>複製程式碼

更改data資料的時候必須呼叫setData函式進行更改，我們在button元件上新增了點選事件，呼叫了login函式。

相應的事件可以參考官方文件：developers.weixin.qq.com/miniprogram…

2、傳遞引數

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

// index.wxml
<button data-test="哈哈"  bindtap="change">點選我</button>
使用e.currentTarget.dataset來獲取值
// index.js
change(e){
  e.currentTarget.dataset.test  // 哈哈
}複製程式碼

七、路由

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

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

小程式定義了五個用於導航跳轉的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跳轉帶的引數，在頁面上我們需要怎麼獲取呢？

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

（一）資料過濾 過濾器

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

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

1、獲取資料的時候，直接改了，乾脆利落、好不優雅。

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

（二）WXS

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

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

1、首先我們建立filter.wxs檔案並寫入以下內容

// filter.wxs
var Filter = {
  getSatusStr: function(num){
    var str = '';
    switch (num) {
      case 0:
        string = '待支付'
        break;
      case 1:
        string = '已支付'
        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 屬性

2、wxs可以寫在wxml裡面的wxs標籤裡和.wxs檔案裡

3、wxs檔案中引入其他wxs檔案時候，可以使用require函式，接受相對路徑

4、在wxml標籤裡使用外部wxs檔案的時候，src屬性是相對路徑。

八、部署線上後端服務

微信小程式搭建環境必需的兩點：雲伺服器，域名，下面給搭建演示如果在一臺阿里雲伺服器上搭建微信小程式服務端環境。

（一）準備好將http轉成https

可以參考這篇阿里雲免費購買SSL證照，nginx無縫升級https：www.mwcxs.top/page/434.ht…

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

（二）線上部署koa後臺服務

1、修改mysql配置

const pool = mysql.createPool({
  host: 'xx.xx.xx.xx',
  port: '3306',
  user: 'root',
  password: 'xxxxxxxxx',
  database: 'wx_contactsadmin',
  connectionLimit: 100
})複製程式碼

host使用你的伺服器外網IP，user資料庫使用者名稱，密碼，以及資料庫名稱。

2、修改請求後端的url

在app.js

globalData: {
    userInfo: null,
    // apiUrl: 'http://localhost:8000/contact'
    apiUrl: 'https://phonebook.mwcxs.top/contact'
  }複製程式碼

3、使用pm2管理koa的服務

4、本地修改設定不校驗合法域名

去掉不校驗合法域名的勾選


相關文章