上传图片
- uni.chooseImage方法从本地相册选择图片或使用相机拍照。
- 图片参考
<template>
<view>
<view>hello-uni</view>
<button type="primary" @click="chooseImg">上传图片</button>
<image v-for="item in imgArr":src="item" @click="previewImg(item)"></image>
</view>
</template>
<script>
export default{
data(){
return{
imgArr:[]
}
},
methods:{
chooseImg(){
uni.chooseImage({
count:5,
success:res=> {
this.imgArr = res.tempFilePaths
}
})
},
}
</script>
预览图片
- 预览图片
- 预览的methods
previewImg(current){
console.log(current)
uni.previewImage({
current,
urls:this.imgArr,
loop:true, //app中有效
indicator:'Number'
})
}
条件注释实现跨段兼容
- 条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。
- **写法:**以 #ifdef 加平台标识 开头,以 #endif 结尾。
选中要注释的代码段,ctr+alt+/
组件的条件注释
<template>
<view>
<!-- #ifdef H5 -->
<view>我只希望在H5中出现</view>
<!-- #endif -->
<!-- #ifdef MP-WEIXIN -->
<view>我只希望在小程序中出现</view>
<!-- #endif -->
</view>
</template>
api的条件注释
<script>
export default{
methods:{
onLoad(){
// #ifdef H5
console.log("我希望在H5中打印")
// #endif
// #ifdef MP-WEIXIN
console.log("我希望在小程序中打印")
// #endif
}
}
}
</script>
样式的条件注释
<style>
/* #ifdef H5 */
view{
color: hotpink;
}
/* #endif */
/* #ifdef MP-WEIXIN */
view{
color: #007AFF;
}
/* #endif */
</style>