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

        



评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值