整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
言：在實際開發(fā)項目中遇到在微信小程序里需要顯示新聞內(nèi)容，新聞內(nèi)容是通過接口讀取的服務器中的富文本內(nèi)容，是html格式的，小程序默認是不支持html格式的內(nèi)容顯示的，那我們需要顯示html內(nèi)容的時候，就可以通過以下三種方式來進行數(shù)據(jù)渲染。
文檔地址：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'];//對應富文本編輯器的內(nèi)容
that.setData({
content:content
})
}
})
}
})2、在page.wxml中進行數(shù)據(jù)輸出
<rich-text nodes="{{content}}" bindtap="tap"></rich-text>使用方法：
1、插件下載地址：https://github.com/icindy/wxParse
2、將下載后的文件夾放到小程序項目的根目錄
3、在需要加載html內(nèi)容的頁面對應的js文件里引入wxParse
var WxParse = require('../../wxParse/wxParse.js');4、通過調(diào)用WxParse.wxParse方法來設置html內(nèi)容
/**
* WxParse.wxParse(bindName , type, data, target,imagePadding)
* 1.bindName綁定的數(shù)據(jù)名(必填)
* 2.type可以為html或者md(必填)
* 3.data為傳入的具體數(shù)據(jù)(必填)
* 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"/>
<!--放在數(shù)據(jù)需要渲染的地方-->
<view class="wxParse">
<template is="wxParse" data="{{wxParseData:article.nodes}}"/>
</view> 6、這樣就配置完了，具體的樣式是可以通過css去自定義調(diào)整的
如果說直接使用文章詳情頁面，強烈建議直接加載外部網(wǎng)頁，這樣使用起來是去合理化的。
文檔地址：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>需要注意的是個人版的微信小程序沒有這個功能，企業(yè)版的需要在控制臺中先配置相關的業(yè)務域名。
以上就是小程序開發(fā)過程中對富文本編輯器中html渲染的三種常用方法。
我是小程序軟件開發(fā)，每天分享開發(fā)過程中遇到的知識點，如果對你有幫助的話，幫忙點個贊再走唄，非常感謝。
《完》
往期文章分享：
php常用的富文本編輯器，ueditor和kindeditor
個搭建過程大約十分鐘就發(fā)布上線了，雖然，一直存在一些問題，“頁面iframe不支持引用非業(yè)務域名”，這是我網(wǎng)站形式造成的。
如果你是企業(yè)站或比較純粹的博客站等，沒有外部鏈接，那么，這個方法很適用。
那么，直接步入正題吧。
看看怎么用10分鐘就把自己網(wǎng)站轉(zhuǎn)換成微信小程序。
操作步驟：
1、申請SSL證書，轉(zhuǎn)https（不會的看下文，如果你用的是寶塔更簡單，此文未介紹）。
網(wǎng)站防篡改全站http轉(zhuǎn)https完整流程
https://mp.weixin.qq.com/s?__biz=MzU4ODM5MDkyMg==&mid=2247484609&idx=1&sn=6f1baa81167e08037508a62b05e47764&chksm=fddc33a4caabbab214150f70ea1400317e4dbb4c9864dc1c2735c863cafe25b1e931cecdcd15&scene=21#wechat_redirect
2、申請注冊小程序賬號（此方法，個人注冊小程序不行，必須企業(yè)或組織的）
不會注冊的，注冊流程看這里。
https://jingyan.baidu.com/article/295430f13472ee4d7e0050e4.html
個人版后臺無此“業(yè)務域名”配置功能
在綁定“業(yè)務域名”時需上傳文件驗證，所以登錄好服務器后臺或ftp工具。
3、小程序后臺配置好“服務器域名”及“業(yè)務域名”
4、下載微信開發(fā)者工具，找不到的看這里
https://jingyan.baidu.com/article/54b6b9c0d7ec6c6c583b47e4.html
5、安裝好之后，打開微信開發(fā)者工具，選擇小程序項目。點擊管理項目+號增加小程序。
6、桌面隨便新建個文件夾，小程序開發(fā)工具，選擇空白文件夾，并輸入AppID，不要使用云服務，點擊新建即可。
7、打開app.json文件，修改第9行“ ”內(nèi)文字為自己小程序名稱，之后保存。
8、打開路徑/pages/index/index.wxml文件，清空內(nèi)容。
9、將下面代碼粘貼進去，修改為自己的域名，之后保存，可見左側(cè)網(wǎng)站已顯示出來。
<web-view src="https://www.zhibushi.com"></web-view>
10、之后直接點擊上傳即可。
ps:上傳之前可以先真機調(diào)試檢查下是否有如我這樣的問題。
11、最后，回到公眾號服務平臺提交審核即可，審核通過即可提交上線。
前面也說了，我的是因為網(wǎng)站性質(zhì)的問題，所以會不斷跳出“不支持非業(yè)務域名”，一般的企業(yè)站等不會有外部域名，也就不會出現(xiàn)這種問題，當然，換了友鏈之類也會彈出提醒。
當時做這個小程序，也是我第一次接觸小程序。本來只是拿來練手，只是希望能把網(wǎng)站轉(zhuǎn)成小程序，也能方便搜索訪問下載資源，但每打開一個頁面就要關閉下提醒的確有點煩。
后續(xù)也做過幾個不同類型的小程序，更熟悉了小程序的搭建，但上面的問題卻一直沒找到方法解決。除非網(wǎng)站重建或者重建小程序，但那樣就不是我當建站的本意了。
這篇純教程，沒啥資源推薦，最近又補充了點新資源，需要就老地方自取！！
閩南網(wǎng)]
“微信朋友圈廣告年度評選活動”目前正在火熱進行。小編文章中為大家分享了朋友圈廣告年度評選活動地址以及二維碼入口。想要參與這項活動的用戶就進入體驗吧！
微信朋友圈廣告年度評選入口在哪
活動入口：
微信打開下面鏈接https://mp.weixin.qq.com/promotion/res/htmledition/best-moments-2018/index.html
領取步驟：
隨便點擊一個或多個廣告投票，然后點擊下方的生成個人封面，如果提示有紅包就代表中了，沒有提示則沒有中。
用戶注意：
本文這個活動是微信官方的，隨便給3個廣告投票后往下拉生成評委卡。
如果抽到紅包就會顯示金額。如果沒抽到就生成一個二維碼，紅包貌似不是秒到賬的。
再說是微信官方的應該不會耍賴，多等會吧!
小編總結(jié)
微信朋友圈廣告年度評選入口已經(jīng)為大家?guī)怼８鶕?jù)以上方法就能進入領取紅包。感興趣的用戶可以嘗試體驗哦!
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
