微信小程序 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 相关文章推荐
javascript中取前n天日期的两种方法分享
Jan 26 Javascript
基于socket.io和node.js搭建即时通信系统
Jul 30 Javascript
jquery操作HTML5 的data-*的用法实例分享
Aug 17 Javascript
javascript检测是否联网的实现代码
Sep 28 Javascript
JavaScript实现表格快速变色效果代码
Aug 19 Javascript
js实现新浪微博首页效果
Oct 16 Javascript
AngularJS实现Model缓存的方式
Feb 03 Javascript
Javascript实现图片轮播效果(二)图片序列节点的控制实现
Feb 17 Javascript
AngularJS表单基本操作
Jan 09 Javascript
JS简单添加元素新节点的方法示例
Feb 10 Javascript
vue的传参方式汇总和router使用技巧
May 22 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 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生成SessionID和图片校验码的思路和实现代码
2009/03/10 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
根据key删除数组中指定的元素实现方法
2017/03/02 PHP
PHP中in_array的隐式转换的解决方法
2018/03/06 PHP
PHP使用HTML5 FormData对象提交表单操作示例
2019/07/02 PHP
PHP实现简单注册登录系统
2020/12/28 PHP
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
js中style.display=&quot;&quot;无效的解决方法
2014/10/30 Javascript
iframe里使用JavaScript控制主页转向的方法
2015/04/03 Javascript
解决js图片加载时出现404的问题
2020/11/30 Javascript
JavaScript计划任务后台运行的方法
2015/12/18 Javascript
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
详解使用vuex进行菜单管理
2017/12/21 Javascript
Vue2.0学习系列之项目上线的方法步骤(图文)
2018/09/25 Javascript
使用Vue做一个简单的todo应用的三种方式的示例代码
2018/10/20 Javascript
微信小程序云开发如何使用npm安装依赖
2019/05/18 Javascript
JavaScript将数组转换为链表的方法
2020/02/16 Javascript
[02:11]DOTA2上海特级锦标赛主赛事第二日RECAP
2016/03/04 DOTA
Python中Collection的使用小技巧
2014/08/18 Python
TensorFlow实现模型评估
2018/09/07 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
基于django micro搭建网站实现加水印功能
2020/05/22 Python
Python从文件中读取数据的方法步骤
2020/11/18 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
马来西亚最大的在线隐形眼镜商店:MrLens
2019/03/27 全球购物
联想印度官方网上商店:Lenovo India
2019/08/24 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
什么是触发器(trigger)? 触发器有什么作用?
2013/09/18 面试题
初中生期末考试的自我评价
2013/12/17 职场文书
网络研修随笔感言
2014/02/17 职场文书
学生会主席竞聘书
2014/03/31 职场文书
弘扬雷锋精神演讲稿
2014/05/10 职场文书
小学节能减排倡议书
2014/05/15 职场文书
机关党员公开承诺书
2014/08/30 职场文书
2016教师校本研修心得体会
2016/01/08 职场文书