怎么使用mpvue开发微信小程序

本篇内容介绍了“怎么使用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开发微信小程序”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！