小程式之背景圖片的載入

weixin_34138377發表於2017-01-23

說在前面

最近由於專案需要所以學了下小程式，也做了一些東西，隨後便有了以下的一些總結了，先說說關於如何解決小程式背景圖片pc端除錯完美不缺，而在真機除錯的時候卻消失不見的情況。

問題描述

最近做專案的時候要實現一個導航頁面，我的想法是用一張好看的圖片做背景，在pc端除錯的時候效果不錯，但是在真機除錯的時候卻發現那張背景圖片不翼而飛了。

老規矩，以原始碼為導向

index.xml

<view class="container" bindtap="coming"></view>

index.wxss

page{
  height: 100%;
}
.container{
  background-image: url("../resources/images/wait.png");
  background-size:100% 100%;
  background-repeat:no-repeat;
}

在pc端除錯的時候已經可以看到出現背景圖片了，但是在真機除錯的時候卻發現沒有背景圖片，那麼原因是什麼呢？我谷歌了多次之後以及翻看了小程式的文件之後發現這可以說是小程式的一個bug，我相信小程式在不久會解決這個bug，但是我們現在要用到，總不能等到對方法解決了bug我們才用背景圖片吧？對的，這裡提供了幾種解決方法！

  • 解決方法一：在使用背景圖片的時候用網路圖片，就是用外鏈的形式，比如你將這張圖片放到你的伺服器，如：https://xxxx/xxx.jpg；
  • 解決方法二：將背景圖片使用編碼base64進行轉換，可以在這個網址進行 http://tool.css-js.com/base64.html 轉換，如：background-image: url("轉換後得到的編碼文字")，如果多次使用的話可以將該值設定為全域性變數，再在js檔案進行引用即可；
  • 解決方法三：使用image元件而去掉背景圖片；

Note:釋出的這些文章全都是自己邊學邊總結的，難免有紕漏，如果發現有不足的地方，希望可以指出來，一起學習咯，麼麼噠。
開源愛好者，相信開源的力量必將改變世界:
** osc :** https://git.oschina.net/xi_fan
github: https://github.com/wiatingpub

相關文章