整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

微信小程序常用的三种解析html方法,你了解多少

言:在实际开发项目中遇到在微信小程序里需要显示新闻内容,新闻内容是通过接口读取的服务器中的富文本内容,是html格式的,小程序默认是不支持html格式的内容显示的,那我们需要显示html内容的时候,就可以通过以下三种方式来进行数据渲染。

第一种:通过小程序自带的标签进行 rich-text 数据渲染

文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

使用方法:

1、在page.js中将从接口中获取的值传给content

Page({
  data: {
    content:''
  },
  onLoad: function () {
    var that = this;
    wx.request({
        url: '', 
        method: 'POST',
        data: {
            'id':15
        },
        header: {
            'content-type': 'application/json'
        },
        success: function(res) {
            var content = res.data['content'];//对应富文本编辑器的内容
            that.setData({
            	content:content
            })
        }
    })
  }
})

2、在page.wxml中进行数据输出

<rich-text nodes="{{content}}" bindtap="tap"></rich-text>

第二种:使用插件wxParse来解析html


使用方法:

1、插件下载地址:https://github.com/icindy/wxParse

2、将下载后的文件夹放到小程序项目的根目录

3、在需要加载html内容的页面对应的js文件里引入wxParse

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

4、通过调用WxParse.wxParse方法来设置html内容

/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName绑定的数据名(必填)
* 2.type可以为html或者md(必填)
* 3.data为传入的具体数据(必填)
* 4.target为Page对象,一般为this(必填)
* 5.imagePadding为当图片自适应是左右的单一padding(默认为0,可选)
*/
Page({
  data: {
  },
  onLoad: function () {
    var that = this;
    wx.request({
        url: '', 
        method: 'POST',
        data: {
            'id':15
        },
        header: {
            'content-type': 'application/json'
        },
        success: function(res) {
            var article = res.data['content'];
            WxParse.wxParse('article', 'html', article, that,5);
        }
    })
  }
})

5、在页面中引用模板

<!--放在底部-->
<import src="../../wxParse/wxParse.wxml"/>
  
 <!--放在数据需要渲染的地方-->
<view class="wxParse">
  <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
 </view> 

6、这样就配置完了,具体的样式是可以通过css去自定义调整的

第三种,通过webview来加载外部网页

如果说直接使用文章详情页面,强烈建议直接加载外部网页,这样使用起来是去合理化的。

文档地址:https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html


使用方法:

1、在所需页面加载web-view标签,传入外部访问的路径就可以了

<web-view bindload="finish" src="http://www.baidu.com"></web-view>

需要注意的是个人版的微信小程序没有这个功能,企业版的需要在控制台中先配置相关的业务域名。

总结

以上就是小程序开发过程中对富文本编辑器中html渲染的三种常用方法。

我是小程序软件开发,每天分享开发过程中遇到的知识点,如果对你有帮助的话,帮忙点个赞再走呗,非常感谢。

《完》

往期文章分享:

php常用的富文本编辑器,ueditor和kindeditor


个搭建过程大约十分钟就发布上线了,虽然,一直存在一些问题,“页面iframe不支持引用非业务域名”,这是我网站形式造成的。

如果你是企业站或比较纯粹的博客站等,没有外部链接,那么,这个方法很适用。

那么,直接步入正题吧。

看看怎么用10分钟就把自己网站转换成微信小程序。

操作步骤:

1、申请SSL证书,转https(不会的看下文,如果你用的是宝塔更简单,此文未介绍)

网站防篡改全站http转https完整流程

https://mp.weixin.qq.com/s?__biz=MzU4ODM5MDkyMg==&mid=2247484609&idx=1&sn=6f1baa81167e08037508a62b05e47764&chksm=fddc33a4caabbab214150f70ea1400317e4dbb4c9864dc1c2735c863cafe25b1e931cecdcd15&scene=21#wechat_redirect

2、申请注册小程序账号(此方法,个人注册小程序不行,必须企业或组织的)

不会注册的,注册流程看这里。

https://jingyan.baidu.com/article/295430f13472ee4d7e0050e4.html

个人版后台无此“业务域名”配置功能

在绑定“业务域名”时需上传文件验证,所以登录好服务器后台或ftp工具。

3、小程序后台配置好“服务器域名”及“业务域名”

4、下载微信开发者工具,找不到的看这里

https://jingyan.baidu.com/article/54b6b9c0d7ec6c6c583b47e4.html

5、安装好之后,打开微信开发者工具,选择小程序项目。点击管理项目+号增加小程序。

6、桌面随便新建个文件夹,小程序开发工具,选择空白文件夹,并输入AppID,不要使用云服务,点击新建即可。

7、打开app.json文件,修改第9行“ ”内文字为自己小程序名称,之后保存。

8、打开路径/pages/index/index.wxml文件,清空内容。

9、将下面代码粘贴进去,修改为自己的域名,之后保存,可见左侧网站已显示出来。


<web-view src="https://www.zhibushi.com"></web-view>

10、之后直接点击上传即可。

ps:上传之前可以先真机调试检查下是否有如我这样的问题。

11、最后,回到公众号服务平台提交审核即可,审核通过即可提交上线。

前面也说了,我的是因为网站性质的问题,所以会不断跳出“不支持非业务域名”,一般的企业站等不会有外部域名,也就不会出现这种问题,当然,换了友链之类也会弹出提醒。

当时做这个小程序,也是我第一次接触小程序。本来只是拿来练手,只是希望能把网站转成小程序,也能方便搜索访问下载资源,但每打开一个页面就要关闭下提醒的确有点烦。

后续也做过几个不同类型的小程序,更熟悉了小程序的搭建,但上面的问题却一直没找到方法解决。除非网站重建或者重建小程序,但那样就不是我当建站的本意了。

这篇纯教程,没啥资源推荐,最近又补充了点新资源,需要就老地方自取!!

闽南网]

“微信朋友圈广告年度评选活动”目前正在火热进行。小编文章中为大家分享了朋友圈广告年度评选活动地址以及二维码入口。想要参与这项活动的用户就进入体验吧!

微信朋友圈广告年度评选入口在哪

活动入口:

微信打开下面链接https://mp.weixin.qq.com/promotion/res/htmledition/best-moments-2018/index.html

领取步骤:

随便点击一个或多个广告投票,然后点击下方的生成个人封面,如果提示有红包就代表中了,没有提示则没有中。

用户注意:

本文这个活动是微信官方的,随便给3个广告投票后往下拉生成评委卡。

如果抽到红包就会显示金额。如果没抽到就生成一个二维码,红包貌似不是秒到账的。

再说是微信官方的应该不会耍赖,多等会吧!

小编总结

微信朋友圈广告年度评选入口已经为大家带来。根据以上方法就能进入领取红包。感兴趣的用户可以尝试体验哦!