微信小程序开发之路⑥

37、微信小程序文件操作

文件操作是小程序把文件存储到本地和查找本地消息的一种方法
文件操作属性：参考在线字典

<view class="container">
    <view class="page-section">
        <view class="control-title">保存文件</view>
        <button bindtap="saveFile">保存文件</button>
    </view>
    <view class="page-section">
        <view class="control-title">获取本地的缓存临时文件 </view>
        <button bindtap="getFileInfo">获取本地的缓存临时文件</button>
    </view>
    <view class="page-section">
        <view class="control-title">获取以存储的文件列表</view>
        <button bindtap="getSavedFiledList">获取以存储的文件列表</button>
    </view>
    <view class="page-section">
        <view class="control-title">清楚本地缓存文件</view>
        <button bindtap="removeSavedFile">清楚本地缓存文件</button>
    </view>

    <view class="page-section">
        <view class="control-title">打开文档</view>
        <button bindtap="openDocument">文档打开</button>
    </view>
</view>

// pages/index/index.js
Page({
    /**
     * 页面的初始数据
     */
    data: {},
    /**
     * 打开文档
     */
    openDocument() {
        //需要先下载文档
        wx.downloadFile({
            url: '', //docx,xls,ppt,pdf
            success(res) {
                const filePath = res.tempFilePath
                wx.openDocument({
                    filePath: filePath,
                    success(res) {
                        console.log('文件已经打开')
                    },
                })
            },
        })
    },
    /**
     * 清楚本地缓存文件
     */
    removeSavedFile() {
        //获取文件
        const fs = wx.getFileSystemManager()
        fs.getSavedFileList({
            success(res) {
                console.log(res)
                //删除
                if (res.fileList.length > 0) {
                    for (let i = 0; i < res.fileList.length; i++) {
                        fs.removeSavedFile({
                            filePath: res.fileList[i].filePath,
                            success(res) {
                                console.log('[success]', res)
                            },
                            fail(res) {
                                console.log('[fail]', res)
                            },
                            complete(res) {
                                console.log('[complete]', res)
                            },
                        })
                    }
                }
            },
        })
    },
    /**
     * 获取以存储的文件列表
     */
    getSavedFiledList() {
        const fs = wx.getFileSystemManager()
        fs.getSavedFileList({
            success(res) {
                console.log(res.fileList)
            },
        })
    },
    /**
     * 获取本地临时缓存文件
     *
     */
    getFileInfo() {
        wx.chooseImage({
            success: function (res) {
                const fs = wx.getFileSystemManager()
                fs.getFileInfo({
                    filePath: res.tempFilePaths[0],
                    //size以字节为单位
                    //digest 计算算法 md5/sha1 之后的一个值，默认md5
                    success(res) {
                        console.log(res.size)
                    },
                })
            },
        })
    },
    saveFile() {
        wx.chooseImage({
            success(res) {
                const tempFilePaths = res.tempFilePaths
                console.log(tempFilePaths)
                // 保存
                // 先创建一个对象
                const fs = wx.getFileSystemManager()
                fs.saveFile({
                    tempFilePath: tempFilePaths[0],
                    success(res) {
                        const savedFilePath = res.savedFilePath
                        console.log(savedFilePath)
                        //     //图片存储后的路径
                        //   //windows：C:\Users\wangyan\AppData\Local\微信web开发者工具\User Data
                    },
                })

                // 保存到相册
                // wx.saveImageToPhotosAlbum({
                //   filePath: tempFilePaths[0],
                //   success(res) {
                //     const saveFielPath = res.savedFilePath
                //     console.log(saveFielPath)
                //   }

                // })
                //保存至视频目录

                // wx.saveVideoToPhotosAlbum({
                //   filePath: tempFilePaths[0],//视频文件的临时路径
                //   success(res){
                //     wx.showToast({
                //       title: '保存成功',
                //     })
                //   }
                // })
            },
        })
    },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148

38、微信小程序数据缓存(实现页面数据的交换)

本地数据的存储是通过数据缓存来实现的。通过键值对的方式来完成存储
数据缓存的生命周期跟小程序本身一致

数据存储大小上线为 10m

数据缓存分同步和异步双接口调用

<button bindtap='setStorage'>设置缓存</button>
<button bindtap='removeStorage'>移除缓存</button>
<button bindtap='getStorageInfo'>获取当前缓存里的数据信息</button>
<button bindtap='clearStorage'>清除缓存</button>


Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 清除缓存数据
   * Sync:同步
   */
  clearStorage(){
    wx.clearStorage()
  },
  /**
   * 设置缓存
   */
  setStorage(){
    wx.setStorage({
      key: 'name',
      data: 'tom',
      success(){
        console.log('storage is saved')
      }
    })
  },
  /**
   * 移除缓存
   */
  removeStorage(){
    wx.removeStorage({
      key: 'name',
      success: function(res) {
        console.log('storage name is none')
      },
    })
  },
  /**
   * 获取缓存里的数据信息
   */
  getStorageInfo(){
    wx.getStorageInfo({
      success: function(res) {
        console.log(res)
      },
    })
  },
  /**
   * 生命周期的加载
   */
  onLoad(options){
    wx.getStorage({
      key: 'storageVal',
      success: function(res) {
        console.log(res)
      },
    })
  }
})

// demo
<view class='container'>
<view class='btn-area'>
  <navigator url='/pages/index/index'>跳转到新的页面</navigator>
  <view class='section'>
    <input placeholder='输入信息' bindblur='getInput'></input>
    <button bindtap='navi'>存储</button>
  </view>
</view>
</view>

Page({
  inputVal:'',
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 跳转
   */
  navi(){
    wx.setStorageSync('storageVal', this.inputVal)
  },
  /**
   * 获取数据
   */
  getInput(e){
    console.log(e.detail.value)
    this.inputVal = e.detail.value
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98

39、微信小程序数据传输的方式

数据传输方式有如下几种

1.本地缓存传输

2.导航标记传输  String
    不能传复杂的数据类型（Array, Object）
3.api 跳转 (外部数据来)
1
2
3
4
5

<button bindtap='setStorage'>设置缓存</button>
<button bindtap='removeStorage'>移除缓存</button>
<button bindtap='getStorageInfo'>获取当前缓存里的数据信息</button>
<button bindtap='clearStorage'>清除缓存</button>

Page({
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 清除缓存数据
   * Sync:同步
   */
  clearStorage(){
    wx.clearStorage()
  },
  /**
   * 设置缓存
   */
  setStorage(){
    wx.setStorage({
      key: 'name',
      data: 'tom',
      success(){
        console.log('storage is saved')
      }
    })
  },
  /**
   * 移除缓存
   */
  removeStorage(){
    wx.removeStorage({
      key: 'name',
      success: function(res) {
        console.log('storage name is none')
      },
    })
  },
  /**
   * 获取缓存里的数据信息
   */
  getStorageInfo(){
    wx.getStorageInfo({
      success: function(res) {
        console.log(res)
      },
    })
  },
  /**
   * 生命周期的加载
   */
  onLoad(options){
    wx.getStorage({
      key: 'storageVal',
      success: function(res) {
        console.log(res)
      },
    })
  }
})


<view class='container'>
<view class='btn-area'>
  <navigator url='/pages/index/index'>跳转到新的页面</navigator>
  <view class='section'>
    <input placeholder='输入信息' bindblur='getInput'></input>
    <button bindtap='navi'>存储</button>
  </view>
</view>
</view>

Page({
  inputVal:'',
  /**
   * 页面的初始数据
   */
  data: {
  },
  /**
   * 跳转
   */
  navi(){
    wx.setStorageSync('storageVal', this.inputVal)
  },
  /**
   * 获取数据
   */
  getInput(e){
    console.log(e.detail.value)
    this.inputVal = e.detail.value
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97

40、罗盘

<view class='container'>
  <view class='text'>
    <text>请您远离磁场干扰源</text>
    <text>并按下图所示校准指南针</text>
  </view>
  <view class='img'>
  <image src='../../images/tip.jpg' class='tip-pic'></image>
  <button class='tip-btn' bindtap='jump'>我知道了</button>
  </view>
</view>

  jump(){
    wx.redirectTo({
      url: '../compass/compass',
    })
  },

<view class='container'>
  <view class='text'>
    <text>{{direction}}</text>
    <text>{{angle}}°</text>
  </view>
  <view class='pic'>
    <image src='../../images/compass.png' style='transform:rotate({{rotate}}deg)'></image>
  </view>
</view>


// pages/compass/compass.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    direction:"--",
    angle:"--",
    rotate:''
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //开始罗盘操作
    let that = this
    wx.onCompassChange(function(res){
      //罗盘数据保留小数2位
      //console.log(res)
      let directions = res.direction.toFixed(2)
      let radios =res.direction.toFixed(0)
      that.setData({
        angle:directions,
        rotate: 360 - radios,
        direction: check(radios)
      })
    })
    //判断手机是否有陀螺仪
    /**
     * 外部检测，如果没有陀螺仪，代码是不会进入wx.onCompassChange事件的
     * 使用settimeout包裹代码，负责代码立即执行都会弹窗
     */
    setTimeout(() => {
      if (that.data.direction == '--' && that.data.angle == '--') {
        wx.showToast({
          title: '您的手机没有带电子罗盘或被禁用',
          icon: 'loading',
          duration: 5000,
          mask: true
        })
      }
    }, 3000);
    /**
       * 方向判断函数
       */
    function check(i){
      if (15 < i && i <= 75) {
        return '东北'
      } else if (75 < i && i < 105) {
        return '正东'
      } else if (105 < i && i < 195) {
        return '东南'
      } else if (165 < i && i < 195) {
        return '正南'
      } else if (195 < i && i <= 255) {
        return '正西'
      } else if (285 < i && i < 345) {
        return '西北'
      } else {
        return '正北'
      }
    }
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    return {
      title:'我现在面向 '+ this.data.direction+" 方向，点我使用迷你指南针为您指引方向！",
      path:'/pages/compass/compass'
    }
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102

wifi

<view class='container'>
  <view class='text'>一键连接WIFI</view>
  <form bindsubmit='connectWifi'>
    <view class='form'>
      <view class='section'>
        <text>wifi账户</text>
        <input placeholder='请输入wifi账户' name='wifiname'></input>
      </view>
      <view class='section'>
        <text>wifi密码</text>
        <input placeholder='请输入wifi密码' name='wifipwd' password></input>
      </view>
      <button form-type='submit' type='primary'>连接WIFI</button>
      <button bindtap='startSearch'>搜索附件wfii</button>
  </view>
  <view>
    <block wx:for='{{wifiList}}' wx:key='{{index}}'>
      <view>
        <text>{{item.SSID}}</text>
      </view>
    </block>
  </view>
  </form>
</view>

// pages/index/index.js
Page({
  userWifiName: '',
  userWifiPwd: '',
  /**
   * 页面的初始数据
   */
  data: {
    wifiList:[]
  },
  /**
   * 连接wifi
   */
  connectWifi(e){
    //获取用户输入的wifi账户和密码
   this.userWifiName = e.detail.value.wifiname
   this.userWifiPwd = e.detail.value.wifipwd
   let that = this
   //检测手机型号，获得系统信息
   wx.getSystemInfo({
     success: function(res) {
       let system = ''
       if(res.platform == 'android'){
         system = parseInt(res.system.substr(8))
       }
       if(res.platform == 'ios'){
         system = parseInt(res.system.substr(4))
       }
       if(res.platform == 'andorid' && system < 6){
         //提示手机不支持
         wx.showToast({
           title: '安卓当前手机版本不支持',
         })
         return
       }
       if(res.platform == 'ios' && system < 11.2){
         wx.showToast({
           title: '苹果手机当前版本不支持',
         })
         return
       }
       //初始化Wifi模板
       that.startWifi()
     },
   })
  },
  /**
   * 初始化WIFI模块
   */
  startWifi(){
    let that = this
    wx.startWifi({
      success(){
        //连接
        that.Connected()
      },
      fail(res){
        wx.showToast({
          title: '接口调用失败',
        })
      }
    })
  },
  /**
   * 连接wifi
   */
  Connected(){
    let that = this
    wx.connectWifi({
      SSID: this.userWifiName,//wifi账户名
      password: this.userWifiPwd,//wifi连接密码
      success(res){
        wx.showToast({
          title: 'wifi连接成功',
          duration: 2000
        })
      },
      fail(res){
        console.log(res)
        wx.showToast({
          title: 'wifi连接失败',
          duration: 2000
        })
      }
    })
  },
  /**
   * 搜索wifi
   */
  startSearch(){
    const getWifiList = () => {
        wx.getWifiList({
          success: (res) => {
            wx.onGetWifiList((res) => {
              const wifiList = res.wifiList
                .map(wifi => {
                  const strength = Math.ceil(wifi.signalStrength * 4)
                  return Object.assign(wifi, { strength })
                })
              this.setData({
                wifiList
              })
            })
          },
        })
    }
    const startWifi = () => {
      wx.startWifi({
        success:getWifiList,
        fail(res){
          console.error(res)
        }
      })
    }
    //获取系统信息
    wx.getSystemInfo({
      success(res) {
        const isIOS = res.platform === "ios"
        if (isIOS){
          wx.showModal({
            title: '提示',
            content: '由于系统限制，ios用户请手动先进入系统Wifi页面，然后返回小程序',
            showCancel: false,
            success(){
              //开启wifi搜索
              startWifi()
            }
          })
          return
        }
        startWifi()
      },
    })
  }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161

加速计

;<view class="panel_root">
    <view class="view_top" animation="{{animation1}}">
        <image class="img_top" src="{{img_url}}"></image>
    </view>
    <view class="view_bottom" animation="{{animation2}}">
        <image class="img_bottom" src="{{img_url}}"></image>
        <view class="panel_bottom">
            <view
                class="panel_loading"
                style="display:{{hasResutl==0?'block':'none'}}"
            >
                <image class="img_loading" src="{{loading}}"></image>
                <text class="text_lable">正在搜索同意时刻摇晃手机的人</text>
            </view>
            <view
                class="panel_result"
                style="display:{{hasResutl==1?'block':'none'}}"
            >
                哈哈
            </view>
        </view>
    </view>
    <button class="btn_test" bindtap="startAnimation">
        测试
    </button>
</view>

Page({
    /**
     * 页面的初始数据
     */
    data: {
        hasResutl: -1,
        bar_state: 0,
        winWidth: 0,
        winHeight: 0,
        img_url:
            'https://www.demomaster.cn/eatbar/public/static/img/yaoyiyao/img_yaoyiyao.png',
        loading:
            'https://www.demomaster.cn/eatbar/public/static/img/yaoyiyao/small_loading.gif',
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        var that = this
        that.initAnimation()
        //重力加速度
        wx.onAccelerometerChange(function (res) {
            //console.log(res.x)
            //console.log(res.y)
            //console.log(res.z)
            if (res.x > 0.7 && res.y > 0.7) {
                // wx.showToast({
                //   title: '摇一摇成功',
                //   icon: 'success',
                //   duration: 2000
                // })
                that.startAnimation()
            }
        })
        var that = this
        //获取系统信息
        wx.getSystemInfo({
            success: function (res) {
                that.setData({
                    winWidth: res.windowWidth,
                    winHeight: res.windowHeight,
                })
            },
        })
    },
    initAnimation: function () {
        var that = this
        //实例化一个动画
        this.animation1 = wx.createAnimation({
            // 动画持续时间，单位ms，默认值 400
            duration: 400,
            /**
             * linear 动画一直较为均匀
             * ease 从匀速到加速在到匀速
             * ease-in 缓慢到匀速
             * ease-in-out 从缓慢到匀速再到缓慢
             *
             * step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
             * step-end 保持 0% 的样式直到动画持续时间结束 一闪而过
             */
            timingFunction: 'ease',
            // 延迟多长时间开始
            // delay: 100,
            /**
             * 以什么为基点做动画 效果自己演示
             * left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%
             * top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%
             */
            transformOrigin: 'left top 0',
            success: function (res) {
                console.log(res)
            },
        })
        //实例化一个动画
        this.animation2 = wx.createAnimation({
            // 动画持续时间，单位ms，默认值 400
            duration: 400,
            /**
             * linear 动画一直较为均匀
             * ease 从匀速到加速在到匀速
             * ease-in 缓慢到匀速
             * ease-in-out 从缓慢到匀速再到缓慢
             *
             * step-start 动画一开始就跳到 100% 直到动画持续时间结束 一闪而过
             * step-end 保持 0% 的样式直到动画持续时间结束 一闪而过
             */
            timingFunction: 'ease',
            // 延迟多长时间开始
            // delay: 100,
            /**
             * 以什么为基点做动画 效果自己演示
             * left,center right是水平方向取值，对应的百分值为left=0%;center=50%;right=100%
             * top center bottom是垂直方向的取值，其中top=0%;center=50%;bottom=100%
             */
            transformOrigin: 'left top 0',
            success: function (res) {
                console.log(res)
            },
        })
    },
    /**
     *位移
     */
    startAnimation: function () {
        var that = this
        //x轴位移100px
        var h1 = '35%'
        var h2 = '65%'
        if (this.data.bar_state == 1) {
            h1 = '40%'
            h2 = '40%'
            setTimeout(function () {
                that.setData({
                    //输出动画
                    bar_state: 0,
                    hasResutl: 0,
                })
                setTimeout(function () {
                    that.setData({
                        hasResutl: 1,
                    })
                }, 4000)
            }, 400)
        } else {
            h1 = '25%'
            h2 = '55%'
            this.setData({
                bar_state: 1,
            })
            setTimeout(function () {
                that.startAnimation()
            }, 600)
        }
        this.animation1.height(h1).step()
        this.animation2.top(h2).step()
        this.setData({
            //输出动画
            animation1: that.animation1.export(),
            animation2: that.animation2.export(),
        })
    },
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169