微信小程序 之 mpvue
2024-05-09 13:25:15
目录
一、mpvue ( Vue in Mini Program )
二、初始化项目
1. 检查node和npm版本
2. 安装vue-cli脚手架
3. 创建mpvue项目
4. 进入改项目目录中，安装依赖
5. 在 project.config.json 配置 appid
6. 执行，生成dist文件夹
7. 下载微信开发者工具
8. 微信开发者工具打开改项目 ( 打开dist文件夹即可 )
9. 即可看到效果
三、mpvue中基本功能的使用
01. 全局配置文件 => app.json小程序配置 | 微信开放文档
02. 单个页面配置文件 => main.json
03. 单个页面挂载文件 => main.js
04. 页面的样式
05. 绑定方法 => 和vue中一样
06. 生命周期
四、mpvue中进阶功能的使用
01. 页面跳转
1 - 创建about组件，配置挂载组件main.js
2 - 在app.json中配置该页面
3 - 用 wx.navigateTo 跳转wx.navigateTo(Object object) | 微信开放文档
4 - 删除dist文件夹，重新执行 npm run dev
5 - 传递过程如果有参数传递
02. 使用vuex
1. 下载vuex并在根目录中创建store文件夹
2. 在store文件夹下创建index.js
3. 在store文件夹下创建state.js
4. 在store文件夹下创建actions.js
5. 在store文件夹下创建mutations.js
6. 在store文件夹下创建getters.js
7. 在入口文件main.js中导入
8. 在组件中使用vuex
03. 使用本地存储
04. 微信提示
05. 设置小程序title
1. 调用方法
2. 在main.json中
06. 分享页面 wx.showActionSheet(Object object) | 微信开放文档
三、开始开发项目微信开放文档
1. 获取用户信息
01 - 使用wx.getUserProfile
02 - 通过 wx.login 获取code wx.login(Object object) | 微信开放文档
03 - 获取用户手机号 获取手机号 | 微信开放文档
2. 轮播图
代码
3. 分享给好友
01 - html
02 - js
4. 获取当前页面路径及参数
5. 长按图片进行扫码
四、mpvue开发中遇到的坑！
1. 图片
01 - 不要在根元素上加背景图片
02 - 线上背景图片不生效
2. swiper高度
01 - 直接设置css
02 - 动态修改
五、增加埋点 应用管理 - 帮助文档
1. 进入项目管理
2. 添加应用
3. 创建应用
4. SDK集成
一、mpvue ( Vue in Mini Program )
- mpvue.com
- 美团工程师推出的基于Vue封装的用于开发小程序的框架
- 融合了原生小程序和Vue的特点
- 组件化开发
二、初始化项目
1. 检查node和npm版本
node -v && npm -v
2. 安装vue-cli脚手架
npm install vue-cli -g3. 创建mpvue项目
vue init mpvue/mpvue-quickstart 项目名
// 接下来可一路回车，后续可在project.config.json中进行配置4. 进入改项目目录中，安装依赖
npm install
5. 在 project.config.json 配置 appid
appid : 在微信公众平台注册一个后，即可拥有
6. 执行，生成dist文件夹
npm run dev因为这里是开发小程序，所以执行后并不会打开浏览器，因为没必要～，生成的dist文件夹才是我们所需要的
7. 下载微信开发者工具
稳定版 Stable Build 更新日志 | 微信开放文档
8. 微信开发者工具打开改项目 ( 打开dist文件夹即可 )
9. 即可看到效果
三、mpvue中基本功能的使用
01. 全局配置文件 => app.json小程序配置 | 微信开放文档
02. 单个页面配置文件 => main.json
注 ：单个页面的配置会覆盖全局配置
03. 单个页面挂载文件 => main.js
注 :在每个页面中都需要使用， 组件实例.$mount() 去挂载当前组件,否则对应的页面不能生效
但是，如果只是组件，那么可不写，直接引用，然后component注册即可使用
// 导入vue
import Vue from 'vue'
// 导入组件
import Index from './index.vue'
// 生成一个vue实例
const index = new Vue(Index)
// 挂载到元素
index.$mount()04. 页面的样式
<!-- //?模块说明 => 首页模块 -->
<template><div class='index-layout'><div>index123</div></div>
</template>
<script>
export default {name: 'index'
}
</script>
<style>
/* 如果要设置整个页面样式（例如高度），需要在page中设置每个页面都有一个page包裹着，相当于<page></page>
*/
page {height: 100%;text-align: center;
}
/* 单纯设置这个是不会生效的 */
.index-layout {height: 100%;background-color: #07c160;
}
</style>
05. 绑定方法 => 和vue中一样
06. 生命周期
除了 Vue 本身的生命周期外，mpvue 还兼容了小程序生命周期，这部分生命周期钩子的来源于微信小程序的 Page， 除特殊情况外，不建议使用小程序的生命周期钩子。
四、mpvue中进阶功能的使用
01. 页面跳转
1 - 创建about组件，配置挂载组件main.js
2 - 在app.json中配置该页面
3 - 用 wx.navigateTo 跳转wx.navigateTo(Object object) | 微信开放文档
在mpvue中对vue-router的支持不好，问题较多，页面跳转的是可使用小程序提供的API
- wx.navigateTo() 保留当前页面，可回退
- wx.redirectTo() 不保留，不能回退
- wx.switchTab() 使用于tabBar页面
4 - 删除dist文件夹，重新执行 npm run dev
注 : 如果是新建的页面，那么需要重新打包，否则会报错且不会生效
5 - 传递过程如果有参数传递
传递
let data = {id : 1, name : '张三'}
// id 和 data 即为传递的参数
wx.navigateTo({url: '/pages/about/main?id='+data.id+'&data=' + JSON.stringify(data)
})接收
mounted(){console.log(this.$mp.query.id,JSON.parse(this.$mp.query.data));
}02. 使用vuex
1. 下载vuex并在根目录中创建store文件夹
npm i vuex2. 在store文件夹下创建index.js
import Vue from 'vue'
import Vuex from 'vuex'import state from './state.js'
import mutations from './mutations.js'
import actions from './actions.js'
import getters from './getters.js'Vue.use(Vuex)const store = new Vuex.Store({state,mutations,actions,getters
})export default store3. 在store文件夹下创建state.js
export default {// 初始化状态initName: 'star',initList: []
}
4. 在store文件夹下创建actions.js
export default {getList({commit}) {return new Promise((resolve, reject) => {// axios.get('/api/list').then(res => {// commit('setList', res.data);// resolve(res.data);// }).catch(err => {// reject(err);// })let bool = truelet data = [{name: '张三',age: 18,}]if (bool) {commit('SET_LIST', data)resolve(data);}else{reject('error');}});}
}
5. 在store文件夹下创建mutations.js
export default{// 获取列表数据SET_LIST(state, value) {// 赋值给state中的initListstate.initList = value}
}6. 在store文件夹下创建getters.js
export default {// 拿到state中的initName数据getInitName: state => state.initName,
}7. 在入口文件main.js中导入
import Vue from 'vue'
import App from './App'import store from './store/index.js'
// 将store挂载到Vue实例上，这样所有组件都可以使用store
Vue.prototype.$store = storeVue.config.productionTip = false
App.mpType = 'app'const app = new Vue(App)
app.$mount()
8. 在组件中使用vuex
<!-- //?模块说明 => 首页模块 -->
<template><div class='index-layout' ><div @click="toAbout">跳转到about页面</div></div>
</template>
<script>
import {mapState, mapGetters,mapMutations,mapActions } from 'vuex'
export default {name: 'index',computed:{// 使用mapGetters的getInitName方法获取初始化的initName值...mapGetters(['getInitName']),// 使用mapState拿到initName的值...mapState({initName: state => state.initName,initList: state => state.initList})},methods: {// 拿到mutations中定义的GET_LIST方法...mapMutations(['SET_LIST']),// 拿到actions中定义的getList方法...mapActions(['getList']),},mounted(){// 获取数据console.log(this.initName); //starconsole.log(this.getInitName); //star// 使用actions中定义的getList方法请求，获取数据// 相当于 this.$store.dispatch('getList');this.getList()console.log(this.initList); //{ name: '张三', age: 18}// 使用mutations中定义的SET_LIST方法设置数据// 相当于 this.$store.commit('SET_LIST', { name: '李四', age: 20 })this.SET_LIST({name: '李四',age: 20})console.log(this.initList); //{ name: '李四', age: 20}}
}
</script>
<style>
page {height: 100%;text-align: center;
}
.index-layout {height: 100%;background-color: #07c160;
}
</style>
03. 使用本地存储
// 需要存储的内容。只支持原生类型、Date、及能够通过JSON.stringify序列化的对象。
wx.setStorageSync('key', 'value')
// 获取
wx.getStorageSync('key')04. 微信提示
wx.showToast({title: '请求失败，请检查网络',icon: 'none'
});05. 设置小程序title
1. 调用方法
wx.setNavigationBarTitle({title: '哈哈哈'
});2. 在main.json中
{"navigationBarTitleText": "哈哈哈"
}06. 分享页面 wx.showActionSheet(Object object) | 微信开放文档
share() {wx.showActionSheet({itemList: ['A', 'B', 'C'],success(res) {console.log(res.tapIndex)},fail(res) {console.log(res.errMsg)}})
}三、开始开发项目微信开放文档
1. 获取用户信息
wx.getUserProfile(Object object) | 微信开放文档
01 - 使用wx.getUserProfile
<template><div class='index-layout'><div>index123</div><button @click="getUserProfile"> 获取头像昵称 </button></div>
</template>
<script>
export default {name: 'index',mounted() {wx.login({success(res) {if (res.code) {//发起网络请求，把code传递给后端// wx.request({// url: 'https://example.com/onLogin',// data: {// code: res.code// }// })} else {console.log('登录失败！' + res.errMsg)}}})},methods: {getUserProfile(e) {// 推荐使用 wx.getUserProfile 获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗wx.getUserProfile({desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写// 点击允许success: (res) => {console.log('success',res);},// 点击拒绝fail: (err) => {console.log('fail',err);}})},}
}
</script>注 : 现在已经不建议使用 wx.getUserProfile 或 wx.getUserInfo
02 - 通过 wx.login 获取code wx.login(Object object) | 微信开放文档
mounted() {wx.login({success(res) {if (res.code) {//发起网络请求，把code传递给后端wx.request({url: 'https://example.com/onLogin',data: {code: res.code}wx.setStorageSync('OPEN_ID', res.openId);wx.setStorageSync('UNION_ID', res.unionId);wx.getStorageSync('OPEN_ID')})} else {wx.showToast({title: '请求失败，请检查网络',icon: 'none'});// 设置顶部titlewx.setNavigationBarTitle({title: '冲啊冲啊冲啊'});}}})},
03 - 获取用户手机号 获取手机号 | 微信开放文档
<template><button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">获取手机号</button>
</template><script>
export default {name: 'index',methods: {getPhoneNumber(e) {// 如果点击了拒绝if (e.target.errMsg !== 'getPhoneNumber:ok'){return wx.showToast({title:'用户未同意授权手机号',icon:'none'})}// 如果点击确认cosnt { code, encryptedData, iv } = e.target// 把数据传给后端，后端会去解密拿到手机号的wx.request({url: 'https://example.com/onLogin',data: {appId: '',openId: '',code,encryptedData,iv},method: "post",success: function (res) {console.log(res);}})}}
};
</script>
2. 轮播图
代码
<!-- HTML代码 -->
<swiper class="nav" :circular="swiperOption.circular" :autoplay="swiperOption.autoplay":interval="swiperOption.interval" :duration="swiperOption.duration":display-multiple-items="swiperOption.displayItems"><swiper-item class="item" v-for="(item,index) in smallIconList" :key="index"catchtouchmove='catchTouchMove'><img class="img" :src="item"></swiper-item>
</swiper><JS代码>
<script>
export default{data(){return{// 轮播图片smallIconList:['https://pic2.zhimg.com/v2-e6f99e63f4bcc0ae5d4d717553c5e511_r.jpg','https://n.sinaimg.cn/sinakd10116/760/w640h920/20200808/555d-ixkvvue2643771.jpg'],// 轮播参数swiperOption: {autoplay: true, // 自动轮播circular: true, // 无缝连接轮博interval: 3000, // 多久切换一次duration: 1000, // 展示多久//displayItems: 3, // 同时展示多少个vertical: true, // 是否纵向}}},methods:{// 禁止用户滑动catchTouchMove(res){return false}}
}
</script>3. 分享给好友
01 - html
<buttonopen-type="share"class="btn">分享
</button>02 - js
export default {components: {},data() {return {}},computed: {},onShow() {},// 转发参数// 注 : 和 methods 处在同一层次onShareAppMessage() {const params = {name: 'coder',age: 18}// 分享参数let str = ''for (const key in params) {str += `${key}=${params[key]}&`}str = str.substring(0, str.length - 1)return {title: '分享的title',path: '当前的页面路径 => pages/home/text/main?' + str}},methods: {}
}4. 获取当前页面路径及参数
export default {components: {},data() {return {currentUrl: ''}},computed: {},// 和 mounted 差不多onShow() {this.currentUrl = this.getCurrentPageUrlWithArgs()},onShareAppMessage() { },methods: {// 获取当前页面urlgetCurrentPageUrlWithArgs() {const pages = getCurrentPages() // 获取加载的页面const currentPage = pages[pages.length - 1] // 获取当前页面的对象const url = currentPage.route // 当前页面urlconst options = currentPage.options // 如果要获取url中所带的参数可以查看options// 这里直接返回的话，返回的就是存路径// return url// 拼接url的参数let urlWithArgs = url + '?'for (let key in options) {urlWithArgs += `${key}=${options[key]}&`}urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)return urlWithArgs},}
}5. 长按图片进行扫码
show-menu-by-longpress => 加上这个属性即可
<image class="code-img"src="http://www.baidu.com"show-menu-by-longpress>
</image>四、mpvue开发中遇到的坑！
1. 图片
01 - 不要在根元素上加背景图片
代码
<!-- 提示 -->
<!-- 在 main.js 中设置 Vue.prototype.$imageRootPath = '/static/images/' --><template><div class='topModule-layout' :style="{'background-image':'url('+bgimg+')'}"><img class="top-title-img" :src='topTitleImg' /></div>
</template>
<script>
export default {name: 'topModule',data() {return {bgimg: this.$imageRootPath + 'fansWelfare/top-bgimg.png',topTitleImg: this.$imageRootPath + 'fansWelfare/top-title.png'};}
};结果
02 - 线上背景图片不生效
代码
<!-- 本地生效，线上不生效 -->
<div @click="iconRun" class="buttom-bg" :class="{'no-buttom':showNotAllow}":style="{'background-image':'url('+bgImg+')'}" /><!-- 使用img标签 -->
<div @click="iconRun" class="buttom-bg" :class="{'no-buttom':showNotAllow}"><img :src="bgImg">
</div>2. swiper高度
01 - 直接设置css
.swiper-info-layout{height: 748rpx;/*这个是swiper组件*/.swiper{height: 100%;margin: rem(15) rem(23) 0;}
}02 - 动态修改
html
<template><div class="swiper-info-layout"><swiperclass="swiper"circularautoplay:interval="3000":duration="500":style="{height: swiperHeight }"><swiper-itemv-for="(item, index) in swiperData":key="index"><s-item :data-obj="item"></s-item></swiper-item></swiper></div>
</template>js
data() {return {swiperHeight: '0'}
},
mounted() {this.getEleHeight()
},
methods: {// 获取元素高度getEleHeight() {// 这里要延迟，不然获取不到setTimeout(() => {const query = wx.createSelectorQuery()// 通过类名获取元素，这里获取的是子组件的类名，方便设置query.select('.swiper-item-layout').boundingClientRect()query.exec((res) => {const winWid = wx.getSystemInfoSync().windowWidth // 获取当前屏幕的宽度const height = res[0].height // 获取组件高度const width = res[0].width // 获取组件宽度const swiperHeight = height / width * winWid + 'px' // 计算组件高度this.swiperHeight = swiperHeight // 设置组件高度})}, 100)}
}五、增加埋点 应用管理 - 帮助文档
1. 进入项目管理
2. 添加应用
3. 创建应用
4. SDK集成
微信小程序 - 帮助文档
微信小程序 之 mpvue相关推荐
- 使用Vue开发微信小程序：mpvue框架
[原文地址]mpvue入门系列教程: 如何在mpvue中正确的引用小程序的原生自定义组件 使用mpvue开发小程序教程(六) 使用mpvue开发小程序教程(五) 使用mpvue开发小程序教程(四) 使 ...
- 使用mpvue开发微信小程序——原生微信小程序、mpvue、wepy对比
mpvue是什么?为什么使用它? 目前小程序开发主要有三种形式:原生.wepy.mpvue,其中wepy是腾讯的开源项目:mpvue是美团开源的一个开发小程序的框架,全称mini program vu ...
- 踩坑 微信小程序开发mpvue使用iconfont，顺便解决偶现图标显示不正确
刚刚接触iconfont, 发现它真是个好东西. 使用字体图标的好处: 改颜色,改大小 都可以随时所欲,写个多态按钮分分钟搞定,爽的不要太过分! 阿里的字体图库 https://www.iconfon ...
- 微信小程序结合mpvue从0到1（二）
这篇主要讲讲小程序文件运行顺序,也就是说从入口文件到调用各类交互是怎么实现的. 入口文件解读 1.在mapvue项目中,也就是实际编写的时候我们的项目入口自然就是main.js文件,在main.js文 ...
- 微信小程序基于mpvue的ui组件之选择器
第一次自己开发组件,希望大家能够指出错误的地方或者改进的思路~ 先上图片 主页面 选中状态 返回结果 说明,该UI组件是为小程序而开发的,能够对传入的参数进行处理,最多加载四个选择器,最少一个 创建文 ...
- 微信小程序python后端json错误_微信小程序错误——mpvue小程序：未找到 app.json 中的定义的 pages pages/XXX/XXX 对应的 WXML 文件...
iOS 图形处理 Core Graphics Quartz2D 教程 Core Graphics Framework是一套基于C的API框架,使用了Quartz作为绘图引擎.它提供了低级别.轻量级.高 ...
- mpvue 微信小程序_使用Vue.js开发微信小程序：开源框架mpvue解析
戳蓝字"CSDN云计算"关注我们哦! 作者 | 成全 责编 | 阿秃 转自 | 美团技术团队企业博客 前言 mpvue是一款使用Vue.js开发微信小程序的前端框架.使用此框架,开 ...
- 用Vue.js开发微信小程序：开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- mpvue微信小程序中使用svg图标，并通过代码动态改变图标颜色
微信小程序,mpvue中使用svg图标,并通过代码改变图标颜色 本文主要是mpvue开发小程序的代码,不过微信小程序原生开发应该也是一样的,思路都是通用的,按照这个思路微信小程序原生开发一样可以实现同 ...
最新文章
- ECLIPSE启动不了,报错org.eclipse.swt.SWTException: Invalid thread access
- SpringBoot - 优雅的实现【自定义参数校验】高级进阶
- 转载：Pixhawk源码笔记一：APM代码基本结构
- 项目宝提供的服务器,开源WebSocket服务器项目宝贝鱼CshBBrain V4.0.1 和 V2.0.2发布
- LeetCode MySQL 1581. 进店却未进行过交易的顾客
- python list增删改查_Python 基础list 增删改查 解析
- 成功最快的就是改变你这个思维，拥有这个全新的思维
- DNS解释问题:java.net.UnknownHostException
- gitlab在push代码的时候报错
- 有关ADRV9009的博客资料
- android极光推送问题,极光推送- 常见问题 - 极光文档
- Exchange ProxyShell复现
- 数据库-mysql MHA集群方案测试
- 卸载亚信安全杀毒软件
- 服务器虚拟机化对应云计算的,服务器虚拟化与云计算
- the system can not open the device or file specified解决方案
- 脱胎于沃尔沃的Polestar 2浮出水面，它真能挑战Model 3吗？...
- 选购新风机的关键知识点
- java 三元运算符
- https证书一年多少钱？