[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>

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

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

1. <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，继续踩坑...