微信小程序 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 相关文章推荐
cnblogs中在闪存中屏蔽某人的实现代码
Nov 14 Javascript
IE不支持getElementsByClassName最终完美解决方案
Dec 17 Javascript
javascript动态添加、修改、删除对象的属性与方法详解
Jan 27 Javascript
jQuery中inArray方法注意事项分析
Jan 25 Javascript
jQuery EasyUI 页面加载等待及页面等待层
Feb 06 Javascript
详解VueJS 数据驱动和依赖追踪分析
Jul 26 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
基于webpack4.X从零搭建React脚手架的方法步骤
Dec 23 Javascript
VUE项目初建和常见问题总结
Sep 12 Javascript
element-ui树形控件后台返回的数据+生成组织树的工具类
Mar 05 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
理解JavaScript中的对象
Aug 25 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
编译问题
2006/10/09 PHP
解析smarty模板中类似for的功能实现
2013/06/18 PHP
php实现mysql连接池效果实现代码
2018/01/25 PHP
php使用mysqli和pdo扩展,测试对比连接mysql数据库的效率完整示例
2019/05/09 PHP
CCPry JS类库 代码
2009/10/30 Javascript
利用js实现遮罩以及弹出可移动登录窗口
2013/07/08 Javascript
html+js实现动态显示本地时间
2013/09/21 Javascript
a标签的href与onclick事件的区别详解
2014/11/12 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
2015/05/15 Javascript
使用Bootstrap框架制作查询页面的界面实例代码
2016/05/27 Javascript
jQuery 利用$.ajax 时获取原生XMLHttpRequest 对象的方法
2016/08/25 Javascript
使用Angular缓存父页面数据的方法
2017/01/03 Javascript
浅谈关于axios和session的一些事
2017/07/13 Javascript
微信小程序实现长按删除图片的示例
2018/05/18 Javascript
Vue组件之极简的地址选择器的实现
2018/05/31 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
openlayers实现图标拖动获取坐标
2020/09/25 Javascript
[05:15]2018年度CS GO社区贡献奖-完美盛典
2018/12/16 DOTA
用Python编写简单的微博爬虫
2016/03/04 Python
用Python写一段用户登录的程序代码
2018/04/22 Python
python处理数据,存进hive表的方法
2018/07/04 Python
浅谈Python脚本开头及导包注释自动添加方法
2018/10/27 Python
python3中property使用方法详解
2019/04/23 Python
通过实例学习Python Excel操作
2020/01/06 Python
Python tkinter模版代码实例
2020/02/05 Python
使用Python爬取弹出窗口信息的实例
2020/03/14 Python
深入了解python列表(LIST)
2020/06/08 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
python爬取抖音视频的实例分析
2021/01/19 Python
css 如何让背景图片拉伸填充避免重复显示
2013/07/11 HTML / CSS
德国家具折扣店:POCO
2020/02/28 全球购物
自荐信格式技巧有哪些呢
2013/11/19 职场文书
美发活动策划书
2014/01/14 职场文书
小学三年级数学教学反思
2014/01/31 职场文书
局领导领导班子四风对照检查材料
2014/09/27 职场文书
店铺转让协议书
2015/01/29 职场文书