【原】小程序常見問題整理

目錄 (更新於201701130)

 

常見問題

小程序如何做頁面適配

小程序提供了響應式單位rpx(responsive pixel),規定屏幕寬爲750rpx,必須提供視覺稿寬度爲750px,,然後根據視覺稿單位是多少px,還原成小程序就寫多少rpx

 

如何正確的使用image標籤

請點擊查看這份文檔

 

 

如何禁止頁面滑動

方法一:把父級標籤修改爲scroll-view。

wxml

<scroll-view>輸入內容</scroll-view>

wxss

scroll-view{
width:100%;height:100%; }

方法二:設置page.json文件的disableScroll爲屬性true。

{"navigationBarTitleText": "標題","disableScroll": true}

 

本地資源無法通過 WXSS 獲取怎麼解決

background-image:可以使用外部鏈接,或者直接用 base64。

wxss

.test1{background-image:url(data:image/png;base64,iVBORw0K...)}
.test2{background-image: url(http://mat1.gtimg.com/www/images/qq2012/qqLogoFilter.png); }

 

小程序如何跳小程序

方法一:在wx.previewImage(OBJECT)中添加包含小程序碼的圖片,點擊預覽圖片後長按即可識別小程序二維碼並跳轉到小程序。

方法二:使用微信客戶端 6.5.9 版本提供的 wx.navigateToMiniProgram(OBJECT) ,可以打開同一公衆號下關聯的另一個小程序。

 

wxss-僞類選擇器受限制問題

目前僞類只能使用:before、:after、first-child、last-child僞類,屬性選擇器、相鄰選擇器、兄弟選擇器、子選擇器、僞類選擇器、請都放棄。

 

沒有html的br標籤怎麼換行

文本換行直接enter鍵即可。

 

scroll-view標籤bug

1.如果第一個標籤的樣式包含position: absolute會導致整體樣式失效

2.scroll-view上設置flex佈局,其中align-items: center對子元素無效

 

如何模擬觸摸按鈕的hover效果

方法一:所有標籤的觸摸效果可直接使用css僞類:active即可

.btn{background-color:red;}.btn:active{background-color:blue;}

方法二:小程序組件button、navigator自帶hover-class屬性,也可以使用它設置按鈕觸摸效果

<button type="default"hover-class="other-button-hover"> default </button>
<navigator url="/page/navigate/navigate"hover-class="navigator-hover">跳轉到新頁面</navigator>

 

 如何在小程序上覆制文本

對指定要複製的文本使用text標籤,並設置 selectable屬性爲true

<text selectable="true">複製我複製我複製我複製我</text>

 微信哪個版本開始支持小程序碼

6.5.7開始支持掃一掃識別小程序碼的版本

https://mp.weixin.qq.com/s/Vi4Uyg-8CWL_F92B1KaGIw
統計2017-6-19的數據,不支持掃一掃識別小程序碼的用戶爲:
IOS:30.87%
安卓:21.71%
總量:24.05%

所以目前線下鋪設的物料最好使用普通的二維碼

 

  iPhone4等低端機器使用css3樣式不添加-webkit前綴樣式無效

如圖,flex、transform因爲沒有添加-webkit前綴,iPhone4s下頁面錯亂

 

  android手機中,表單input標籤使用css屬性color並設置值爲rgba單位會導致白屏

如圖,input標籤的設置爲color: rgba(0, 0, 0, 0.87),在表單輸入內容後看不見文案,幾乎所有的android機器都中招

 

 

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章