微信小程序 html css xml,微信小程序使用towxml解析html流程及踩坑记录

towxml相对于wxParse还是有一定优势的，首先一些废弃或者过新的标签wxParse是不能解析的，会导致整个页面不能显示，其次 towxml对于界面的排版优化是比较美观的，对于开发者还算比较友好，个人是建议在wxParse没有完善之前使用towxml这个库来解析html以及markdown格式。

towxml使用流程：

1.将towxml库克隆到小程序根目录：git clone https://github.com/sbfkcel/towxml.git

2.在小程序的app.js中引入towxml//app.js

constTowxml=require('/towxml/main');//引入towxml库

App({

onLaunch:function(){

towxml:newTowxml()//创建towxml对象，供小程序页面使用

})

3.在需要的wxml使用模板

我这里使用的是绝对路径，各位同学根据自己的存放路径修改

这里模板名称固定，data固定写法为{{...解析后的变量名}}

4.引入对应的wxss/**pages/index.wxss**/

/**基础风格样式**/

@import'/towxml/style/main.wxss';

/**如果页面有动态主题切换，则需要将使用到的样式全部引入**/

/**主题配色(浅色样式)**/

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

/**主题配色(深色样式)**/

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

5.在对应的JS文件中使用解析//pages/index.js

const app = getApp();

const htmlContent="

亲爱的用户：

您好

Page({

data:{

content:{} //content将用来存储towxml数据

onLoad:function(){

const_ts=this;

let data=app.towxml.toJson(htmlContent,'html');//这里按需填参数 html或者markdown

data.theme='dark';

_ts.setData({

content:data

});

}

})

简单几步就会实现排版清晰的html解析了，但是这里有一点要千万注意，经本人测试，towxml的模板关联的数据参数，一定不能写在对象里，例如:Page({

data:{

htmlObj:{

content:{} //content将用来存储towxml数据

}

)

这样的写法在测试的时候没有任何问题，但是在真机测试的时候会导致数据加载及界面布局错乱！切记引以为鉴

微信小程序 html css xml,微信小程序使用towxml解析html流程及踩坑记录相关推荐

微信签名验证踩坑记录1
@ 微信签名验证踩坑记录1 H5页面打开小程序的签名验证算法,我碰到个问题有点奇葩,不过也算是自己吸取个教训. 在H5页面打开小程序需要调用jssdk签名.这里有个URL是前端传过来的参数,这时候要 ...
微信客服机器人（踩坑记录、SpringBoot、企业微信）
微信客服机器人(踩坑记录.SpringBoot.企业微信) 转载请注明出处:https://www.jjput.com/archives/wei-xin-ke-fu-ji-qi-ren 总体流程当有 ...
微信公众号卡券 addCard 签名错误踩坑记录
微信公众号卡券 addCard 签名错误踩坑记录今天做微信卡券添加卡券一直报签名错误参考了好多文档理了下思路希望对遇到这问题的人有帮助.另外本人小白一名,代码有不规范的地方,请大神勿喷 ...
微信vue路由跳转兼容_Vue微信公众号开发踩坑记录
需求微信授权登录(基于公众号的登录方案) 接入JS-SDK实现图片上传,分享等功能现状及难点采用的Vue框架,前后端分离模式(vue工程仅作为客户端),用户通过域名访问的是客户端,但是微信授权中 ...
Laya小游戏上架Vivo平台踩坑记录（持续更新）
Laya小游戏上架Vivo平台踩坑记录(持续更新) 个人踩坑的一些记录,大佬留情! 一些快捷键: Ctrl+P 搜索脚本文件 Ctrl+Y 恢复操作 Ctrl+Z 撤回操作 Ctrl+F 搜索字段 C ...
企业微信自建集成应用——踩坑记录（二）
问题五描述:在应用配置信息中,配置可信域名(可作为应用OAuth2.0网页授权功能的回调域名),同一个域名,明明之前都可以使用校验成功了,现在把文件放到服务器上还是校验失败原因:由于之前使用的域名 ...
微信退款 java工具类,微信支付中退款踩坑记录
首先附上微信支付的开发者文档其实这里所说的踩坑记录,无非就是微信在开发者文档上的写不太明确,也没有比较官方的demo,在此列出一个可行的demo,供大家下载使用. 主要问题就是在这几步解密上微信的 ...
Laya小游戏上架Oppo平台踩坑记录（持续更新）
Laya小游戏上架Oppo平台踩坑记录(持续更新) 个人踩坑的一些记录,大佬留情! 一些快捷键: Ctrl+P 搜索脚本文件 Ctrl+Y 恢复操作 Ctrl+Z 撤回操作 Ctrl+F 搜索字段 C ...
微信小程序实战 (WXSS:小程序版CSS、WXS:小程序版JavaScript)
上一篇讲了WXML:小程序版HTML,这一篇介绍WXSS:小程序版CSS. 1. WXSS:小程序版CSS. WXSS是一套样式语言,为了便于前端开发的上手,WXSS同HTML的CSS样式文件大部分特 ...

微信小程序 html css xml,微信小程序使用towxml解析html流程及踩坑记录

微信小程序 html css xml,微信小程序使用towxml解析html流程及踩坑记录相关推荐

最新文章

热门文章

微信小程序 html css xml,微信小程序 使用towxml解析html流程及踩坑记录

微信小程序 html css xml,微信小程序 使用towxml解析html流程及踩坑记录相关推荐

最新文章

热门文章

微信小程序 html css xml,微信小程序使用towxml解析html流程及踩坑记录

微信小程序 html css xml,微信小程序使用towxml解析html流程及踩坑记录相关推荐