本篇内容介绍了“怎么使用mpvue开发微信小程序”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!
小程序以离线包方式下载到本地,通过微信客户端载入和启动
mpvue
设计
vue.js
能通过 vue-cli 提供 quick start 示例代码
组件机制
小程序逻辑和视图层代码彼此分离,公共组件提取后无法聚合为单文件入口,组件需分别在视图层和逻辑层引入,维护性差;
组件无命名空间机制,事件回调必须设置为全局函数,组件设计有命名冲突的风险,数据封装不强。
开发者需要友好的代码组织方式,通过 ES 模块一次性导入;
组件数据有良好的封装
多端复用
常见业务类型:
小程序
小程序开发框架无法做到多端复用
通过已有 H5 产品改造为小程序应用
反之
配套设施
mpvue-loader 提供 webpack 版本的加载器
mpvue-webpack-target webpack 构建目标
postcss-mpvue-wxss 样式代码转换预处理工具
px2rpx-loader 样式转化插件
mpvue-quickstart mpvue-quickstart
mpvue-simple 辅助 mpvue 快速开发 Page / Component 级小程序页面的工具
其它
设计思路
小程序 & vue.js 都是逻辑视图层框架
数据 -> 驱动 -> 视图变更
事件 -> 响应 -> 视图变更
参照 vue 编写小程序代码
小程序负责视图层展示
vue.js 集中业务逻辑
vue 数据变更后同步到小程序
生命周期
不同:onReady 后触发 vue mounted
注意
限制
不支持 v-html
模板中不支持复杂的js 表达式——可使用computed
不支持过滤器
控制台提示较少
很多情况下不提示出错原因
模板语法中不支持methods 中的方法
<template> <view v-for="item in costList" > </view> </template> <script> export default { data(){ return{ costList:[] } }, methods: { formatCost(item){ return item.toFixed(2) }, getData(){ let arr = [3.255,4.1,5,15] this.costList = arr } } </script>
可调整为获取数据时直接更改
getData(){ let arr = [3.255,4.1,5,15] // 遍历数组里面的元素,然后格式化一下,添加到 costList里去 arr.map(item => { this.costList.push = this.formatCost(item) }) }
使用 computed
传递更改后的数据
所有页面 created 生命周期函数,加载时一次执行
用 mounted 或者 onLoad 或者 onReady 代替
代码结构
pages
小程序的各个页面
utils
公用的工具代码
“怎么使用mpvue开发微信小程序”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程网网站,小编将为大家输出更多高质量的实用文章!