mpvue快速入門-有解無憂

mpvue

主要特性

使用 mpvue 開發小程式，你將在小程式技術體系的基礎上獲取到這樣一些能力：

徹底的組件化開發能力：提高代碼復用性
完整的 Vue.js 開發體驗
方便的 Vuex 資料管理方案：方便構建復雜應用
快捷的 webpack 構建機制：自定義構建策略、開發階段 hotReload
支持使用 npm 外部依賴
使用 Vue.js 命令列工具 vue-cli 快速初始化專案
H5 代碼轉換編譯成小程式目標代碼的能力

快速開始

# 1. 先檢查下 Node.js 是否安裝成功
$ node -v
v8.9.0

$ npm -v
5.6.0

# 2. 由于眾所周知的原因，可以考慮切換源為 taobao 源
$ npm set registry https://registry.npm.taobao.org/

# 3. 全域安裝 vue-cli
# 一般是要 sudo 權限的
$ npm install --global [email protected]
$ sudo npm install --global [email protected]

# 4. 創建一個基于 mpvue-quickstart 模板的新專案
# 新手一路回車選擇默認就可以了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安裝依賴，走你
$ cd my-project
$ npm install
$ npm run dev # 可查看package.json支持哪些命令編譯

vue init 時：

? Project name 你專案的名字
? wxmp appid 你的小程式appid
? Project description 專案描述
? Author 作者資訊
? Vue build runtime 僅限運行時：沒有自定義呈現函式，只能在*.vue中編譯模板
? Use Vuex? 是否使用vuex
? Use ESLint to lint your code? 是否使用eslint

運行成功后可以在dist目錄下看到build好的檔案目錄，在相應的小程式開發工具匯入即可使用

注意事項

新增的頁面需要重新 npm run dev 來進行編譯

生成的專案目錄

├── README.md #描述檔案
├── build #build時執行檔案目錄,根據環境執行不同檔案
│   ├── build.js
│   ├── check-versions.js
│   ├── dev-client.js
│   ├── dev-server.js
│   ├── utils.js
│   ├── vue-loader.conf.js #vue-loader組態檔
│   ├── webpack.base.conf.js
│   ├── webpack.dev.conf.js #開發版本打包執行檔案
│   └── webpack.prod.conf.js #線上版本打包執行檔案
├── config #專案組態檔
│   ├── dev.env.js #開發環境
│   ├── index.js #core代碼
│   └── prod.env.js #線上環境
├── dist #生成各種小程式到此目錄
│   └── wx #生成的微信小程式專案目錄,可在微信開發者工具直接匯入
│
├── index.html #掛載index
├── package.json
├── package.swan.json
├── project.config.json #微信專案組態檔
├── project.swan.json #百度專案組態檔
├── src #專案核心目錄
│   ├── App.vue #專案初始化時先執行組件
│   ├── app.json #頁面路徑組態檔
│   ├── components #組件目錄
│   │   └── card.vue #純vue組件
│   ├── main.js #專案入口檔案
│   ├── pages #頁面目錄
│   │   └── logs
│   │       ├── index.vue #頁面模版,純vue開發
│   │       ├── main.js #頁面入口檔案
│   │       └── main.json #頁面組態檔
│   └── utils #工具檔案目錄
│       └── index.js #index工具檔案
├── static #靜態資源目錄
│   ├── images
│   │   └── user.png
│   └── tabs
│       ├── home-active.png
│       ├── home.png
│       ├── orders-active.png
│       └── orders.png
└── tree.txt #專案結構樹檔案

生命周期

除了 Vue 本身的生命周期外，mpvue 還兼容了小程式生命周期，這部分生命周期鉤子的來源于微信小程式的 Page，除特殊情況外，不建議使用小程式的生命周期鉤子，

生命周期

注意事情

1、小程式里所有的 BOM／DOM 都不能用，也就是說 v-html 指令不能用，

2、 template 中的 {{}} 雙花括號的部分，直接編碼到 wxml 檔案中，由于微信小程式的能力限制(資料系結)，所以無法支持復雜的 JavaScript 運算式，目前可以使用的有 + - * % ?: ! == === > < [] .，

事件處理

// 事件映射表，左側為 WEB 事件，右側為 小程式 對應事件
{
    click: 'tap',
    touchstart: 'touchstart',
    touchmove: 'touchmove',
    touchcancel: 'touchcancel',
    touchend: 'touchend',
    tap: 'tap',
    longtap: 'longtap',
    input: 'input',
    change: 'change',
    submit: 'submit',
    blur: 'blur',
    focus: 'focus',
    reset: 'reset',
    confirm: 'confirm',
    columnchange: 'columnchange',
    linechange: 'linechange',
    error: 'error',
    scrolltoupper: 'scrolltoupper',
    scrolltolower: 'scrolltolower',
    scroll: 'scroll'
}

事件修飾符

.stop 的使用會阻止冒泡，但是同時系結了一個非冒泡事件，會導致該元素上的 catchEventName 失效！
.prevent 可以直接干掉，因為小程式里沒有什么默認事件，比如submit并不會跳轉頁面
.capture 支持 1.0.9
.self 沒有可以判斷的標識
.once 也不能做，因為小程式沒有 removeEventListener, 雖然可以直接在 handleProxy 中處理，但非常的不優雅，違背了原意，暫不考慮

小程式組件

mpvue 可以支持小程式的原生組件，比如： picker,map 等，需要注意的是原生組件上的事件系結，需要以 vue 的事件系結語法來系結，如 bindchange="eventName" 事件，需要寫成 @change="eventName"

示例代碼：

<picker mode="date" :value="https://www.cnblogs.com/rope/p/date" start="2015-09-01" end="2017-09-01" @change="bindDateChange">
    <view >
      當前選擇: {{date}}
    </view>
</picker>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/181617.html

標籤：JavaScript

上一篇：element-ui 默認排序

下一篇：小程式點擊圖片，png轉jpg，再預覽方法