[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也完成后,开始拍照预览。
拍照预览
只管预览不管其他
- 在
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>
- 在
export default {}
添加如下代码把myimg
拿到
data: function () {
return {
myimg: '',
}
},
methods: {
//添加 camera() 方法
}
<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,继续踩坑...