YClimb 2019-06-28
官网教程:http://mpvue.com/mpvue/#_2
用vue-cli构建项目后,在微信开发者工具中项目目录选择构建的dist目录,不是src目录
每一个页面都是新建文件夹,然后包含由下面三个文件
srcpagesindexindex.vue
srcpagesindexmain.js
srcpagesindexmain.json(非必须)
推荐将每个文件夹中的index.vue文件名改为模块文件名例如login.vue,在main.js中修改引入文件名即可。
文件创建好以后要到srcapp.json中进行注册。
安装sass-loader:npm i sass-loader node-sass --save-dev即可
在style标签加上scss标签即可 <style scoped lang=scss>
那么如何在mpvue中引入全局sass样式呢
在src/main.js中 import './assets/css/global.scss';
h5的select、checkbox、radio都要用微信原生组件来代替(官方文档也有写:http://mpvue.com/mpvue/#_14)
需要注意的是:一些组件不支持v-model绑定,如checkbox-group,可以通过绑定change事件来更新数据
1、子组件向父组件传递数据
子组件在方法中触发:
<button @onclik="subClick"> subClick () { this.$emit('postResult', {result: value}); }
父组件监听事件:
<subComponent @postResult="父组件处理方法"></subComponent>
2、父组件调用子组件的方法
父组件向子组件传递参数: mpvue使用的是vue的父子组件通讯,通过输入参数props即可。
父组件调用子组件方法:
在child标签加入ref属性<child ref="child"></child>,
父组件通过this.$refs.child.childMethod()来调用子组件方法。
需要注意的是,只有在子组件渲染完以后才能调用
3、通过vuex来通讯
新建store.js,然后分别在父子组件中import
4、设置全局参数
如果我要在所有页面共享数据呢
srcmain.js中
import store from './utils/store'; Vue.prototype.$store = store;
然后在各个页面中直接this.$store.data即可
5、兄弟组件之间,通过event bus传参
新建messenger.js,然后分别在两个组件中import
发送事件组件:
messenger.$emit('msg', params);
接收事件组件:
create(){ messenger.$on('msg', params => {}); }
mpvue的请求要使用微信小程序的原生请求,content-type 会被默认为 application/json,在使用post请求的时候,如果后端需要的是form-data格式,需要修改content-type为application/x-www-form-urlencoded。
对于初次开发的朋友,第一次发请求会报一个错误
http://xxxx.xxxx.xxx不在以下 request 合法域名列表中,请参考文档:不在以下 request 合法域名列表中
解决方法:
微信小程序左上角菜单栏-设置
微信小程序request官方文档:https://developers.weixin.qq....
mpvue开发微信小程序引入ui框架,微信有原生的WeUI:https://weui.io/很简洁,满足更多需求还是选择第三方的ui框架。
现在github start比较多的是iview的和zanui的微信ui组件,iview有2000+的start,zanui有6000+的start,用下来比较确实是iview好用一些。
https://github.com/TalkingDat...
https://github.com/youzan/zan...(好用的是这个)
引入的时候注意,将代码一定粘贴到根目录下的static目录,不然会报错。
同时第三方组件有使用es6,需要在项目设置上
1、微信开发者工具,win10点击不到input,获取不到焦点。点击错位,才能获取焦点。
问题原因:因为高分屏,win10的ui做了缩放,默认150%
解决办法:将桌面缩放改成100%就行了。
本文章会持续跟新,发现问题请多多指正