微信小程序初體驗，入門練手項目--通信錄，後臺是阿里雲服務器（一）

內容：

1、前言

2、相關概念

3、開始工做

4、啓動項目起來

5、項目結構

6、設計理念

7、路由

8、部署線上後端服務

 

同步交流學習社區： https://www.mwcxs.top/page/440

源碼地址：https://github.com/saucxs/wx_phoneBook

上線以後小程序碼：

測試帳號：18966667777，密碼：test

 

 

1、前言（坑爹的玩意）

        微信小程序自從2017年，被各類看好，不過一段時間過去了仍是反響平平，下半年隨着各項功能的開放，不少企業陸續接入了小程序，我以爲就算是坑，我們也得踩踩。否則怎麼從微信這個大流量體系中推廣引流。

    小程序內部能夠理解成一個mvvm的框架，分爲邏輯層和視圖層，邏輯層將數據進行處理後發送給視圖層，同時接受視圖層的事件反饋。

    最近微信小程序異常火爆，不少人在學習，下面帶着你們搭建下微信小程序的調試環境（client+server），並調試入門練手項目--通信錄（phoneBook）（JavaScript和node.js基礎便可,微信推薦使用的語言，去菜鳥教程簡單學習下 JavaScript，node.js，mysql，nginx便可），方便你們學習。

 

2、相關概念

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

        小程序是一種不須要下載安裝便可使用的應用，它實現了應用「觸手可及」的夢想，用戶掃一掃或者搜一下便可打開應用。能夠理解成一套嵌套在微信裏面的app，和原生app不一樣的是不須要下載，屬於小而輕的應用。

 

3、開始工做

一、本地koa後臺服務部署

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

 

二、準備註冊等工做

（1）註冊帳號 

 

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

 

（3）註冊好後登陸下微信公衆平臺|小程序，在設置裏找到開發設置，把appID保存下來，一會開發的時候須要用到

 

4、啓動項目起來

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

打開開發者工具，掃碼登陸後選擇小程序項目，點擊右下角的加號，建立新項目，選擇項目目錄，填寫appID，項目名稱，寫好後點擊肯定。

 

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

 

三、設置不校驗合法域名

這個設置是本地開發換環境下，進行開發調試的，必須勾上。

 

四、運行起來了

 

5、項目結構

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

 

6、設計理念

一、小程序能夠理解成一個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函數。

相應的事件能夠參考官方文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

 

二、傳遞參數

有時候咱們須要觸發事件的時候，傳遞一些參數，那小程序怎麼傳遞呢？很不幸，小程序不能相似js裏面直接傳遞，每每咱們須要將傳遞的數據綁定到事件元素上。

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

 

 

7、路由

小程序裏面全部的頁面路由由框架進行管理

咱們可使用getCurrnetPages函數獲取當前頁面棧的實例，返回一個數組, 最後一個元素爲當前頁面

小程序定義了五個用於導航跳轉的API，這裏列舉兩個經常使用的

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

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

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

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

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

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

 

 

（一）數據過濾 過濾器

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

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

一、獲取數據的時候，直接改了，乾脆利落、好不優雅。

二、使用最後咱們要介紹的wxs

 

（二）WXS

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

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

 一、首先咱們建立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>

 

總結： 

一、每一個wxs標籤都有一個module 屬性 

二、wxs能夠寫在wxml裏面的wxs標籤裏和.wxs文件裏 

三、wxs文件中引入其餘wxs文件時候，可使用require函數，接受相對路徑 

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

 

8、部署線上後端服務

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

（一）準備好將http轉成https

能夠參考這篇阿里雲免費購買SSL證書，nginx無縫升級https：https://www.mwcxs.top/page/434.html

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

 

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

一、修改mysql配置

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

 

host使用你的服務器外網IP，user數據庫用戶名，密碼，以及數據庫名稱。

 

二、修改請求後端的url

在app.js

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

 

 

三、使用pm2管理koa的服務

 

四、本地修改設置不校驗合法域名

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