angularjs+微信，解決chooseImage不能預覽的問題

在wx.chooseImage的success回調中直接進行數據綁定，卻在ng-repeat時發現ng-src不加載微信localId的問題，類似wxLocalResource://imageid987654321123456789

 

經過調試，發現實際微信的localId被轉化成unsafe:wxLocalResource://imageid987654321123456789了

 

然后嘗試用$sce.trustAsResourceUrl('wxLocalResource://imageid987654321123456789')解決，可還是unsafe...

 

后來發現了$compileProvider，發現可以用imgSrcSanitizationWhitelist把微信那wxLocalResource加入白名單，然而並不匹配，陰差陽錯把他改成wxlocalresource卻匹配上了！

 

尷尬、正則沒學好，不知道是怎么個原因，感覺像是safari的正則有問題。。

 

后面又被正則坑了，可能是瀏覽器或是我的問題，在iOS的微信里，https?竟然匹配不到https，加了白名單代碼后，連https的圖都加載不出來了，就換了個低檔的寫法，趕緊把這問題先解決了，沒想到把這解決了之后，微信的localId圖也給加載出來了～～～猜測微信最終還是會去拿localId去請求http圖吧，代碼大概就像下面這樣寫，把白名單搞一下，就可以愉快的輸出微信的localId圖啦！！！！

    var app = angular.module('app', []).config( ['$compileProvider',function( $compileProvider ){
        $compileProvider.imgSrcSanitizationWhitelist(/^\s*(http|https|data|wxlocalresource):/);
    }]);

 

但是！用安卓調試的時候。。。發現安卓是這么個套路:weixin://resourceid/xxxxxx 然而為此又改了以上白名單正則。。還是失敗。最后還是寫指令吧，指令如下：

 

    app.directive('wxImg', function() {
        return {
            restrict:'E',
            replace :true,
            template:'<img src="">',
            link: function(scope, elem, attr) {
　　　　　　　　　　$scope.$watch('per',function(nowVal){
　　　　　　　　　　　　elem.attr('src',nowVal);
　　　　　　　　　　})
            }
        };
    });

 

使用方法如下：

<wx-img ng-repeat="per in localids"></wx-img>

我是在wx.chooseImage的回調里把localIds綁定給scope的localids了，這樣直接src是可以避開angular的安全檢測的，如果$scope.localids有變化（比如刪除了某張圖），用這個指令也是會更新的，所以之前的白名單代碼也是可以刪掉的啦～