微信小程序初體驗，入門練手項目--通訊錄，後臺是阿裏雲服務器(一)
內容：
一、前言
二、相關概念
三、開始工作
四、啟動項目起來
五、項目結構
六、設計理念
七、路由
八、部署線上後端服務
同步交流學習社區： https://www.mwcxs.top/page/440
源碼地址：https://github.com/saucxs/wx_phoneBook
一、前言（坑爹的玩意）
微信小程序自從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函數。
相應的事件可以參考官方文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html
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：https://www.mwcxs.top/page/434.html
參考主要是申請和解析域名，以及將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、本地修改設置不校驗合法域名
去掉不校驗合法域名的勾選
微信小程序初體驗，入門練手項目--通訊錄，後臺是阿裏雲服務器(一)