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

目錄 （更新於201701130）

• 常見問題
• 如何作頁面適配
• 如何正確的使用image標籤
• 如何禁止頁面滑動
• 本地資源沒法經過 WXSS 獲取怎麼解決
• 小程序如何跳小程序
• wxss-選擇器受限制問題
• 沒有html的br標籤怎麼換行
• scroll-view標籤bug
• 如何模擬觸摸按鈕的hover效果
• 如何在小程序上覆制文本
• 微信哪一個版本開始支持小程序碼
• iPhone4等低端機器使用css3樣式不添加-webkit前綴樣式無效
• android手機中，表單input標籤使用css屬性color並設置值爲rgba單位會致使白屏

 

常見問題

小程序如何作頁面適配

小程序提供了響應式單位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機器都中招