Angularjs开发微信单页面应用时，jssdk选择图片wx.chooseImage时回显是出不来

最新推荐文章于 2025-07-02 19:02:06 发布

gbguanbo

最新推荐文章于 2025-07-02 19:02:06 发布

阅读量6.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： Angularjs 文章标签： angularjs

本文链接：https://blog.csdn.net/gbguanbo/article/details/54286788

Angularjs 专栏收录该内容

2 篇文章

订阅专栏

使用Angularjs开发微信单页面应用时，选择图片wx.chooseImage时回显是出不来，感觉是被Angularjs的$sec拦截，尝试过一下几种方法，最终解决。

1、过滤器

添加过滤器

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

return function(input) {

return $sce.trustAsResourceUrl(input);

}

})

按理说是应该可以的，但是最终还是不行，如果有大神知道是什么问题，请指导一下，学学，谢谢

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