>实现效果
![](https://box.kancloud.cn/5a68b7033db0e22382e97e1915af8023_342x299.gif)
>实现步骤
1. 通过wx.chooseImage实现图片选择切换
2. 得到图片的网络地址,并通过设置isEmpty状态控制图片选择
3. 将图片地址以及isEmpty写入缓存
4. onLoad时读取缓存,加载
>wxml
通过三元表达式用isEmpty状态控制图片加载地址
```
<image src="{{isEmpty? '/swiper/l1.jpg':imgUrl}}" catchtap="c_click" mode="aspectFill"/>
```
>js
```
data: {
isEmpty: true,
imgUrl: ''
},
onLoad(){
var image = wx.getStorageSync("image");
if(image){
var imgUrl = image.imgUrl;
var isEmpty = image.isEmpty;
this.setData({
imgUrl,
isEmpty
})
}
},
c_click(){
wx.chooseImage({
count: 9,
sizeType: ['original','compressed'],
sourceType: ['album','camera'],
success: (result)=>{
/* 拿到图片地址 */
var tempFilePaths = result.tempFilePaths;
/* 将图片地址 isEmpty状态存入缓存 */
/* 其中存入的缓存 key为`image`,value为
{"imgUrl": tempFilePaths, "isEmpty": false} */
wx.setStorageSync('image', {
"imgUrl": tempFilePaths,
"isEmpty": false
});
/* 获取缓存中的key为image的缓存 */
var image = wx.getStorageSync('image');
/* 获得图片地址 */
var imgUrl = image.imgUrl;
/* 获得isEmpty状态 */
var isEmpty = image.isEmpty;
/* 写入data中,等待onLoad获取 */
this.setData({
imgUrl,
isEmpty
});
// console.log()
}
});
}
```
- 小程序配置
- 1 开始第一个小程序
- 2 navigationBar
- 3 flex弹性布局
- 4 响应式长度单位: rpx
- 5 添加新的页面
- 6 配置tabBar
- 7 欢迎页跳转到有tabBar的页面
- 小程序语法
- 1. 数据绑定
- 2. 列表渲染
- 3. 条件渲染
- 4. 小程序和vue data读取方式
- 5. 属性的数据绑定方式
- 6. bindtap与catchtap
- 7. event.targe和event.currentTarget
- 组件&demo
- 1. scroll-view
- 2. swiper
- 3. 制作一个音乐播放组件
- 4. chooseImage配合缓存创建头像
- 5. 获取input表单value(搜索栏实现)
- 6. map
- 7. Form表单提交获取数据
- 小程序API
- 1. 缓存 wx.setStorageSync
- 2. 选择图片 wx.chooseImage
- 3. 加载 wx.showLoading
- 4. 弹出框 wx.showToast
- 5. 分享与获取用户信息
- 项目结构类
- 1. 代码封装
- 2. wx.request请求数据分离
- 3. 组件
- 1. slot
- 2. 父元素传递class到子元素
- 3. 子组件向父组件传值
- 4. wxml中引用wxs封装方法