1. 程式人生 > >Angularjs開發微信單頁面應用時,jssdk選擇圖片wx.chooseImage時回顯是出不來

Angularjs開發微信單頁面應用時,jssdk選擇圖片wx.chooseImage時回顯是出不來

使用Angularjs開發微信單頁面應用時,選擇圖片wx.chooseImage時回顯是出不來,感覺是被Angularjs的$sec攔截,嘗試過一下幾種方法,最終解決。

1、過濾器

新增過濾器

.filter('trustAsResourceUrl', function($sce) {


      return function(input) {


      return $sce.trustAsResourceUrl(input);


    }


  })

<div class="row" ng-repeat="item in imgs track by $index" ng-if="$index%3==0">
        <div class="col col-33"> 
        <img class="full-image" ng-src="{{imgs[$index].path|trustAsResourceUrl}}" on-hold="deleteImge()" ng-click="preview2()"/>
        </div>
        <div class="col col-33">
        <img class="full-image"  ng-src="{{imgs[$index+1].path|trustAsResourceUrl}}" on-hold="deleteImge()" ng-click="preview2()"/>
        </div>
        <div class="col col-33">
        <img class="full-image"  ng-src="{{imgs[$index+2].path|trustAsResourceUrl}}" on-hold="deleteImge()" ng-click="preview2()"/>
  </div>

按理說是應該可以的,但是最終還是不行,如果有大神知道是什麼問題,請指導一下,學學,謝謝

2、自定義指令

這個方法可行,但是本人對自定義指令掌握不好,寫的實在不靈活,就不貼出來獻醜了,如有大神寫過比較好的,也請指導一下。

3、修改配置檔案

這個相對簡單一點

  .config(function ($stateProvider, $compileProvider,$urlRouterProvider,$httpProvider,$ionicConfigProvider) {

     $compileProvider.imgSrcSanitizationWhitelist(/^\s*(http|https|data|weixin|wxLocalresource|wxlocalresource):/);

});

簡單說一下在Android裝置上回顯圖片的地址是weixin://……,iOS裝置回顯的圖片地址是wxLocalresource://……,有的是wxlocalresource://……,不知道是是不是有bug,會有2種我們將上面幾種地址格式加入到 $compileProvider的白名單中,圖片就可以正常顯示了。

4、使用jq動態新增dom節點,實在不敢恭維這種做法,發現操作起來不是一點點的複雜,此時想起,前輩說的一句話,當你開始使用Angularjs是你會罵是誰發明的這玩意,好難用,好複雜,還是jq好,然後回到使用jq,不禁仰天長嘯,艹,操作dom簡直蛋疼。只是說個笑話,其實jq還是有很多領域在使用,也有他的優勢,只是在單頁面的應用中確實不好用,既然都扯了那麼多,那就再說說單頁面應用現在主要的使用的前端js,有React 、Vue 、Angularjs1.X、Angularjs2.X,據說Angularjs2.X比1.X有了很大的優化及改進,一直忙於專案,簡單看了一下發現和1.X語法區別很大,一直未敢嘗試,等用空嘗試一下,再說說React 在facebook推出html5移動app解決方案失敗之後推出React(React-Native),虛擬dom是其最大優點,可以通過虛擬dom編譯成最終想要的目的碼,在網頁端最終就是真實的dom節點,在Android裝置上就可以編譯成Java控制元件,iOS裝置就是iOS控制元件,所以app開發效能比較優勢。最後我們說一下Vue,據說微信小程式的底層就和他基本一致,他結合了Angularjs1.X和React 優點,比較不錯,但是目前沒有嘗試過開發任何商業專案,不知道是否有坑。

微信iOS客戶端將於2017年3月1日前逐步升級為WKWebview核心,需要網頁開發者提前做好網站的相容檢查和適配。如有問題,可參考文末聯絡方式,向我們諮詢。

此前的方案不在支援ios,所以需要做適配

 wx.ready(function () {
                wx.chooseImage({//同樣的獲取本地圖片,但是在ios端使用WKWebview不在支援 不支援 localId 直接顯示圖片
                    success: function (res) {
                        $scope.applicationImg = res.localIds;
                       
                       if(window.__wxjs_is_wkwebview){//判斷核心,參考https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1483682025_enmey
                         //WKWebview核心使用新方法獲取圖片base64,顯示即可參考https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115,獲取本地圖片介面
                                wx.getLocalImgData({
                               localId: $scope.applicationImg[0], // 圖片的localID
                               success: function (res) {
                               	 $(".applicationImg").find("img").attr(
                                            "src",  res.localData);
                               }
                           });
                       }else{//非WKWebview核心照舊寫
                    	   $(".applicationImg").find("img").attr(
                                   "src",  $scope.applicationImg[0]);
                       }
                        
                       
                    }
                });
            });
            wx.error(function (res) {
                alert(res.errMsg);
            });
        

順便說一下再WKWebview核心中wxlocalresource已經不在是wxlocalresource或者wxLocalresource,而是wxLocalResource