微信小程序 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 相关文章推荐
对setInterval在火狐和chrome切换标签产生奇怪的效果之探索,与解决方案!
Oct 29 Javascript
jquery formValidator插件ajax验证 内容不做任何修改再离开提示错误的bug解决方法
Jan 04 Javascript
JS获取页面input控件中所有text控件并追加样式属性
Feb 25 Javascript
jquery选择器之层级过滤选择器详解
Jan 27 Javascript
JavaScript使用focus()设置焦点失败的解决方法
Sep 03 Javascript
jquery如何获取元素的滚动条高度等实现代码
Oct 19 Javascript
JS实现上传图片实时预览功能
May 22 Javascript
es6数据变更同步到视图层的方法
Mar 04 Javascript
vue使用高德地图点击下钻上浮效果的实现思路
Oct 12 Javascript
JavaScript进阶(二)词法作用域与作用域链实例分析
May 09 Javascript
element 动态合并表格的步骤
Dec 31 Javascript
Vue提供的三种调试方式你知道吗
Jan 18 Vue.js
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
WebQQ最新登陆协议的用法
2014/12/22 PHP
PHP借助phpmailer发送邮件
2015/05/11 PHP
php cli配置文件问题分析
2015/10/15 PHP
php使用curl并发减少后端访问时间的方法分析
2016/05/12 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
javascript获取设置div的高度和宽度兼容任何浏览器
2013/09/22 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
JQuery下拉框应用示例介绍
2014/04/23 Javascript
jquery调取json数据实现省市级联的方法
2015/01/29 Javascript
详解JS面向对象编程
2016/01/24 Javascript
AngularJS基础 ng-keydown 指令简单示例
2016/08/02 Javascript
javascript数组遍历的方法实例分析
2016/09/13 Javascript
Radio 单选JS动态添加的选项onchange事件无效的解决方法
2016/12/12 Javascript
详解Python中logging日志模块在多进程环境下的使用
2016/12/26 Javascript
JS判断指定dom元素是否在屏幕内的方法实例
2017/01/23 Javascript
jquery实现放大镜简洁代码(推荐)
2017/06/08 jQuery
js实现文字列表无缝滚动效果
2017/06/23 Javascript
AngularJS监听ng-repeat渲染完成的方法
2018/03/20 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
微信小程序入口场景的问题集合与相关解决方法
2019/06/26 Javascript
vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)
2020/03/07 Javascript
python中的列表推导浅析
2014/04/26 Python
Python中title()方法的使用简介
2015/05/20 Python
分析经典Python开发工程师面试题
2019/04/08 Python
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
加拿大在线隐形眼镜专家:PerfectLens.ca
2016/11/19 全球购物
Nicole Miller官方网站:纽约女装品牌
2019/09/14 全球购物
Overload和Override的区别
2012/09/02 面试题
建筑结构施工专业推荐信
2014/02/21 职场文书
大学新生军训感言
2014/02/25 职场文书
机关出纳岗位职责
2014/04/03 职场文书
健康状况证明模板
2014/10/23 职场文书
2014年幼师工作总结
2014/11/22 职场文书
办公室禁烟通知
2015/04/23 职场文书
于丹论语心得观后感
2015/06/15 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server