当前位置：首页 > news >正文

用mpvue开发微信小程序

news 来源：原创 2024/4/24 10:16:55

一、搭建项目

官网教程：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 合法域名列表中

解决方法：
微信小程序左上角菜单栏-设置

微信小程序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，需要在项目设置上