// var Fly=require("flyio/dist/npm/wx") //npm引入方式
var fly=new Fly(); //创建fly实例
//添加拦截器
fly.interceptors.request.use((config,promise)=>{
//给所有请求添加自定义header
config.headers["X-Tag"]="flyio";
return config;
})
//配置请求基地址
fly.config.baseURL="https://wendux.github.io/"
...
Page({
//事件处理函数
bindViewTap: function() {
//调用
fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then((d)=>{
//输出请求数据
console.log(d.data)
//输出响应头
console.log(d.header)
}).catch(err=>{
console.log(err.status,err.message)
})
...
})
})
apiUtil.js
/**
* Created by yuchen on 2018/4/2.
*/
//封装httpApi
import request from './httpUtil'
const host = "https://XXX.cn"
const api = {
// test地址
authorList:() => request.get(`${host}/index/list_author_recommend.html`)
}// export default api
export default { //作为组件库(install)
install: function(Vue,name="$http") {//自定义名字(vue-resource也使用$http)
Object.defineProperty(Vue.prototype, name, { value: api });//将组件库挂载在原型对象上
}
}
step5:vue组件(mpvue官方项目中就创建了card组件，这里注意class需要写在组件内部里面，不然渲染不出来)
step6:页面跳转和传参(这里mpvue不支持vue-router)
使用微信的页面跳转方法，然后跳转页面使用this.$root.$mp.query获取参数。
step7:引入weui,测试效果(根据你的需求引入UI库，不支持elementUI，或者不使用)。
下载weui.css放入项目中，import引入css，如：import ‘../static/weui/weui.css’
补充下使用mpvue需要注意的地方(具体参考官方文档)
1.新增页面需要npm run dev重启一下。
2.小程序里所有的 BOM／DOM 都不能用，也就是说
v-html指令不能用。3.暂不支持在组件上使用 Class 与 Style 绑定，需要在组件内部书写。
4.mpvue 可以支持小程序的原生组件，比如：
picker,map等，需要注意的是原生组件上的事件绑定，需要以
vue的事件绑定语法来绑定，如
bindchange="eventName"事件，需要写成
@change="eventName"。5.
mpvue建议使用
v-model.lazy绑定方式以优化性能，此外
v-model
