weex-eros+vue Android拍照并预览图片踩坑【小白向】

[TOC]

最近做一个移动端的手机拍照预览，碰了不少墙，但还是遇到好心人帮助，成功预览。感谢“小豬仔”~

开干之前，请先阅读 Weex-Eros文档 和 Vue教程

Windows(其他环境暂时没尝试)

根据 Eros 文档要求安装配置环境，安装路径要改D盘的改D盘，不改的一路Next，链接文档里都有我就不放了。(模拟器推荐他们都说好的Genymotion，咱也不知道，咱也不敢问)

• 这里要说一点，如果在中国地区安装 Node.js 推荐淘宝源，（PS：建议安装 Vue-cLi 脚手架 => cnpm install -g vue-cli 回车等待完成）

然后跟着文档“生成项目”并运行，一定要用 Git bash，因为在 Android Studio 导入 Android 项目时需要执行 $ install.sh 下载依赖。 ... Hello Eros也完成后，开始拍照预览。

拍照预览

只管预览不管其他

1. 在Hello.vue里添加button和img：

<template>
    <div style="margin-top: 50px;">
        <div class="div-image" >
            <img :src="myimg" style="margin:24px 0px; width:702px; height:900px; top:24px" >
        </div>
        <div style="padding-left: 24px; position: absolute; bottom: 80px; ">
            <wxc-button text="选  图"
                type="blue"
                style="margin-top:24px"
                @wxcButtonClicked="pickAndUpload"></wxc-button>
            <wxc-button text="拍  照"
                type="blue"
                style="margin-top:24px"
                @wxcButtonClicked="camera"></wxc-button>
        <div>
    <div>
<template>

2. 在export default {}添加如下代码把myimg拿到

data: function () {
    return {
        myimg: '',
    }
},
methods: {
//添加 camera() 方法
}

3. <script>里的methods添加方法，把 demo 里的camera()直接拿过来（路径是eros-demo\src\js\pages\demo\image\index.vue）

camera () {
    this.$image
        .camera({
            imageWidth: 200,
            allowCrop: false//拍完后不编辑，默认为 true
        })
        .then(
        resData => {
            this.myimg = resData[0];//添加一行
            this.$notice.toast({
                message: '拍照成功'
            });
        },
        error => {
            this.$notice.toast({
                message: '拍照失败:' + error
            });
        }
    );
},//最后逗号别忘

好了~

保存，执行$ eros pack android或$ eros pack all，(这里我自己有个小意外，$ eros pack后居然不能用方向键选择？所以只能写全了)，执行$ eros dev，双击模拟器的 Debugger 查看效果。

什么？你要来真的？

你要打包到真机上测试？ 戳这里~戳这里~╭(′▽`)╯

有文档之外的其他疑问，请加球球群：开发者2群 798677297

OK，继续踩坑...

转载于:https://my.oschina.net/EricSUID/blog/3056404