详解基于mpvue的小程序markdown适配解决方案


Posted in Javascript onMay 08, 2018

美团点评近日开源了 mpvue ,这是一个使用 Vue.js 开发小程序的前端框架。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案。

mpvue 的核心目标是提高开发效率,增强开发体验。使用该框架,开发者只需初步了解小程序开发规范、熟悉 Vue.js 基本语法即可上手。框架提供了完整的 Vue.js 开发体验,开发者编写 Vue.js 代码,mpvue 将其解析转换为小程序并确保其正确运行。此外,框架还通过 vue-cli 工具向开发者提供 quick start 示例代码,开发者只需执行一条简单命令,即可获得可运行的项目。

主要特性:

  1. 彻底的组件化开发能力:提高代码
  2. 完整的 Vue.js 开发体验
  3. 方便的 Vuex 数据管理方案:方便构建复杂应用
  4. 快捷的 webpack 构建机制:自定义构建策略、开发阶段 hotReload
  5. 支持使用 npm 外部依赖
  6. 使用 Vue.js 命令行工具 vue-cli 快速初始化项目
  7. H5 代码转换编译成小程序目标代码的能力

实现原理:

Vue代码

详解基于mpvue的小程序markdown适配解决方案

  1. 将小程序页面编写为 Vue.js 实现
  2. 以 Vue.js 开发规范实现父子组件关联

小程序代码

  1. 以小程序开发规范编写视图层模板
  2. 配置生命周期函数,关联数据更新调用
  3. 将 Vue.js 数据映射为小程序数据模型

并在此基础上,附加如下机制

  1. Vue.js 实例与小程序 Page 实例建立关联
  2. 小程序和 Vue.js 生命周期建立映射关系,能在小程序生命周期中触发 Vue.js 生命周期
  3. 小程序事件建立代理机制,在事件代理函数中触发与之对应的 Vue.js 组件事件响应

据悉,mpvue 框架已经在业务项目中得到实践和验证,目前正在美团点评内部大范围使用。mpvue 是基于 Vue.js 源码进行二次开发,在增加了小程序平台的实现同时,保留了跟随 Vue.js 版本升级的能力。

相信开发过小程序的人都知道小程序不支持直接插入dom,那么当我们获取到markdown数据需要渲染的时候就有麻烦。

封装好的 mpvue-wemark 地址

因此github上有很多成熟的小程序markdown渲染方案,但是自己之前写mpvue的时候发现在mpvue上直接用这些库是不行的,因为wxml和vue的写法上是不兼容的,因此就需要对mpvue进行适配。这里我选择wemark这个库。

主要做了几步 :1、把remarkable.js重新打包成ES版本,mpvue默认脚手架是wepack2不支持es commonjs混用 2、把wxml和小程序js层不兼容vue的写法兼容了下。

demo如下

<template>
 <div>
  <wemark :mdData='mdData'/>
 </div>
</template>

<script>
import wemark from "mpvue-wemark";
export default {
 data() {
  return {
   mdData: ''
  };
 },
 components: {
  wemark
 },
 mounted() {
   this.mdData = "## hello, world";

 }
};
</script>

这样,就实现了在mpvue小程序中渲染出markdown的内容了

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
picChange 图片切换特效的函数代码
May 06 Javascript
博客侧边栏模块跟随滚动条滑动固定效果的实现方法(js+jquery等)
Mar 24 Javascript
js 浏览本地文件夹系统示例代码
Oct 24 Javascript
javascript中setTimeout的问题解决方法
May 08 Javascript
jQuery插件jPaginate实现无刷新分页
May 04 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
基于Node的React图片上传组件实现实例代码
May 10 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
AngularJs 禁止模板缓存的方法
Nov 28 Javascript
使用node打造自己的命令行工具方法教程
Mar 26 Javascript
解决vue.js提交数组时出现数组下标的问题
Nov 05 Javascript
JavaScript多种滤镜算法实现代码实例
Dec 10 Javascript
Vue.js 实现微信公众号菜单编辑器功能(一)
May 08 #Javascript
浅谈React 服务器端渲染的使用
May 08 #Javascript
vue.js做一个简单的编辑菜谱功能
May 08 #Javascript
webstorm和.vue中es6语法报错的解决方法
May 08 #Javascript
vue2.0实现移动端的输入框实时检索更新列表功能
May 08 #Javascript
webstorm添加*.vue文件支持
May 08 #Javascript
浅谈vue项目如何打包扔向服务器
May 08 #Javascript
You might like
ThinkPHP入口文件设置及相关注意事项分析
2014/12/05 PHP
一个简单安全的PHP验证码类、PHP验证码
2016/09/24 PHP
PHP7.3.10编译安装教程
2019/10/08 PHP
javaScript - 如何引入js代码
2021/03/09 Javascript
Web前端设计模式  制作漂亮的弹出层
2010/10/29 Javascript
javascript当中的代码嗅探扩展原生对象和原型(prototype)
2013/01/11 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
深入理解选择框脚本[推荐]
2016/12/13 Javascript
详解bootstrap用dropdown-menu实现上下文菜单
2017/09/22 Javascript
Nuxt.js 数据双向绑定的实现
2019/02/17 Javascript
JS中自定义事件的使用与触发操作实例分析
2019/11/01 Javascript
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
用于统计项目中代码总行数的Python脚本分享
2015/04/21 Python
讲解Python中的递归函数
2015/04/27 Python
在Django的session中使用User对象的方法
2015/07/23 Python
使用Python下载歌词并嵌入歌曲文件中的实现代码
2015/11/13 Python
Scrapy框架CrawlSpiders的介绍以及使用详解
2017/11/29 Python
Python安装模块的常见问题及解决方法
2018/02/05 Python
python一行sql太长折成多行并且有多个参数的方法
2018/07/19 Python
不知道这5种下划线的含义,你就不算真的会Python!
2018/10/09 Python
Python中使用遍历在列表中添加字典遇到的坑
2019/02/27 Python
Django ORM 自定义 char 类型字段解析
2019/08/09 Python
python实现知乎高颜值图片爬取
2019/08/12 Python
python并发编程多进程 互斥锁原理解析
2019/08/20 Python
Anaconda3中的Jupyter notebook添加目录插件的实现
2020/05/18 Python
python递归函数用法详解
2020/10/26 Python
Python Http请求json解析库用法解析
2020/11/28 Python
日本动漫周边服饰销售网站:Atsuko
2019/12/16 全球购物
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
仪器仪表检测毕业生自荐信
2013/10/31 职场文书
关于环保的建议书
2014/05/12 职场文书
班级心理活动总结
2014/07/04 职场文书
运动会加油稿100字
2014/09/19 职场文书
部门2014年度工作总结
2014/11/12 职场文书
小学安全教育主题班会
2015/08/12 职场文书
浅谈Redis存储数据类型及存取值方法
2021/05/08 Redis