用mpvue开发微信小程序

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中进行注册。

三、mpvue引入sass

安装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 => {});
}

五、http请求

mpvue的请求要使用微信小程序的原生请求,content-type 会被默认为 application/json,在使用post请求的时候,如果后端需要的是form-data格式,需要修改content-type为application/x-www-form-urlencoded。

对于初次开发的朋友,第一次发请求会报一个错误
http://xxxx.xxxx.xxx不在以下 request 合法域名列表中,请参考文档:不在以下 request 合法域名列表中
用mpvue开发微信小程序
解决方法:
微信小程序左上角菜单栏-设置
用mpvue开发微信小程序

微信小程序request官方文档:https://developers.weixin.qq....

六、引入ui框架

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,需要在项目设置上

用mpvue开发微信小程序

七、其它坑

1、微信开发者工具,win10点击不到input,获取不到焦点。点击错位,才能获取焦点。

问题原因:因为高分屏,win10的ui做了缩放,默认150%

解决办法:将桌面缩放改成100%就行了。

本文章会持续跟新,发现问题请多多指正

相关推荐

戴翔的技术 / 0评论 2020-02-03