微信小程序js添加css樣式

給你個小例子，

從江網(wǎng)站制作公司哪家好，找成都創(chuàng)新互聯(lián)！從網(wǎng)頁設(shè)計、網(wǎng)站建設(shè)、微信開發(fā)、APP開發(fā)、響應(yīng)式網(wǎng)站等網(wǎng)站項目制作，到程序開發(fā)，運(yùn)營維護(hù)。成都創(chuàng)新互聯(lián)于2013年開始到現(xiàn)在10年的時間，我們擁有了豐富的建站經(jīng)驗和運(yùn)維經(jīng)驗，來保證我們的工作的順利進(jìn)行。專注于網(wǎng)站建設(shè)就選成都創(chuàng)新互聯(lián)。

wxml 里面

button bindtap="changeColor" hover-class="none"點(diǎn)擊修改背景顏色/button

js

Page({

data: {

pageBackgroundColor:'#5cb85c'

},

onLoad: function () {},

// 改變背景顏色

changeColor: function() {

var bgColor = this.data.pageBackgroundColor == '#e43a3d' ? '#5cb85c' : '#e43a3d';

// 設(shè)置背景顏色數(shù)據(jù)

this.setData( {

pageBackgroundColor: bgColor

} );

}

})

微信小程序 CSS 選擇器::after和::before的簡單使用

前兩天看 文檔 看到選擇器那塊兒的時候，前面4個基本都能理解： .class ， #id ， element ， element, element ，但后面兩個 ::after 和 ::before （文檔中說，分別表示在view 組件的后面和前面插入內(nèi)容），表示有點(diǎn)沒有理解。于是上網(wǎng)仔細(xì)查了下。以下是筆記

wxml

wxss

js

效果

其實，after和before可以添加的不僅僅是像上面這種字符串，以下是可以添加的常用的內(nèi)容

具體的請參考這篇文章

小程序wxss和css的區(qū)別

WXSS (WeiXin Style Sheets)是一套樣式語言，用于描述 WXML 的組件樣式。

WXSS 用來決定 WXML 的組件應(yīng)該怎么顯示。

為了適應(yīng)廣大的前端開發(fā)者，WXSS 具有 CSS 大部分特性。同時為了更適合開發(fā)微信小程序，WXSS 對 CSS 進(jìn)行了擴(kuò)充以及修改。

與 CSS 相比，WXSS 擴(kuò)展的特性有：

（1）尺寸單位

（2）樣式導(dǎo)入

尺寸單位

rpx（responsive pixel）: 可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)。規(guī)定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

樣式導(dǎo)入

使用@import語句可以導(dǎo)入外聯(lián)樣式表，@import后跟需要導(dǎo)入的外聯(lián)樣式表的相對路徑，用;表示語句結(jié)束。

關(guān)于微信小程序css樣式中calc屬性不生效問題的解決方案

問題：在微信小程序中使用height:calc(xx - xx)設(shè)置元素高度無效

排查原因:calc屬性設(shè)置height或width時，要求父容器有明確的對應(yīng)屬性設(shè)置，當(dāng)父容器沒有設(shè)置時，calc計算無法完成。因為我想設(shè)置高度的元素沒有父容器，所以calc失效。

解決辦法：1.給該元素添加設(shè)置明確高度的父容器。2.直接通過page{height:100%;}解決。

uniapp開發(fā)微信小程序富文本編輯器（樣式仿騰訊文檔）

照著騰訊文檔小程序開發(fā)了微信小程序富文本編輯器組件，這幾天做個整理，如有這個需求可以前往騰訊文檔小程序操作看看實際效果。畢竟參照的是微信自家小程序，無法做到百分百效果，只能按現(xiàn)有開放api盡可能實現(xiàn)。

項目地址：

uniapp插件市場：

editor富文本編輯器組件官方文檔：

否則會受到小程序css影響。小程序本身editor標(biāo)簽有css樣式：

editor {

display: block;

position: relative;

box-sizing: border-box;

-webkit-user-select: text;

user-select: text;

outline: 0;

overflow: hidden;

width: 100%;

height: 200px;

min-height: 200px;

}

that.updatePosition(keyboardHeight)

that.editorCtx.scrollIntoView()

在插入目標(biāo)文字時，將值設(shè)為\n'，可以實現(xiàn)換行

this.editorCtx.insertText({ text: '\n' });

參考：請問editor組件控制拉起鍵盤操作支持嗎？

小程序技術(shù)專員-sanford 2019-09-20

不支持的。iOS無法通過接口拉起鍵盤，必須用戶點(diǎn)擊；安卓則可以。所以，終究是不一致，不行。。

該組件主要為微信editor組件的api調(diào)用集成封裝，因此受到的限制同文檔描述一致，即編輯器內(nèi)支持部分 HTML 標(biāo)簽和內(nèi)聯(lián)樣式，不支持class和id，支持的標(biāo)簽詳見： 。

不滿足的標(biāo)簽會被忽略，div會被轉(zhuǎn)行為p儲存。

這也是為什么在做富文本解析時，僅僅用rich-text組件無法有效還原h(huán)tml內(nèi)容，在解析內(nèi)容的時候就需要將內(nèi)容中的HTML標(biāo)簽轉(zhuǎn)換成微信小程序所支持的標(biāo)簽。因此最好方式是引入市場封裝好的富文本解析插件去解析html。

所以，開發(fā)者需要自行權(quán)衡在做富文本編輯開發(fā)時，是否使用微信自帶的editor組件，或者參考騰訊文檔小程序采用webview內(nèi)嵌網(wǎng)頁等方式去渲染。

小程序富文本編輯器editor初體驗：( )

如果是微信原生開發(fā)，將demo組件中的相關(guān)dom元素標(biāo)簽和api換成微信原生即可。

微信小程序怎么調(diào)試css

微信小程序?qū)?yīng)的wxml文件有對應(yīng)的wxss文件，找到對應(yīng)的文件就可以寫css樣式了。比如index.wxml的css文件就是index.wxss文件。