微信小程序转化html文本

上篇讲了使用 python 的 flask 框架做一个小程序的 api。
我们还需要把 html 标签转化为微信小程序的 wxml 标签。

方法

有两种方法实现文本的转换。

• wxParse
• towxml

开始操作

wxParse

• 下载 wxParse 插件
  wxParse 地址: wxParse-微信小程序富文本解析自定义组件，支持HTML及markdown解析
  下载之后复制 wxParse 文件夹及其下内容到自己的目录下。
• 引入所需文件
  在文章展示界面下（我的是 more）more.js 中引入 wxParse.js

   var WxParse = require('../../wxParse/wxParse.js');
  

  在 more.wxss 中引入样式 wxParse.wxss

   @import '/wxParse/wxParse.wxss';
  

  在 more.wxml 下引入 wxParse.wxml

   <import src="../../wxParse/wxParse.wxml"/>
  

• 转化与渲染
  在 more.js 中进行数据绑定：

   WxParse.wxParse(bindName,  type, data, target, imagePadding);
   /**
   1.bindName绑定的数据名(必填)
   * 2.type可以为html或者md(必填)
   * 3.data为传入的具体数据(必填)
   * 4.target为Page对象,一般为this(必填)
   * 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
   */
   //例如： WxParse.wxParse('wxshow',  html, parse, this, 10);
  

  在 more.wxml 中进行数据渲染：

  <import src="../../wxParse/wxParse.wxml"/>
  <template is="wxParse" data="{{wxParseData:wxshow.nodes}}"/>
  

• 修改函数
  这时，转化虽然完成了。但是代码却都挤在了一行，原因是小程序中 /r/n 不换行。我们需要修改解析文件 wxDiscode.js
  下的 function strMoreDiscode(str)：

  	function strMoreDiscode(str){
  	// str = str.replace(/\r\n/g,"");  
   	str = str.replace(/([^\r])\n/g, '$1');
   	// str = str.replace(/code/g,"wxxxcode-style");
   		return str;
   	}
   	//注释掉 第一个和第三个
  

  好了，这样使用 WxParse 转化 html 文本就完成了 。

towxml

• 下载插件包
  towxml 地址 HTML、Markdown转微信小程序WXML(WeiXin Markup Language)渲染库

• 引入所需文件
  在 app.js 中引入 main.js

  const Towxml = require('/towxml/main');
  APP({
  	towxml:new Towxml()  
  })
  

  在 more.wxss 中引入样式与主题

  @import '/towxml/style/main.wxss';
  @import '/towxml/style/theme/light.wxss';
  @import '/towxml/style/theme/dark.wxss';
  

  在 more.wxml 中引入渲染模板 entry.wxml

  <import src='../../towxml/entry.wxml'/>
  

• 转化与渲染
  在 more.js 中使用 app.js 中创建的 Towxml 对象进行转换。
  首先绑定数据：

  data{
  	article : {}
  },
  onload: function (options){
  	let article = app.towxml.toJson( parse,'html'）
  	//parse 为传输过来的文本内容， 'html' 为文本格式，可选'marckdown'或'html'
      	article.theme = 'light'  //主题颜色，'light'或'dark'
      	this.setData({
          	article:article
      	})
  }
  

  然后在 more.wxss 中渲染即可:

  <import src="/towxml/entry.wxml"/>
  <template is="entry" data="{{...article}}"/>
  

  转化完成了，但是 html 文本中无法实现代码高亮。
  看了一下，应该是因为 html 类型转换时比 markdown 少了一个高亮转换。

  if (type === 'markdown') {
  		json = new _ts.m.toJson(_ts.md2html(content)).getData();
  		//转md多一个md2html
  	} else if (type === 'html') {
    		 json = new _ts.m.toJson(content).getData();
  	};
  	
  md2html(mdContent) {
  	const _ts = this;
  	return _ts.m.md.render(mdContent);
  }	
  let mdOption = {
  		html: true,
  		xhtmlOut: true,
  		typographer: true,
  		breaks: true,
  		highlight: function (code, lang, callback) {
  		//代码高亮转换
  			return _ts.m.highlight.highlightAuto(code).value;
  		}
  	};
  	_ts.m.md = require('./lib/markdown-it')(mdOption); //这里多一个mdOption
  

• 预览

  
  可以看到，代码段可以一直左滑，需要在 main.wxss 下把 .h2w__pre .h2w__code 中的
  width: 9999px 注释掉。

  ---

• 最后

  emmmm…
  代码无法高亮…
  总感觉看起来难受，下篇解决代码高亮的问题。
  完整地址 - github: Jarry007