WxPictureUpload

功能描述

 该插件实现了仿微信朋友圈发布动态、上传图片、图片浏览，图片删除等功能;该插件必须在YonBuilder移动开发环境下运行。

依赖的插件

UIAlbumBrowser打开照片选择器插件;
imageFilter图片压缩插件;
photoBrowser图片浏览插件;
api.getPicture打开相机内置组件;
vue.js插件作为插件渲染；

快速使用

建议把插件对应文件，放到app项目下html文件下面，然后在index通过api.openFrame 打开wxpictureupload文件；

api.openFrame({
    name:  'wxpictureupload',
    url: './html/wxpictureupload.html',
    rect: {
        marginLeft: 0,
        marginTop: api.safeArea.top,
        marginBottom: 0,
        marginRight: 0
    },
    pageParam: '',
    reload: true,
    bounces: false,
    bgColor: '#e5e5e5',
    vScrollBarEnabled: false,
    hScrollBarEnabled: false
})

在YonBuilder移动开发使用Vue建议使用下面格式

<!-- css： -->
<!-- //这个是为了在数据未加载出来，就显示dom的作用 -->
[v-cloak] {
    display: none;
}

<!-- body -->
    <section id="listimg" v-cloak>
    </section>

    <script>
        apiready = function() {
            //初始化vue
            fnInVue();
        }
        var vm;
        function fnInVue() {
            vm = new Vue({
                el: "#listimg",
                data: {
                    listimg: [],
                    number: 0
                },
                mounted: function() {
                    this.$nextTick(function() {
                        fnInit();
                    });
                },
                methods: {

                }
        }

        var UIAlbumBrowser, imageFilter;

        function fnInit() {
            // 引用多图上传插件
            UIAlbumBrowser = api.require('UIAlbumBrowser');
            // 引用压缩图片插件
            imageFilter = api.require('imageFilter');
        }
    </script>

注意事项：

UIAlbumBrowser插件在ios里面所取到的图片是模糊的必须通过压缩图片，查找到未压缩的图片

if (api.systemType == "ios") { //ios图片还需要经过模糊图片查找到未压缩的图片
    var imgPathsdata = [];
    for (var i = 0; i < ret.list.length; i++) {
        var data = {
            "path": ret.list[i].path
        };
        imgPathsdata.push(data);
    }
    //闭包拿取到ios清晰图片
    fnUIAlbumBrowsertransPath(imgPathsdata, function(cb) {
        for (var i = 0; i < cb.length; i++) {
            var data = {
                "path": cb[i]
            };
            imgPaths.push(data);

        }       
    });
} else {

  //安卓可以直接使用图片

}

//  获取ios 未缩的图片
function fnUIAlbumBrowsertransPath(imgPath, callback) {
    var arr = [];
    for (var i = 0; i < imgPath.length; i++) {
        (function(index) {
            UIAlbumBrowser.transPath({
                path: imgPath[index].path
            }, function(ret, err) {
                if (ret) {
                    arr.push(ret.path);
                    if (arr.length === imgPath.length) {
                        // 闭包结束，回调压缩后面图片数组
                        callback(arr);
                    }
                } else {
                    toast(err.msg);
                }
            });
        })(i);
    }
}

具体使用情使用插件查看，里面都有详情的标注；

是否仍需要帮助？ 请保持联络！
最后更新于 2024/11/18