wangEditor 小程式展示富文字

2022-09-21 20:39:18 字數 1840 閱讀 6166

1、需求:要在小程式中展示新手指引富文字,吃飽沒事做的後端拉著我要弄乙個pc端編輯富文字的頁面。

3、實現

.vue

createwangeditor() )

.then(res =>)

}this

.editor.create()

}

小程式展示元件

richtext.js

//

components/richtext/richtext.js

component(}},

/** * 元件的初始資料

*/data: ,

/** * 元件的方法列表

*/methods: /g //原本

const iframereg = new regexp('|><\\/iframe>)', 'g')

str = str.replace(iframereg, '')

//獲取video

//const videoreg = /|><\/video>)/g //原本

const videoreg = new regexp('|><\\/video>)', 'g')

const videomatch = (str.match(videoreg) || ).map(e => ())

//獲取audio

//const audioreg = //g //原本

const audioreg = new regexp('', 'g')

const audiomatch = (str.match(audioreg) || ).map(e => ())

const matchary =.concat(...videomatch, ...audiomatch)

let richdata =

if (matchary.length > 0)

})splitdata =newsplitdata

}const newdata = splitdata.map(s =>

} else

})str =restofstr

if (newdata.length > 1)

} }

else

this

.setdata(

} else

return

object.assign(e)

})})

}}})

richtext.wxml

<

block

wx:for

="}"

wx:key

="index"

>

<

rich-text

wx:if

="}"

nodes

="}"

/>

<

video

wx:if

="}"

src="}"

style

="}"

/>

<

view

style

="text-align:center"

wx:if

="}"

>

<

audio

name

="}"

author

="}"

controls

="}"

src="}"

style

="}"

/>

view

>

block

>

4、效果

微信小程式商品展示頁面 仿鹹魚

專案中做了乙個商品發布展示的頁面,記錄下來 想在setdata中更改陣列具體下標中的某個值 let one lowmoney 0 money this.setdata 提問 瀏覽 降價編輯更多 現價 降價至 確定 上架下架刪除 取消 新建 沒有更多了 pages myrelease myreleas...

小程式展示附近的景點,酒店等資訊

有時候會用到像下圖這樣的在某個頁面中用map元件展示附近的一些景點,酒店等 1.map元件 官網介紹 這裡主要用到這幾個屬性 longitude 中心經度 latitude 中心維度 scale 縮放級別 markers 標記點markers陣列物件中包含內容 longitude 經度latitud...

微信小程式中使用ECharts動態展示

圖表的標識 id mychart dom bar bt 資料繫結 ec container mychart dom bar bt canvas id mychart bar ec ec canvas view import as echarts from ec canvas echarts page...