小程序之旅(五)

小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。这是关于小程序的数据本地存储的旅行。

前言

数据存储是非常重要的一个功能，比如页面之间的切换，参数保存是必不可少的。html5的本地存储其实不怎么好使，因为它只支持存储字符串，对于object对象，就只能用序列化的方式来回折腾，俩字——麻烦。
而自从有了小程序的数据存储，写代码的效率明显上来了，这可都是咱小程序的数据存储的功劳哇！

那么来看个需求：

• 做一个按钮。要求点击按钮后可以浏览相册，选择一张图片，可以保存在小程序里。当下次打开小程序时，这张图片还存在。

准备工作

• wx.chooseImage：选择图片
• wx.saveFile(OBJ)：将临时图片保存在本地
• wx.setStorage(OBJ)：保存图片的路径。

当我们预览完一张图片并选中后，首先要将这个临时文件保存在本地，成功后会返回图片的本地保存路径了，然后我们就保存这个路径，下次进来时直接读取就行了。
好了，理顺了思路，我们看一下代码：

// <!--index.wxml-->
<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
    <block wx:else>
      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
    <button bindtap='keepImg'>保存图片</button>
    <button bindtap='deleteImg'>删除图片</button>
    <image src='{{imgPath}}'></image>
  </view>
</view>

//index.js
//获取应用实例
const app = getApp()

Page({
  data: {
    motto: 'Hello World',
    userInfo: {},
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    imgPath:''
  },
  //事件处理函数
  bindViewTap: function() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  keepImg:function(){
    var that = this;
    // 浏览文件
    wx.chooseImage({
      count:1,
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
      sourceType: ['album', 'camera'], //// 可以指定来源是相册还是相机，默认二者都有
      success: function(res) {
        // 返回选定照片的本地文件路径列表，tempFilePath可以作为img标签的src属性显示图片
        var tempFilePaths = res.tempFilePaths;
        console.log(tempFilePaths)
        //将本地照片保存在小程序内
        wx.saveFile({
          tempFilePath: tempFilePaths[0],
          success:function(res){
            var savedFilePath = res.savedFilePath; // 图片成功之后存储在本地的路径
            console.log(savedFilePath)

            if (!wx.getStorageSync('storageImgPath')) { //数据存储，保存图片的路径
              wx.setStorageSync('storageImgPath', savedFilePath)
            }
            that.setData({ imgPath: wx.getStorageSync('storageImgPath')})
          }
        })
      },
    })
  },
  deleteImg:function(){
    wx.removeStorageSync('storageImgPath'); //从数据缓存中删除
    var that = this;
    wx.getSavedFileList({ //获取本地的文件列表
      success:function(res){
        console.log(res.errMsg);
        var files = res.fileList;
        if(res.fileList.length>0){
          // 删除第一张
          wx.removeSavedFile({
            filePath:res.fileList[0].filePath,
            success:function(res){
              // 提示语
              wx.showToast({
                title: '删除成功',
                icon:'success',
                duration:2000
              })
            }
          })
        }
      }
    })
  },
  onLoad: function () {
    if (app.globalData.userInfo) {
      this.setData({
        userInfo: app.globalData.userInfo,
        hasUserInfo: true
      })
    } else if (this.data.canIUse){
      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.userInfoReadyCallback = res => {
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    } else {
      // 在没有 open-type=getUserInfo 版本的兼容处理
      wx.getUserInfo({
        success: res => {
          app.globalData.userInfo = res.userInfo
          this.setData({
            userInfo: res.userInfo,
            hasUserInfo: true
          })
        }
      })
    }
  },
  getUserInfo: function(e) {
    console.log(e)
    app.globalData.userInfo = e.detail.userInfo
    this.setData({
      userInfo: e.detail.userInfo,
      hasUserInfo: true
    })
  }
})

效果