小程序学习之旅---解析html代码-wxParse

对于获取到数据中的html代码部分，微信官方是提供了webview的解决方案，但是有些缺陷，不支持个人和海外。

所以有大神封装了wxParse，来解决这一问题。

1、找到demo
https://github.com/icindy/wxParse
2、下载这个demo

3、把demo里面的wxParse目录拷贝到我们的项目里面

4、在我们要用到的页面的js里面引入 wxParse下面的js

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

var article = '<div>我是HTML代码</div>';
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
var that = this;
WxParse.wxParse('article', 'html', article, that, 5);

var WxParse = require('../../wxParse/wxParse.js');
Page({/*** 页面的初始数据*/data: {list: [],host: 'http://a.itying.com/'},requestData (id) {var id = idconsole.log(id)var that = this;var api = 'http://a.itying.com/api/productcontent?id=' + id;wx.request({url: api, //仅为示例，并非真实的接口地址     header: {'content-type': 'application/json' // 默认值},success: function (res) {var data = res.data.result[0];data.img_url = data.img_url.replace(/\\/g, '/');// wxParse解析htmlvar article = data.content;WxParse.wxParse('article', 'html', article, that, 5);that.setData({list: data})}})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {//获取上一个页面的传值console.log(options)var id = options.idthis.requestData(id)// wxParse使用var article = '<div>我是HTML代码</div>';/*** WxParse.wxParse(bindName , type, data, target,imagePadding)* 1.bindName绑定的数据名(必填)* 2.type可以为html或者md(必填)* 3.data为传入的具体数据(必填)* 4.target为Page对象,一般为this(必填)* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)*/var that = this;WxParse.wxParse('article', 'html', article, that, 5);}
})

5、可以在app.wxss引入 wxParse.wxss
@import "wxParse/wxParse.wxss";

我们一如到全局app.wxss里

/**app.wxss**/
@import "wxParse/wxParse.wxss";
.container {height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: space-between;padding: 200rpx 0;box-sizing: border-box;
}
.content{background: #F7F7F7;
}.h2 {text-align: center;height:60rpx;line-height: 60rpx;}
.list{display: flex;flex-wrap: wrap;}
.list .item{width: 33.3%;height: 240rpx;padding:10rpx;box-sizing: border-box;}.list .item text{font-size: 32rpx;color:#666;
}.list .item image{width: 90%;height: 160rpx;margin: 0 auto;
}

6、模板 wxml引入下面代码

<import src="你的路径/wxParse/wxParse.wxml"/>
//这里data中article为bindName
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>

<import src="../../wxParse/wxParse.wxml" />
<view class='p_img'><image src='{{host}}{{list.img_url}}'></image>
</view>
<view class='h2'>{{list.title}}
</view>
<view class='content'><!--固定写法--><template is="wxParse" data="{{wxParseData:article.nodes}}" />
</view>

小程序学习之旅---解析html代码-wxParse相关推荐

【微信小程序学习】搜索音乐页面代码实现
这里记录一下搜索页面的代码,总结复习一下. 搜索音乐的界面有几个重点: 1.搜索框placeholder的后端数据接收 2.热搜榜的格式及数据接收 3.搜索框内容中输入内容,出现搜索展示界面,并且此时 ...
微信小程序学习Course 8 本地缓存API
微信小程序学习Course 8 本地缓存API 本篇随笔主要介绍微信小程序本地缓存API函数,微信小程序可以在本地缓存一些关键词数据,每一条关键词对应一段字符串.微信小程序提供了以下API函数. 8. ...
Android微信小程序原理,微信小程序事件流原理解析
这篇文章主要介绍了微信小程序事件流原理解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下一.什么是事件? 事件是视图层到逻辑层的通讯方式: 事件可 ...
C语言小案例_小程序学习（三）
小程序学习--页面设置案例一 float页面布局效果 1.案例的整体介绍设计一个小程序,利用float布局来实现页面的布局效果.有两种效果分别是上左右下和上左中右下. 2.案例的代码详解 (1) ...
微信小程序学习笔记（1）
微信小程序学习笔记 1.小程序代码结构 2.逻辑层和视图层 3. 小程序的宿主环境(通信模型.运行机制.组件.API) 4. 数据绑定和事件绑定 1.小程序代码结构当开发者新建一个工程时,项目文件包 ...
微信小程序学习（1）-基础开发
学习微信小程序微信小程序学习(1) 微信小程序学习(2) 文章目录学习微信小程序注册和初始化小程序配置 tabbar导航栏模板插样与WXML 循环渲染条件渲染模板微信小程序脚本WXS ...
小程序学习 - 01小程序简介+微信小程序基础
小程序简介小程序是一个全新的.轻量级的移动端应用. 起源在小程序出现之前的移动端开发的解决方案有: Android iOS Windows Phone - 后来退出历史舞台移动端开发发展了一段时 ...
小程序学习之路（持续更新）
小程序学习之路 1. 小程序简介 2. 第一个小程序 3.小程序代码的构成 4.小程序的宿主环境 4.1 小程序的启动过程 4.2 页面渲染过程 5. WXML模板语法 1. 小程序简介小程序与普通 ...
微信小程序学习（2）-云开发
微信小程序-云开发微信小程序学习(1) 微信小程序学习(2) 文章目录微信小程序-云开发初始化+云函数的坑云函数使用老陈段子小程序云存储小程序云数据库初始化插入简单查询更新数据删 ...

小程序学习之旅---解析html代码-wxParse

小程序学习之旅---解析html代码-wxParse相关推荐

最新文章

热门文章