基础介绍
mpvue： （github 地址请参见）是一个使用 Vue.js 开发小程序的前端框架。
Vant Weapp： 是移动端 Vue 组件库 Vant 的小程序版本，两者基于相同的视觉规范，提供一致的 API 接口，助力开发者快速搭建小程序应用。
Fly.js： 一个支持所有JavaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用。
1. 安装mpvue
创建一个基于mpvue-quickstart模板的新项目全部流程
# 1. 先检查下 Node.js 是否安装成功
$ node -v
# 2. 由于众所周知的原因，可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/
# 3. 全局安装 vue-cli
$ npm install --global vue-cli
# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project
# 5. 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev
这里是模板的具体配置信息（如果你还不太明白这些内容的含义，可以先直接全部按回车）
$ vue init mpvue/mpvue-quickstart mpvuedemo // mpvuedemo 是项目文件名称,运行后会在目录下生成一个这样名称的文件夹
? Project name (mpvuedemo) // 项目名称
? Project name mpvuedemo
? wxmp appid (touristappid) wx*********** // 项目的appid
? wxmp appid wx**********
? Project description (A Mpvue project) // 项目说明
? Project description A Mpvue project
? Author () XXXXXX // 项目作者
? Author XXXXXX
? Vue build (Use arrow keys)
? Vue build runtime
? Use Vuex? (Y/n) y // 是否使用Vuex
? Use Vuex? Yes
? Use ESLint to lint your code? (Y/n) n // 是否使用ESLint
? Use ESLint to lint your code? No
? 小程序测试，敬请关注最新微信开发者工具的“测试报告”功能
? 小程序测试，敬请关注最新微信开发者工具的“测试报告”功能
2. 安装Vant Weapp组件库
① 克隆仓库
在本地新建一个文件夹执行 命令
git clone https://github.com/youzan/vant-weapp.git
② 复制dist文件夹到你项目的 /static/vant/ 目录下。
克隆到本地后，在你的项目的static文件夹下创建一个vant文件夹 ，将 克隆下来的文件中的dist 目录下的所有文件复制到你项目的 /static/vant/ 目录下。（下图就是dist文件夹的内容）
在这里插入图片描述
③ 引入组件
在需要使用组件的页面目录下的 main.json 文件中，引入对应组件。
如图在index.vue文件中要使用button，tab，image等组件时只要在index文件夹下的main.json文件中添加如下代码即可
在这里插入图片描述
④ 在页面使用
只要在 .vue文件中直接用就行
<van-button>按钮</van-button>
<van-tabs active="{{ active }}" bind:change="onChange">
<van-tab title="标签 1">内容 1</van-tab>
<van-tab title="标签 2">内容 2</van-tab>
<van-tab title="标签 3">内容 3</van-tab>
<van-tab title="标签 4">内容 4</van-tab>
</van-tabs>
3. 安装fiyio
这里是fiyio官网地址
① 使用NPM
npm install flyio
② 使用CDN
<script src="https://unpkg.com/flyio/dist/fly.min.js"></script>
**③ 在utils文件夹下添加 flyio.js文件 **
（我们要在该文件内进行数据请求封装）
import Fly from 'flyio/dist/npm/wx'
const fly = new Fly()
const host = "https://rmall.ukelink.net" // 数据请求url
//添加请求拦截器
fly.interceptors.request.use((request) => {
wx.showLoading({
title: "加载中",
mask:true
});
console.log('request___________________',request);
request.headers = {
"X-Tag": "flyio",
// 'content-type': 'application/json'
'content-type': 'application/x-www-form-urlencoded'
};
let authParams = {
//公共参数
// "categoryType": "SaleGoodsType@sim",
// "streamNo": "wx18542dc630fea2a4",
// "reqSource": "MALL_H5",
// "appid": "wx18542dc630fea2a4",
// "timestamp": new Date().getTime(),
// "sign": "string"
};
request.body && Object.keys(request.body).forEach((val) => {
if(request.body[val] === ""){
delete request.body[val]
};
});
request.body = {
...request.body,
...authParams
}
return request;
});
//添加响应拦截器
fly.interceptors.response.use(
(response) => {
wx.hideLoading();
return response.data;//请求成功之后将返回值返回
},
(err) => {
//请求出错，根据返回状态码判断出错原因
console.log(err);
wx.hideLoading();
if(err){
return "请求失败";
};
}
);
fly.config.baseURL = host;
export default fly;
④ 引入
在main.js文件中引入
import Vue from 'vue'
import App from './App'
// 添加下面两行代码即可
import fly from './utils/flyio.js'
Vue.prototype.$fly = fly;
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue(App)
app.$mount()
⑤ 在页面内使用方法
export default {
onShow() {
console.log('onShow,onShow,onShow_________')
this.$fly.request({
method:"post", //post/get 请求方式
url:"/mms/country/queryValidZoneListForMallHome",
body:{
// name:'qianbuduo'， // 传递的参数
}
}).then(res =>{
console.log(res)
}).catch(err=>{
console.log(err)
})
},
}
这就大功告成，然后我们可以愉快地去开发我们的项目了~~
最后是个人在mpvue开发中碰到的一点小问题给大家提个醒
① 当我们用npm下载一些插件后在运行项目时如果报错可以把node包删掉重新npm install 一下就好了
② 在使用 Vant 的 Notify （消息提示）时，要引用两次。页面内还要再引一次.并且在 并在页面内添加van-notify标签 。 否则会报错（未找到 van-notify 节点，请确认 selector 及 context 是否正确）
<template>
<div class="homePage">
<van-notify id="van-notify"></van-notify>
</div>
</template>
<script>
import Notify from '@/../static/vant/notify/notify.js'
......
</script>
网友评论