文章目錄
一、項目初始化
- 打開視覺稿
- 初始化mpvue項目
vue init mpvue/mpvue-quickstart mpvue-imooc-ebook
- 刪除無關內容
- 精簡app.json
{
"pages": [
"pages/index/main",
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "小慕讀書",
"navigationBarTextStyle": "black"
}
}
- 精簡src\pages\index\main.js
import Vue from 'vue'
import App from './index'
const app = new Vue(App)
app.$mount()
- 精簡src\pages\index\index.vue
<template>
<div>
Hello World
</div>
</template>
<script>
export default {
}
</script>
<style scoped>
</style>
- 清空components
- 刪掉src\pages\counter和src\pages\logs
- npm run dev進入開發模式
- 打開微信開發者工具
- 設置AppId
- 勾選"不校驗合法域名"
二、集成scss
安裝依賴
cnpm i -D [email protected] node-sass
使用
<style lang="scss" scoped>
.img {
width: 100%;
}
</style>
報錯：
Modele build failed: TypeError: this.getResolve is not a function at Object.loader...這是由於安裝了sass-loader8以上版本
卸載當前版本 npm uninstall sass-loader
安裝 npm install [email protected] --save-dev
三、集成vant-weapp組件庫
官網
https://youzan.github.io/vant-weapp/
安裝依賴
cnpm i vant-weapp -S --production
引入組件
app.json
{
"usingComponents": {
"van-button": "vant-weapp/dist/button/index"
}
}
使用組件
<van-button type="primary">按鈕</van-button>
修改構建配置
- 修改webpack.base.config.js
if (/^wx$/.test(PLATFORM)) {
baseWebpackConfig = merge(baseWebpackConfig, {
plugins: [
new CopyWebpackPlugin([{
from: resolve('node_modules/vant-weapp/dist'),
to: resolve('dist/wx/vant-weapp/dist'),
ignore: ['.*']
}])
]
})
}
報錯：
module "vant-weapp/dist/action-sheet/index.js" is not defined
解決：工具=>項目詳情=>本地設置=>ES6轉ES5√選
四、集成mpvue-router-patch插件
github地址：https://github.com/F-loat/mpvue-router-patch
安裝依賴
cnpm i -S mpvue-router-patch
安裝插件
import MpvueRouterPatch from ‘mpvue-router-patch’
Vue.use(MpvueRouterPatch)
使用
<template>
<div>
<span class="msg">Hello World</span>
<van-button type="primary" @click="jump">按鈕</van-button>
</div>
</template>
<script>
export default {
methods: {
jump () {
this.$router.push('/pages/index/main')
}
}
}
</script>
報錯：
Missing space before value for key 'methods'
報錯：Missing space before opening brace
報錯：Missing space before function parentheses
一定要注意methods:後和jump ()括號前後的空格
可在.eslintrc.js的'rules'裏增加"space-before-function-paren": 0
五、集成flyio
github地址：https://github.com/wendux/fly
安裝依賴
cnpm i -S flyio
使用
創建src\utils\request.js，並完成如下內容：
- 初始化Flyio對象
function createFly () {
if (mpvuePlatform === 'wx') {
const Fly = require('flyio/dist/npm/wx')
return new Fly()
} else {
return null
}
}
- 處理get請求
export function get (url, params = {}) {
const fly = createFly()
if (fly) {
return new Promise((resolve, reject) => {
fly.get(url, params).then(response => {
console.log(response)
resolve(response)
}).catch(err => {
handleError(err)
reject(err)
})
})
}
}
- 處理post請求
export function post (url, params = {}) {
const fly = createFly()
if (fly) {
return new Promise((resolve, reject) => {
fly.post(url, params).then(response => {
console.log(response)
resolve(response)
}).catch(err => {
handleError(err)
reject(err)
})
})
}
}
- 這裏的handleError我們可以根據實際業務場景進行定製
function handleError (err) {
console.log(err)
}
在src\pages\index\index.vue中作如下操作：
- 修改
<script>標籤內的內容（使用get請求）
<script>
import { get } from '@/utils/request'
export default {
methods: {
jump () {
// this.$router.push('/pages/index/main')
get('https://www.baidu.com').then(response => {
console.log('handleResponse....')
})
}
}
}
</script>
查看效果：
- 修改
<script>標籤內的內容（使用post請求）
<script>
import { post } from '@/utils/request'
export default {
methods: {
jump () {
// this.$router.push('/pages/index/main')
post('https://www.baidu.com').then(response => {
console.log('handleResponse....')
})
}
}
}
</script>
