微信小程式空格 換行等問題

2021-10-02 01:23:10 字數 2615 閱讀 8246

1.1 總述

1.2 text標籤

1.3 wxprase外掛程式

文件:說明文件

1.4 其他

2.1 text標籤的使用

根據官方文件,使用text顯示我們想要的文字。

首先在data裡面定義一段資料:

然後在wxml層寫text標籤

在wxss層需要匯入樣式檔案:

程式執行後顯示如下:

可以看出,能做到我想要的效果。

缺點

如果用text文件實現換行和空格的效果,那麼你的資料看起來就很彆扭,也就是你可能要在伺服器段好好拼湊資料,這樣載入起來才能實現效果。

2.2 wxprase的使用

// pages/question/question.js

page(",

},/**

* 生命週期函式--監聽頁面載入

*/onload: function (options) )

wxparse引數說明:

wxml層**如下:(注意要加import )

pages/question/question.wxml

}">} -->

上面**執行後效果如下:

可以看出能渲染部分內容,比如開頭的空格就不能渲染。

2.3wxprase的改進使用

實際上,我要的效果不是原程式中那樣使用,因為我更傾向於使用乙個完整的檔案來儲存資料,也就是說我想直接渲染html檔案,所以用wxprase直接渲染html檔案試試,過程中發現了一些問題。

①首先,書寫乙個html檔案如下:

然後這個檔案在瀏覽器裡執行是這樣的:

可以看出,這個html在瀏覽器中顯示是沒有問題的。然後,把上面的html檔案用wxprase載入,這裡有兩種方法,一種是把上傳到雲儲存然後去,另一種是直接本地儲存然後取出來載入進去。

現在先測試第一種方式(第二種不測試了)

在js層書寫請求的**如下:

// pages/question/question.js

page(,

/*** 生命週期函式--監聽頁面載入

*/onload: function (options) ,

header: ,

success: function (res)

})},

})

wxml層和wxss層**不變,然後渲染後如下圖。

可以看出,wxprase不能直接渲染原生的html檔案,需要對原生檔案修改下才能用,而且不能實現首行空格問題,也就是不能實現我們想要的功能。

不知道是不是自己功力沒到家,到目前為止,text標籤可以解決部分問題,但是對後台資料要求比較麻煩。wxprase的相容性不是很好。我目前的解決方法就是修改後台資料,然後用text標籤重新渲染了。

\n#include\nusingnamespacestd;\n  printf(\"hello world\"); \n    return 0;}
前台需要渲染的測試如下:

發現乙個新大陸,對於部分人可能不怎麼適用,就是我發現,好像資料庫中的文字資料可以保留空格和換行的格式,這樣你請求的資料是不是應該也可以自動顯示空格和換行呢?

於是乎,我繼續修改後台資料,修改後如下:

我在後台資料庫裡直接使用了回車,然後前台什麼都沒變,效果如下:

可以看出,這種方式從後台載入的資料可以直接顯示出回車,但是空格還是要加「 」,同時,view標籤不論什麼方式都不支援。至此,算是能湊合完成這個功能了。

總是感覺自己功力不到家,應該有更好的辦法來顯示空格和回車問題,這個坑前後困擾我三天,今天算是勉強解決了吧。希望大神多提示下,看看有沒有更好的解決方式。

微信小程式換行

1.換行 以往的 標籤不能發揮效用 必須在標籤裡加上 n才能發揮作用 例項 class outer box class inner box 1 第一行文字 n 2 第二行文字 text view 2.空格 與 連續空格 1 單個空格 必須在裡用 t來顯示空格 decode nbsp 我 t 愛 t ...

微信小程式問題

1.js中this物件 在一般的函式中 bindfachange1 function e this.setdata是正確的。但當在函式中有個請求 wx.request 時 formsubmit function e 這樣會報錯誤 this.setdata is not a function.解決方法...

微信小程式問題

一般情況下是權重的問題,可以在button的樣式class名前面再加一層父容器的樣式class wxml button wrap share button open type share button view wxss button wrap share button錯誤原因 一開始我只寫了.sh...