- 解析富文本
wxParse
- github地址:https://github.com/icindy/wxParse
- 使用方法:
1.下载github官方wxParse目录到小程序项目的根目录下
文件结构:
wxParse/
-wxParse.js(必须存在)
-html2json.js(必须存在)
-htmlparser.js(必须存在)
-showdown.js(必须存在)
-wxDiscode.js(必须存在)
-wxParse.wxml(必须存在)
-wxParse.wxss(必须存在)
-emojis(可选)2.引入必要文件
//在要使用的页面中引入WxParse模块
var WxParse = require('/wxParse/wxParse.js');
3.将WxParse.css引入在app.wxss中
@import "/wxParse/wxParse.wxss";
4.将富文本绑定给wxParse
格式:WxParse.wxParse(参数1, 参数2, 参数3, 参数4, 参数5);
参数说明:
- 参数1.bindName绑定的数据名(必填)
- 参数2.type可以为html或者md(必填)
- 参数3.data为传入的具体数据(必填)
- 参数4.target为Page对象,一般为this(必填)
- 参数5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
例如:
var article = '<div>我是HTML代码</div>';
var that = this;
WxParse.wxParse('article', 'html', article, that, 5);
5.模版引用
// 引入模板
//这里data中article为bindName
<template is="wxParse" data="{
{wxParseData:article.nodes}}"/>
``
rich-text
//封装数据请求环境地址的统一
//env.js
module.exports={
//开发环境
dev:{
baseUrl:'http://127.0.0.1:8080'
},
//生产环境
prod:{
baseUrl:'https://api.it120.cc'
},
//测试环境
test:{
baseUrl:'https://api.1909A.com'
}
}
//业务数据请求方法的统一
//商品列表接口
//详情接口
//加入收藏
//搜索接口
//api.js
const {
request }=require('./request.js');
//项目中用到的各种业务接口的封装
module.exports={
//商品分类接口
goodsCate:()=> {
return request('shop/goods/category/all','GET','',true)
},
//banner图接口
getBanner:()=>{
},
//商品详情接口
getDetail:(id)=>{
return request('shop/goods/detail','GET',{
id:id},true)
},
//其他接口....
}
# ajax的封装(ajax:axios,wx.request,xmlHttpRequest,fetch)
//request.js 针对wx.requeste的二次封装
const {
baseUrl } = require('./env.js').prod
//封装ajax
const vipUrl = 'hjl'
module.exports = {
request: function (url, method = "GET", data = {
}, isSubDomain = true) {
let fullUrl = `${baseUrl}/${isSubDomain ? vipUrl : ''}/${
url}`;
wx.showLoading({
title: '玩命加载中',
})
return new Promise((resolve, reject) => {
wx.request({
url: fullUrl,
method,
data,
header: {
'Content-type': 'application/x-www-form-urlencoded'
},
success(res) {
// console.log('res::',res)
if (res.statusCode === 200 && res.data.code === 0) {
resolve(res.data.data)
wx.hideLoading()
} else {
wx.showToast({
title: '接口有问题,请检查',
})
reject('接口有问题,请检查')
}
},
fail(error) {
wx.showToast({
title: '数据接口有问题',
})
reject('数据接口有问题')
}
})
})
}
}