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

本文主要介绍"如何使用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开发微信小程序" 就介绍到这。希望大家多多支持编程宝库。

vue如何实现事件的销毁：本文主要介绍"vue怎么实现事件的销毁"，希望能够解决您遇到有关问题，下面我们一起来看这篇 "vue怎么实现事件的销毁" 文章。事件的销毁Vue 组件销毁时，会自动解绑它的全部指令及事件监听器，但是仅限于组件本身的 ...