博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
小程序解析HTML5
阅读量:5324 次
发布时间:2019-06-14

本文共 1849 字,大约阅读时间需要 6 分钟。

最近做项目的时候碰到一个问题,就是调用接口获取信息到页面上,内容与HTML5标签一起获取过来了。一起显示在微信端上。一般都是二次开发才有可能出现这种问题。通过查找方法,找到了一个可以把HTML5标签转换微信小程序格式显示html5内容数据插件(wxParse),这种做法缺点就是每一次调用都会执行一次。但是可以把带html标签的数据输出为微信小程序正常显示的格式。

所以以下解决方法。

先把转换的html5的插件下载下来。1.下载地址:

wxParse插件

 

我把下载好的插件放在项目最外面,你们看个人情况。

 

我这里导入这些文件,是那个页面需要转换在然后再导入的。

2.在使用的View中引入WxParse.js模块

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

 

2.1在使用的Wxss中引入WxParse.css

@import "../../../wxParse/wxParse.wxss";

 

3、我这里是直接获取接口的。所以不是模拟数据。(数据绑定)

//在使用的View中引入WxParse模块var WxParse = require('../../../wxParse/wxParse.js');Page({  /**   * 页面的初始数据   */  data: {      },  /**   * 生命周期函数--监听页面加载   */  onLoad: function (options) {    var that = this;    // 内容详情    wx.request({        //这里写你们调用的接口      url: 'http://172.16.1.128:8080/project/xm/liang/lch',      method: 'POST',      header: {        'content-type': 'application/x-www-form-urlencoded',              },      success: function (res) {        //因为我这里从数据库读取出来的的东西,只有content有HTML5标签的。所以我这里单独拿出来给这个字段转换。这里到时候在wxml获取内容就是引入模板进来        WxParse.wxParse('article', 'html', res.data.data.content, that, 5);         //这里直接赋值就可以了 ,到时候在wxml获取信息就 {
{movie:title}} that.setData({ movie: res.data.data, }) }, fail: function (res) { console.log('转换submit fail'); }, complete: function (res) { console.log('转换submit complete'); } }); },

 

4、模版引用

没有引入模板之前的内容

 

我这里正常拿值,很明显这里是没有用 wxparse 模板文件 

不是我们需要的,可以注释这几行代码了,

{
{movie.content}}

重点在这里,这里就是需要转换的内容 

{
{movie.title}}

 

  现在问题已经解决了,刚才那些HTML5标签都转换成功了,已经没有原样输出了,只是我用画笔颜色挡住了内容。 希望这篇文章能够解决你们的问题,初学者写的笔记,哪里不足望各位路过的大神指点。

 

转载于:https://www.cnblogs.com/LCH-M/p/9491964.html

你可能感兴趣的文章
Android SurfaceView实战 带你玩转flabby bird (上)
查看>>
Android中使用Handler造成内存泄露的分析和解决
查看>>
SSM集成activiti6.0错误集锦(一)
查看>>
个人作业
查看>>
下拉刷新
查看>>
linux的子进程调用exec( )系列函数
查看>>
MSChart的研究
查看>>
C# 索引器
查看>>
MySQLdb & pymsql
查看>>
zju 2744 回文字符 hdu 1544
查看>>
XmlDocument
查看>>
delphi 内嵌汇编例子
查看>>
SQL server 2012 安装SQL2012出现报错: 启用 Windows 功能 NetFx3 时出错
查看>>
【luogu P2298 Mzc和男家丁的游戏】 题解
查看>>
前端笔记-bom
查看>>
MATLAB作图方法与技巧(一)
查看>>
上海淮海中路上苹果旗舰店门口欲砸一台IMAC电脑维权
查看>>
Google透露Android Market恶意程序扫描服务
查看>>
给mysql数据库字段值拼接前缀或后缀。 concat()函数
查看>>
迷宫问题
查看>>