原生小程序學習小結，mpvue+mpvue-weui+fyl.js小程序項目搭建筆記

官方文檔：https://developers.weixin.qq....

學習小結：
一、小程序、訂閱號及服務號都是在微信公衆平臺的體系下，但小程序自己與訂閱號及服務號是徹底獨立的，須要從新註冊；

二、前端常見的HTML、CSS變成了微信自定義的WXML、WXSS，官方文檔中都有明確的使用介紹，上手容易；

三、小程序與H5開發區別：
H5開發：
須要考慮使用開發工具（webstorm,vscode、sublimtext、Atom等），前端框架（Angular、react、vue、backbone等）,任務管理工具（Webpack 、Grunt、Gulp等），瀏覽器兼容性等；
小程序：
開發工具（微信開發者工具），框架（小程序框架），不能直接引入前端框架，沒有window變量，但微信提供了wx全局方法集。沒法操做DOM，經過改變page data來改變視圖展示。數據綁定採用Mustache雙大括號語法。事件綁定和條件渲染，所有寫在WXML中。

四、小程序的視圖層目前使用 WebView 做爲渲染載體，而邏輯層是由獨立的 JavascriptCore 做爲運行環境。在架構上，WebView 和 JavascriptCore 都是獨立的模塊，並不具有數據直接共享的通道。當前，視圖層和邏輯層的數據傳輸，實際上經過兩邊提供的 evaluateJavascript 所實現；
五、小程序支持原生javascript嗎？
JavaScript的三大組成部分——ECMAScript、DOM（文檔對象模型，對應document對象）、BOM（瀏覽器對象模型，對應window對象）。
小程序支持ECMAScript，但不支持document，window對象。

小程序相關技術：

原生小程序開發技術棧：
一、WXML。微信標記語言，用於展現UI模板，相似HTML，文件後綴名爲「.wxml」。

二、WXSS。WeiXin Style Sheets，用於規定UI樣式，具備 CSS 大部分特性。在CSS基礎上擴展了尺寸單位和樣式導入。文件後綴名爲「.wxss」

三、WXS。WeiXin Script。封裝後的JS，通常內嵌於WXML頁面，很方便構建頁面，標籤爲」<wxs></wxs>"。

四、JS。普通的JavaScript，經常使用於控制整個頁面的邏輯。後綴名爲「.js」

五、JSON。用於項目全局配置或單頁面配置，後綴名爲「.json」。

開源框架：
一、WePY。是騰訊開源的一套語法接近vue.js，快速開發小程序的框架，微信組件化框架，類Vue.js風格，讓Web App的開發者更容易開發小程序。類Vue.js風格；支持引入NPM包、組件化開發、ES2015+特性、Promise、多種編譯器(Less/Sass/Stylus/PostCSS、Babel/Typescript、Pug)等。

二、mpvue。使用 Vue.js 開發小程序的前端框架，美團點評團隊出品。在最理想的狀態是，能夠一套代碼能夠直接跑在多端：WEB、小程序（微信和支付寶）、Native（藉助weex）。使用該框架，Vue開發者幾乎能夠無縫開發小程序。

服務端通信：
一、Flyio。強大的http請求庫；微信小程序的 javascript 運行環境和瀏覽器不一樣，頁面的腳本邏輯 是在JsCore中運行，JsCore是一個沒有窗口對象的環境，因此不能在腳本中使用window，也沒法在腳本中操做組件，

JsCore中也沒有 XmlhttpRequest對象，因此jquery 、zepto、axios這些在小程序中 都不能用，而此時，正是 fly 大顯身手的時候。

UI框架：
一、WeUI 是一套同微信原生視覺體驗一致的基礎樣式庫，由微信官方設計團隊爲微信內網頁和微信小程序量身設計，令用戶的使用感知更加統一。包含button、cell、dialog、 progress、 toast、article、actionsheet、icon等各式元素。
二、mpvue-weui 基於 mpvue 框架，重寫 WeUI，基於小程序原生組件，mpvue 完美支持；快捷開發，只需引入 weui.css

賽宜居2.0技術棧：

一、框架：mpvue;

二、UI組件庫:mpvue-weui;

三、服務端通信：Fly.js;

項目搭建：

1. 先檢查下 Node.js 是否安裝成功（如沒有須要本身去安裝）

   $ node -v

   $ npm -v

2. 全局安裝 vue-cli

   $ npm install --global vue-cli

3. 建立一個基於 mpvue-quickstart 模板的新項目 project

   $ vue init mpvue/mpvue-quickstart project

4. 安裝依賴

   $ cd project

   $ npm install

   $ npm run dev

隨着運行成功的回顯以後，能夠看到本地多了個 dist 目錄，這個目錄裏就是生成的小程序相關代碼。

在微信開發者工具中打開文件（目錄：projectdistwx）看效果：

用vcode（本身趁手的編輯器或者IDE）打開 project 中的 src 目錄下的代碼試試，src中的改動，會實時編譯到微信開發者工具中打開文件中，能夠看到實時效果（注意：新增的頁面須要從新 npm run dev 來進行編譯）

mpvue框架構建小程序項目的demo完畢

之後就在src目錄下進行賽宜居2.0小程序開發

引入mpvue-weui;

在static目錄下本身新建/weui/weui.css（https://github.com/KuangPF/mp...）

main.js文件下import引入weui.css：

import '../static/weui/weui.css'

引入Fly.js;

使用npm安裝fly.js：

$ npm install flyio
引入：

var Fly=require("flyio/dist/npm/wx") ;//npm引入方式
var fly=new Fly(); //建立fly實例

後續再封裝

添加scss支持：

npm i sass-loader node-sass --save-dev

<style lang="scss" scoped> // 注意：增長scoped屬性的做用是限定當前組件樣式的做用域僅做用域當前組件
 
$color: #417ccc;
.page {
　　background: $color;
}
</style>

添加resect.css
在static目錄下本身新建/style/resect.css
html標籤控制的樣式會轉換爲page標籤的樣式

詳情頁面navigationBarTitleText設置
新建main.json,代碼以下：

{
    "navigationBarTitleText": "切換社區"
}

登陸加密
login.js頁面：

var md5= require('../../utils/md5.js');
var wxPassWord = md5.hex_md5('123456');

/utils/新建md5.js文件，

代碼略
module.exports = {
  hex_md5//須要輸出的加密算法
}

請求Request Payload VS Form Data的區別（後臺接收不到對應的請求參數）
header是默認值'content-type': 'application/json' post請求時是Request Payload格式，
header改成：

header: {
  'Content-Type': 'application/x-www-form-urlencoded'
},

請求的是Form Data格式，後臺能正常接收了

貼下登陸的密碼

wx.login({
      success: function (res) {
        var URL = wx.getStorageSync('URL_S') +'wx/wx_mini_user_login.json';
        if (res.code) {
          debugger;
          var wxCode = res.code;
          var wxPassWord = md5.hex_md5(wxCode + md5.hex_md5(pwd.trim()));
          wx.request({
            url: URL,
            method: 'POST',
            data: {
              username: phone,// 用戶輸入的帳號
              password: wxPassWord, // 用戶輸入的密碼
              code: wxCode
            },
            header: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
            success: function (res) {
              // 登陸成功
              debugger;
              if (res.data.code == 0) {
                wx.switchTab({
                  url: '../switchtab/home/home',
                })
              }
            }
          })
        } else {
          console.log('獲取用戶登陸態失敗！' + res.errMsg)
        }

      }

    });