小程序的页面可以是使用wx的语法编写的页面,也可以是第三方html页面,还可以是wx的页面然后使用wxParse解析html的标签最终构成小程序可以加载的wx页面。今天用到了第三种。
首先需要下载wxParse插件,我生成了云盘链接。
下载之后解压并放置在小程序项目的根目录下。如下图。
内部文件无须作任何改动即可使用。所使用页面需要做一下引用。
wxml文件,需要引入wxParse的模板。
<!--news.wxml-->
<import src="../../../wxParse/wxParse.wxml"/>
<view class="container boxsizing">
<view class="content-title">{{title}}</view>//这里是我自己的内容,所以这个页面也可以进行一些修饰
<view class="content-time">{{time}}</view>//这里是我自己的内容,所以这个页面也可以进行一些修饰
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>//这里是模板解析出来的内容
</view>
路径需要依你的项目路径来改变。图中红框所圈的地方是必须要写的。
js文件需要引入wxParse.js
const app = getApp()
const WxParse = require('../../../wxParse/wxParse.js')//注意路径
同时在你的页面js文件中需要调用wxParse的渲染方法,写在你想要渲染页面的地方
/**
* 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(
'article',
'html',
this.data.content,
this,
5);
第一个参数可以参照wxml中template中wxParseData所绑定的值,名字可以换但必须要一致。里边的this.data.content就是你请求到的html编码。可以在页面的wxss中对模板的标签进行修饰,其实他们最后都被解析成了wx的标签。