1. 程式人生 > >weex載入三端本地圖片解決(專案中已實踐)

weex載入三端本地圖片解決(專案中已實踐)

  本文講解內容為weex載入三端本地圖片,所寫解決方案均已驗證,使用sdk版本為0.18.0,其他版本不能保證可行。

  weex載入圖片方式有三種,1.src直接引用base64編碼,2.載入網路圖片,3.載入本地圖片(三端分別放在專案目錄)。前兩種都是比較簡單直接,第三種相對初學者會比較頭疼,尤其對於只掌握一端開發的人員來說,驗證其他端就是比較難的事情。藉著公司專案作為一個android開發人員寫了一些weex頁面功能,有機會和資源來除錯驗證,今天終於完成了三端本地圖片的載入,特此分享和記錄。

weex專案中引用

  1. 由於單端圖片路徑不一致,所以需要寫一個方法來分別轉換路徑: 在weex專案src/mixins目錄中新建index.js檔案,加入如下轉換方法:
        // 獲取圖片在三端上不同的路徑
        // e.g. 圖片檔名是 test.jpg, 轉換得到的圖片地址為
        // - H5      : images/test.jpg        images和所在html路徑同級
        // - Android : local:///test          local代表專案各dpi目錄,一般放在hdpi裡一張即可
        // - iOS     : local///test.jpg       local代表從專案中全域性掃描 test.jpg可放至專案中任何目錄
        get_img_path: function(img_name) {
            let platform = weex.config.env.platform
            let img_path = ''

            if (platform == 'Web') {
                img_path = `images/${img_name}`
            } else if (platform == 'android') {
                // android 不需要字尾
                img_name = img_name.substr(0, img_name.lastIndexOf('.'));
                img_path = `local:///${img_name}`
            } else {
                // img_path = `../images/${img_name}`
                img_path = `local:///${img_name}`
            }

            return img_path
        },
  1. entry.js中配置全域性引用該index.js檔案:
import mixins from '@/mixins'

// register global mixins.
Vue.mixin(mixins)
  1. vue中呼叫get_img_path(‘test.png’)方法:
template中使用:
<image class = "border-image" style="width:200px;height:200px; margin-left:50px;" :src="get_img_path('test.png')"/>
script中使用:
me.get_img_path('test.png')   

三端圖片放置

  1. android端放在hdpi中即可
  2. ios端可放在專案目錄均可,一般放在打包後的js檔案同級目錄
  3. web端放在打包後的html檔案和js檔案同級目錄

上文中已有詳細註釋:

        // 獲取圖片在三端上不同的路徑
        // e.g. 圖片檔名是 test.jpg, 轉換得到的圖片地址為
        // - H5      : images/test.jpg        images和所在html路徑同級
        // - Android : local:///test          local代表專案各dpi目錄,一般放在hdpi裡一張即可
        // - iOS     : local///test.jpg       local代表從專案中全域性掃描 test.jpg可放至專案中任何目錄

以上方案已在專案中應用沒有問題,希望對遇到此問題的同學有所幫助。