mpvue開發微信小程序基礎知識

1、mpvue簡介

mpvue 是一個使用 Vue.js 開發小程序的前端框架。框架基於 Vue.js 核心， mpvue 修改了 Vue.js 的 runtime 和 compiler 實現，使其能夠運行在小程序環境中，從而爲小程序開發引入了整套 Vue.js 開發體驗。mp 即 mini program 的縮寫。

2、mpvue快速入門

① 經過腳手架引入mpvue模板

vue 3.0已經 不支持vue init命令了，因此須要單獨安裝 @vue/cli-init，安裝好以後，就能夠按如下操做步驟引入mpvue模板了

npm install -g @vue/cli-init

vue init mpvue/mpvue-quickstart my-project

cd my-project

npm install

npm run dev

npm run dev命令會在項目根目錄下生成一個dist目錄，其就是 將vue的項目轉換爲微信小程序項目

② 搭建小程序的開發環境

微信提供了一個專門 微信開發者工具用於開發小程序，須要下載安裝微信開發者工具，同時還須要申請一個小程序ID，即 AppID，由於 經過微信開發者工具建立小程序項目須要填入AppID，能夠在微信公衆平臺申請獲得。

③ 調試項目

經過微信開發者工具啓動微信小程序項目，選擇的項目目錄 是mpvue項目的根目錄，而不是生成的dist目錄，因爲 微信開發者工具不支持.vue文件的查看，因此咱們仍是要用本身的開發工具調試源碼。

3、mpvue的一些使用細節

① mpvue的src目錄下和vue同樣，也有一個App.vue根組件，App.vue根組件只是一個結構，無具體內容，根組件有對應的main.js文件用於渲染App.vue根組件，即引入App.vue並做爲Vue構造函數建立Vue實例，而後mount，還有一個app.json文件，即頁面全局配置文件，用於頁面的註冊、tabBar的註冊、全局window樣式設置，如:

// App.vue

<script>

export default {
 
}
</script>

<style>
page {
  width: 100%;
  height: 100%;
  background-color: #f7f7f7;
}
</style>

// main.js

import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue(App)
app.$mount()

// app.json

{
  "pages": [
    "pages/index/main"
  ],
  "tabBar": {
    ......
  },
  "window": {
    "backgroundColor":"#00BFFF",
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "測試",
    "navigationBarTextStyle": "black"
  }
}

② mpvue中定義的頁面都放在src目錄下的pages目錄裏面，一個頁面對應一個文件夾，每一個頁面文件夾內須要有一個.vue文件和main.js文件，main.js主要作的就是，引入當前頁面對應的.vue，而後做爲Vue構造函數的參數建立Vue實例並mount，而且main.js的名稱不能改變，只能是main.

// main.js

import Vue from 'vue'
import App from './index'

// add this to handle exception
Vue.config.errorHandler = function (err) {
  if (console && console.error) {
    console.error(err)
  }
}

const app = new Vue(App)
app.$mount()

在mpvue中，一個頁面中的.vue文件的名字雖然能夠任意，可是 .js和.json文件名字是固定爲main的，一般咱們.vue文件也是固定使用index.vue，全部 一個頁面中一般固定包含index.vue、main.js、main.json， 經過外層的文件夾來區分不一樣的頁面，而原生小程序中，也是經過外層文件夾來區分不一樣的頁面，可是 文件夾中的四個頁面的名稱能夠和外層文件夾相同，也能夠不一樣，但四個文件必須統一。

③ 每次新增了頁面，須要從新啓動項目，即從新執行npm run dev.

4、微信小程序基礎與經常使用API

① 點擊按鈕提示用戶是否受權並獲取用戶信息

微信小程序給咱們的按鈕 <button>提供了一些 微信開發的能力，其經過給<button>標籤添加一個 open-type屬性，表示 要給按鈕開放的能力類型，好比 getUserInfo，即點擊按鈕獲取用戶信息的能力，咱們須要在<button>上經過監聽 getuserinfo事件，mpvue在小程序的基礎上進行了封裝，須要經過 e.mp.detail.userInfo才能獲取到用戶信息，

<button open-type="getUserInfo" @getuserinfo="getUserInfo">點擊開始</button>
<script>
export default {
    getUserInfo(e) {
      console.log(e.mp.detail.userInfo); // 獲取用戶信息
    }
}
</script>

② wx全局對象
就像網頁運行在瀏覽器環境同樣，瀏覽器環境會提供一個全局的window對象，一樣小程序是運行在小程序環境中，小程序環境也會提供一個全局的wx對象，wx會提供不少api，好比訪問網絡(wx.request({}))、頁面跳轉(wx.redirectTo({}))、顯示loading(wx.showLoading({}))、顯示提示(wx.showToast({}))等

③ 微信小程序中發起網絡請求
在小程序環境中不能像瀏覽器環境一個直接提供ajax，而是提供了一個全局的網絡請求api，即wx.request(),在小程序環境中只能使用wx.request()發起網絡請求，不能使用axios等經常使用的請求類庫，而且wx.request()並不存在跨域問題。使用wx.request()的時候，須要傳遞一個請求參數配置對象，request()方法返回結果並非一個Promise對象，因此不能經過.then()的方式去處理請求結果，而是在請求配置對象中添加了success、fail、complete等回調函數，在回調函數中能夠獲取到請求的結果，如:

wx.request({
    url: "http://www.baidu.com", // 請求url地址必填
    data: {
        user: "even li"
    },
    method: "get", // 請求方法
    header: {
        "content-type": "application/json" // 默認值
    },
    success(res) {
        console.log(res.data); // 獲取響應數據
    },
    fail(error) {
        console.log(error); // 請求失敗
    }
    complete(res) { // 接口調用結束，請求成功或失敗都會執行
        console.log(res); // 若是請求成功則res爲響應結果res，若是請求失敗則res爲錯誤信息error
    }
});

須要注意的是， 返回狀態碼爲404也算請求成功， 通常只有網絡異常的時候纔算請求失敗。

④ 跳轉頁面非tabBar頁面
若是想要跳轉到某個非tabBar頁面，那麼可使用一個全局的api，即wx.redirectTo({})，其做用就是關閉當前頁面，跳轉到應用內的某個頁面。可是不容許跳轉到 tabbar 頁面。須要傳遞一個配置對象，主要屬性爲url，即要跳轉頁面的路徑，可帶參數，而後就是success、fail、complete三個回調函數，請處理跳轉結果，如:

wx.redirectTo({
    url: "../question/main", // 在某個頁面內../至關於pages/
    success() {
    },
    fail() {
    },
    complete() {
    }
});

⑤ 跳轉到tabBar頁面
在微信小程序中，tabBar頁面是須要特殊的方式跳轉的，即便用wx.switchTab({})的方式，其會跳轉到 tabBar 頁面，並關閉其餘全部非 tabBar 頁面，其用法同wx.redirectTo({});

wx.switchTab({
   url: "../learn/main", // 在某個頁面內../至關於pages/
success() {
    },
    fail() {
    },
    complete() {
    }
});

⑥ 頁面配置文件
小程序的頁面配置文件分爲全局配置文件app.json與即頁面配置main.json. 全局配置文件可配置項比較多，整個配置文件內容要用花括號括起來，也就是說是一個JSON對象，如:

• pages屬性，是一個數組，用於定義小程序用到的頁面，數組中每一項對應一個頁面，即路徑+文件名信息，不須要寫後綴，在mpvue中全部頁面固定使用main，即每一個頁面下都會有一個main.js，因此在配置pages時，一般爲"pages/頁面名/main"，位於pages數組第一項表示小程序的初始頁面，即小程序運行時顯示的頁面。
• window屬性，即對小程序的窗口樣式進行配置，其屬性值爲一個對象，主要包括backgroundColor(窗口背景顏色，即頁面下拉後漏出的背景窗口顏色)、backgroundTextStyle(設置下拉背景字體、loading圖的樣式，目前只支持dark和light)、navigationBarBackgroundColor(導航欄背景顏色)、navigationBarTextStyle(導航欄標題顏色，目前只支持black和white)、navigationBarTitleText(導航欄標題文字內容)、navigationStyle(值爲custom自定義導航欄)

微信小程序設置顏色的時候， 只支持十六進制顏色，不支持RGB格式和顏色英文。

• tarBar屬性，用於配置窗口底部的tabBar，其屬性值爲一個對象，主要有color(設置tab未激活狀態文字的顏色)、selectedColor(設置tab激活狀態的文字顏色)、borderStyle(設置tabBar上邊框的顏色，目前只支持black和white)、backgroundColor(設置tab的背景顏色)、list(用於配置tab項，最多可配置5項)，list屬性值爲一個數組，主要包括text(tab上顯示的文字內容)、iconPath(tab處於未激活狀態時顯示的圖標路徑)、selectedPath(tab處於激活狀態時顯示的圖標路徑)、pagePath(tab被點擊時要跳轉的頁面路徑，其屬性值爲pages中配置的路徑)

頁面配置配置相對於全局主配置文件來講要簡單得多，在 頁面配置文件中只能配置窗口的樣式屬性，即只能配置全局配置文件中的window屬性中的內容， 頁面配置文件中配置的內容會覆蓋掉全局配置文件中window中相同的配置，以決定當前頁面的窗口表現， 無需使用window屬性，直接將window配置放到花括號中便可。

⑦ 小程序頁面與Vue生命週期

小程序給頁面提供了 onLoad(頁面加載)、 onShow(頁面顯示， 但還未渲染完成)、onReady(頁面渲染完成)、 onHide(頁面隱藏)、 onUnload(頁面卸載)， mpvue將小程序提供的頁面生命週期和vue的生命週期結合在了一塊兒，也就是說使用mpvue開發小程序，能夠同時使用小程序的生命週期和vue的生命週期，其順序爲: beforeCreate --> created --> onLoad --> onShow --> onReady --> beforeMount --> mounted。即 Vue首先實例化而後頁面開始加載、顯示、渲染，頁面渲染完成後Vue實例開始掛載。

⑧ 導航到某個頁面
所謂導航到某個頁面，就是跳轉到某個頁面，可是其會保留當前頁面，跳轉的目的頁面導航欄左側中自帶一個返回按鈕，點擊能夠回到以前的頁面，可是這個跳轉的目的頁面不能是tabbar中的頁面，其使用的是wx.navigateTo({})

wx.navigateTo({
    url: "../myLesson/main" // 導航到個人課程頁面，目標頁面自帶返回按鈕，點擊可返回以前的頁面
});

⑨ 動態設置頁面導航欄標題
當咱們點擊列表中的某個具體項時，一般須要在其對應頁面動態顯示出當前點擊項的具體導航欄標題，微信小程序提供了wx.setNavigationBarTitle({})用於動態設置導航欄欄標題，一樣有success、fail、complete三個回調函數，如:

wx.setNavigationBarTitle({
     title: "動態標題內容",
     success() {
     },
     fail() {
     },
     complete() {
     }
});

⑩ 本地緩存數據
微信小程序提供了setStorage({})方法，能夠將數據存儲在本地緩存中指定的 key 中，除非用戶主動刪除或因存儲空間緣由被系統清理，不然數據都一直可用。單個 key 容許存儲的最大數據長度爲 1MB，全部數據存儲上限爲 10MB。如:

wx.setStorage({
    key:"key",
    data:"value"
});

一樣，微信小程序也提供了getStorage({})方法，用於獲取對應key中存儲的數據，其還有success、fail、complete三個回調函數，如:

wx.getStorage({
    key: "key",
    success (res) { // 成功獲取到對應key中的數據
    },
    fail() { // 未成功獲取到對應key中的數據
    },
    complete() { // 獲取對應key數據結束，無論成功仍是失敗都會執行
    }
});

getStorage()和setStorage()方法自己是 異步的，可是微信小程序提供了對應的同步方法，即 getStorageSync("key")和 setStorageSync("key", "value");

⑪ 輪播圖組件
微信小程序提供了一個<swiper>輪播圖組件，其中只可放置swiper-item組件，swiper有一些經常使用的屬性，如:

• indicator-dots: 是否顯示面板指示點;
• autoplay: 是否自動切換;
• interval: 設置自動切換時間間隔;
• duration: 滑動動畫時長;
• circular: 是否循環播放;
• indicator-active-color: 設置當前選中的指示點顏色;

<swiper :indicator-dots="indicatorDots" 
        :autoplay="autoPlay" 
        :interval="interval" 
        :duration="duration" 
        :circular="circular" 
        indicator-active-color="rgba(255,255,255, 0.6)">
        <block v-for="(item, index) in imgUrls" :key="index">
            <swiper-item>
                <img :src="item" class="slide-item"/>
            </swiper-item>
        </block>
</swiper>

固然，<swiper>組件不只僅能實現圖片的輪播，還能夠實現其餘輪播，好比 列表內容的輪播(導航和內容的聯動)，咱們不給其添加indicator-dots、autoplay、interval、duration、circular等屬性，而是 經過手進行滑動，swiper組件還有一個 current屬性， 屬性值爲滑動塊的索引值，用於顯示對應的滑動item，從而實現導航和內容的聯動，即 點擊導航，自動切換到對應內容。swiper組件也提供了change事件，當咱們手動滑動滑動item的時候，就會觸發change事件，能夠在事件對象中拿到對應滑塊的索引，從而更新導航位置，實現 滑動內容，自動高亮導航位置。

⑫ 可滾動區域組件
微信提供了一個<scroll-view>可滾動區域組件，用於設置該區域中的內容是能夠滾動的，一般用於實現可滾動的導航標籤欄，其經常使用屬性爲:

• scroll-x: 是否容許橫向滾動;
• scroll-y: 是否容許縱向滾動;
• scroll-into-view: 屬性值爲對應滾動item的id，表示自動滾動到對應id元素位置;
• scroll-with-animation: 在設置滾動條位置時使用動畫過渡;

要實現點擊某個滾動item後，自動滾動到對應滾動item位置，那麼須要給每一個滾動item添加一個id，而後動態改變scroll-into-view的值爲對應的滾動item的id便可。

<scroll-view class="btns_wrap" 
             scroll-x :scroll-into-view="toChildView" 
             scroll-with-animation>
    <span :class="{active: currentIndex === index}" 
          class="btn_scroll" 
          v-for="(item, index) in allLessons" 
          :key="index" 
          :id="item.id" 
          @click="switchItem(index)">
          {{item.name}}
    </span>
</scroll-view>