小程序本身并不太支持html代码,比如html的img、span、p这个时候改这么办呢?需要用到一个小插件WxParse来实现。
小程序高级交流群:336925436
微信小程序支持富文本编辑器代码
一:下载:https://github.com/icindy/wxParse
二:将wxParse文件夹粘贴到项目
三:引入文件
index.js文件中引入
var WxParse = require('../wxParse/wxParse.js');
onLoad: function (e) { var article = '<div>我是HTML代码<img src="http://image.chunshuitang.com/goods/401078.jpg"></img></div>'; WxParse.wxParse('article', 'html', article, that, 5); // 实例化对象 },
index.wxss
@import "../wxParse/wxParse.wxss";
index.wxml
<import src="../wxParse/wxParse.wxml" /> // 引入文件
<view class="content {{tabArr.curBdIndex=='0'? 'active' : ''}}"><template is="wxParse" data="{{wxParseData:article.nodes}}"></view> // 这段放入需要显示的位置
拓展:在实际应用中wx.request和wxParse一起使用有可能会出现,ajax请求属于同步与异步的问题,解决办法如下
onLoad: function (e) { // 设置全局变量 商品id var that = this; that.gid = e.gid; // 获取详情 that.requestGoodsInfo(that.gid); //console.log(that.data); //如果wxparse放这里,会出现数据为空(ajax异步这里是没有数据的); //var article = '<div>我是HTML代码<img src="http://image.chunshuitang.com/goods/401078.jpg"></img></div>'; //WxParse.wxParse('article', 'html', article, that, 5); }, // swiper 幻灯片 // 获取详情 requestGoodsInfo:function(gid){ var that = this; var goodsInfo = api.url.goodsInfo; //console.log(goodsInfo); wx.request({ url: "https://api.xxx.com/goods/index", method:'get', data:{gid:gid}, success:function(res){ //console.log(res.data.data); if(res.data.code ==0){ that.setData({ goods: res.data.data })
// 这里是完美方案 //var article = '<div>我是HTML代码<img src="http://image.chunshuitang.com/goods/401078.jpg"></img></div>'; // 这里是文字版 var article = res.data.data.content; // 这里是ajax请求数据 WxParse.wxParse('article', 'html', article, that, 5); }else{ wx.showLoading({ title: '数据出现故障', duration: 1000, }) } }, fail:function(){ wx.showLoading({ title: '网络出现故障', duration: 1500 }) } }) },
其它:
- wxParse/ -wxParse.js(必须存在) -html2json.js(必须存在) -htmlparser.js(必须存在) -showdown.js(必须存在) -wxDiscode.js(必须存在) -wxParse.wxml(必须存在) -wxParse.wxss(必须存在) -emojis(可选)
小程序支持富文本编辑器代码
使用方法基本与微信小程序一样,有几个地方需要修改
1.文件引入样式:@import "/wxParse/wxParse.acss";
2.引入js:var WxParse= require('../../wxParse/wxParse.js');
3.wxParse.wxml改名wxParse.axml,并且bindload(微信专用) 改为onLoad(支付宝专用)
<template name="wxParseImg"> <image class="{{item.classStr}} wxParse-{{item.tag}}" data-from="{{item.from}}" data-src="{{item.attr.src}}" data-idx="{{item.imgIndex}}" src="{{item.attr.src}}" onLoad="wxParseImgLoad" //此处要改 bindtap="wxParseImgTap" mode="widthFix" style="width:{{item.width}}px;"/> </template>
wxParse.axml改名wxParse.acss
4.wxParse.js 修改
// 微信小程序专用 /** * utils函数引入 **/ import showdown from './showdown.js'; import HtmlToJson from './html2json.js'; // 支付宝小程序专用 import showdown from '/wxParse/showdown.js'; import HtmlToJson from '/wxParse/html2json.js';
5.html2json.js
// 微信小程序专用 var wxDiscode = require('./wxDiscode.js'); var HTMLParser = require('./htmlparser.js'); // 支付宝小程序专用 var wxDiscode = require('/wxParse/wxDiscode.js'); var HTMLParser = require('/wxParse/htmlparser.js');
总结:各种路径修改要正确
小程序高级交流群:336925436