微信小程序 wxParse插件显示视频问题


Posted in Javascript onSeptember 27, 2019

修改wxParse/html2json.js 文件 ,在 html2json(html, bindName) 方法里

var node = {
        node: 'element',
        tag: tag,
      };

这里使用 node.tag 能够获取标签类型,比如: img、embed、video

这里我的系统后台编辑器使用的是ckeditor 上传视频。生成的便签是:embed

所以加上判断:

if (node.tag =="embed"){

     
      var embUrl = node.attr.src;
      if (node.attr.src.indexOf('http:')==-1){
       embUrl = "http://xxxx.com" + node.attr.src; 
      }
      node.attr.src = embUrl;
      node.tag='video';
     }

插件里只判断了video标签,识别不出来embed 标签,所有视频无法显示,加上判断,这样就可以了。

知识点扩展:微信小程序插件wxParse的使用

由于微信小程序不支持后台富文本编辑器编辑的html,需要使用wxParse 这个插件来解析,下面介绍一下这个插件的使用方法。

1.下载插件

在GigHub上面找到插件Demo,地址为 https://github.com/icindy/wxParse,把Demo里面的wxParse目录拷贝到项目里面.

2.在当前页面的JS里引入wxParse.js

var WxParse = require('../../wxParse/wxParse.js');
Page({
  data: {},
  onLoad: function() {
    var that = this;
    // 映射表情包
    WxParse.emojisInit('[]', "/wxParse/emojis/", {
      "00": "00.gif",
      "01": "01.gif",
      "02": "02.gif",
      "03": "03.gif",
      "04": "04.gif",
      "05": "05.gif",
      "06": "06.gif",
      "07": "07.gif",
      "08": "08.gif",
      "09": "09.gif",
      "09": "09.gif",
      "10": "10.gif",
      "11": "11.gif",
      "12": "12.gif",
      "13": "13.gif",
      "14": "14.gif",
      "15": "15.gif",
      "16": "16.gif",
      "17": "17.gif",
      "18": "18.gif",
      "19": "19.gif",
    });
    var article = `<div>从后端获取的HTML格式文件</div>`;
    WxParse.wxParse('article', 'html', article, that, 5);
    // WxParse.wxParse(bindName, type, data, target, imagePadding);
    // bindName绑定的数据名(必填)
    // type可以为html或者md(必填)
    // data为传入的具体数据(必填)
    // target为Page对象, 一般为this(必填)
    // imagePadding为当图片自适应是左右的单一padding(默认为0, 可选)
  }
})

3.在全局app.wxss引入wxParse.wxss

@import "wxParse/wxParse.wxss";

4.在当前页面wxml中引入wxParse.wxml

<import src="../../wxParse/wxParse.wxml"/> 
 
<view class="wxParse">
  <!-- 这里data中article为bindName -->
  <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view>

总结

以上所述是小编给大家介绍的微信小程序 wxParse插件显示视频问题,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
Hutia 的 JS 代码集
Oct 24 Javascript
键盘控制事件应用教程大全
Nov 24 Javascript
JavaScript如何从listbox里同时删除多个项目
Oct 12 Javascript
js实现鼠标悬浮给图片加边框的方法
Jan 30 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
vuejs2.0运用原生js实现简单的拖拽元素功能示例
Feb 24 Javascript
一文让你彻底搞清楚javascript中的require、import与export
Sep 24 Javascript
关于微信公众号开发无法支付的问题解决
Dec 28 Javascript
Vue简单实现原理详解
May 07 Javascript
vue打包npm run build时候界面报错的解决
Aug 13 Javascript
解决Antd 里面的select 选择框联动触发的问题
Oct 24 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 #Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
Sep 26 #Javascript
vue实现全匹配搜索列表内容
Sep 26 #Javascript
vue实现节点增删改功能
Sep 26 #Javascript
浅谈layui里的上传控件问题
Sep 26 #Javascript
layui实现多图片上传并限制上传的图片数量
Sep 26 #Javascript
layui 阻止图片上传的实例(before方法)
Sep 26 #Javascript
You might like
php绘图之生成饼状图的方法
2015/01/24 PHP
PHP实现动态添加XML中数据的方法
2018/03/30 PHP
PHP代码重构方法漫谈
2018/04/17 PHP
javascript中onclick(this)用法介绍
2013/04/19 Javascript
Js参数值中含有单引号或双引号问题的解决方法
2013/11/06 Javascript
JavaScript?Apple设备检测示例代码
2013/11/15 Javascript
深入理解JavaScript系列(44):设计模式之桥接模式详解
2015/03/04 Javascript
javascript函数式编程程序员的工具集
2015/10/11 Javascript
再谈javascript常见错误及解决方法
2016/09/16 Javascript
jquery动态添加文本并获取值的方法
2016/10/12 Javascript
浅析JS中对函数function的理解(基础篇)
2016/10/14 Javascript
Express与NodeJs创建服务器的两种方法
2017/02/06 NodeJs
jQuery文字轮播特效
2017/02/12 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
security.js实现的RSA加密功能示例
2018/06/06 Javascript
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
Vue 后台管理类项目兼容IE9+的方法示例
2019/02/20 Javascript
[48:48]完美世界DOTA2联赛PWL S3 Magama vs GXR 第一场 12.19
2020/12/24 DOTA
kNN算法python实现和简单数字识别的方法
2014/11/18 Python
python使用PyGame播放Midi和Mp3文件的方法
2015/04/24 Python
Python简明入门教程
2015/08/04 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
Python实现曲线点抽稀算法的示例
2017/10/12 Python
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
如何解决cmd运行python提示不是内部命令
2020/07/01 Python
Python实现画图软件功能方法详解
2020/07/28 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
澳大利亚快时尚鞋类市场:Billini
2018/05/20 全球购物
Levi’s西班牙官方网站:李维斯,著名的牛仔裤品牌
2020/08/20 全球购物
查询优化的一般准则有哪些
2015/03/08 面试题
应用电子专业学生的自我评价
2013/10/16 职场文书
物流合作计划书
2014/01/10 职场文书
西式婚礼主持词
2014/03/13 职场文书