/**
* 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
在老基础库下输入框输入时可能存在光标重设的问题。
6.写页面跳转时候传入动态参数,需要写成:url,如:
7.通过this.$root.$mp.query
进行获取小程序在 page onLoad 时候传递的 options。通过this.$root.$mp.appOptions
进行获取小程序在 app onLaunch/onShow 时候传递的 options。
8.使用this.$root.$mp.query获取参数需要在monted中获取,在created中会报Cannot read property 'query' of undefined 。
更多ECSHOP内容来自#