mpvue基本使用

## 什麼是mpvue ##

- 美團開發使用vue語法開發小程序的前端框架
- 適用於vue語法開發
- 會調用部分小程序API

## 建立mpvue項目 ##

1. 必須安裝node.js
2. 安裝vue腳手架npm install -g vue-cli
3. 建立項目，找到項目目錄運行:vue init mpvue/mpvue-quickstart mympvue01
4. cd到項目目錄安裝依賴modules: cnpm i
5. 在項目下運行npm run dev就能夠將項目轉化爲小程序項目，自動生成一個小程序目錄格式的dist文件夾

## 關聯微信開發工具 ##

設置微信開發工具打開mympvue01,因爲配置文件已經配置好了上傳dist目錄，因此在微信開發工具中上傳代碼只會上傳dist目錄

## mpvue目錄解析 ##

#### src目錄解析 ####

- component、pages、utils、目錄與小程序中意義相同
- tips:小程序utils目錄用於存放公共的方法，每一個page都能調用
- App.vue，等同於小程序app.js和app.wxss
- main.js,至關於app.json

#### pages/index目錄解析 ####

- index.vue 對應微信目錄下index.js、index.wxml、index.wxss
- main.js  固定寫法,相似配置

#### 建立一個page目錄 ####

1. 在src目錄下建立user目錄
2. 在user目錄下建立index.vue文件
3. 在user目錄下建立main.js配置文件
4. 在src/main.js文件中配置pages路徑  

 

#### 項目appid配置 ####

-project.config.json 配置項目的appid等信息

### tips:index.vue文件必須增長export暴露數據否則打包會卡主###

    <template>
        <div>{{msg}}</div>
    </template>
    <script>
        export default{
            data(){
                return{msg:'這是一個組件'}
            }            
        }
    </script>

## 配置底部tab切換，引入圖片，請求數據 ##

#### 在pages/index.vue中引用圖片 ####

先在static目錄下建立images目錄存放圖片
    <img src="../../../static/images/icon.png"/>

#### 在main.js中配置bar ####

    {
         「pages」:[ //配置目錄信息
                 「pages/index/main」, 
              「^pages/logs/main」 //^表示顯示此路徑爲首頁
    　　          ],
    　　     「window」:{ //窗口樣式
             「backgroundTextStyle」:」Light」,
             「navigationBackgroundColor:」#fff」,
             「navigationBarTitleText」:」WeChat」,
            「navigationBarTextStyle」:」black」
    　　      },
    
      　  "tabBar": {  //底部菜單欄配置
    　　         「color」:」#333」, //字體顏色
    　         "list": [{
       　　         "pagePath": "pages/index/main",
          　      「iconPath」:"static/images/icon.png",
     　　　         "text": "首頁"
       　　    }, {
    　　            pagePath": "pages/logs/logs",
    　　            "text": "日誌",
      　        }] 
     　     },
    }

#### 請求數據 ####

使用wx.request,微信小程序的api請求數據，請求接口必須爲https，若是不爲https能夠在微信開發者工具中點擊詳情設置

#### 頁面跳轉 ####

使用wx.navigateTo(url),微信API跳轉

#### 獲取其餘頁面url傳遞過來的參數 ####

    onLoad：function    (options){ //與小程序一致
        console.log(options)
    }

#### 解析html ####

1.直接使用vue的語法，v-html解析便可，可是會存在標籤解析錯誤
2.使用mpvue-wxparse解析html

     //引用wxparse
    <wxParse :content="list.xxx"/> //引入顯示組件
    <script>
        import wxParse from 'mpvue-wxparse'
        export default{
            data(){
                return{list:[]}
            },
            components:{ //註冊組件
                wxParse
            }            
        }
    </script>
    <style> //引入css樣式
        @import url("~mpvue-wxparse/src/wxParse.css")
    </style>

3.使用過程當中若本地圖片真機未能顯示，須要將圖片地址換成https訪問便可

## 使用小程序原生組件 ##

小程序原生組件中的事件須要使用vue語法編寫：以scroll-view爲例
　//原生寫法
　<scroll-view bindscrolltolower="lower"></scroll-view>
　//mpvue寫法
　<scroll-view @scrolltolower="lower"></scroll-view>

　//綁定事件的獲值由原生的event.detail 變爲event.mp.detail

## 頁面間參數傳遞 ##

- 經過 this.$root.$mp.query 進行獲取小程序在 page onLoad 時候傳遞的 options- 經過 this.$root.$mp.appOptions 進行獲取小程序在 app onLaunch/onShow 時候傳遞的 options- 使用 this.$root.$mp.query 獲取參數須要在mounted中獲取，在created中會報Cannot read property 'query' of undefined