微信小程序开发之路⑥

文章目录

37、微信小程序文件操作
38、微信小程序数据缓存(实现页面数据的交换)
39、微信小程序数据传输的方式
40、罗盘
- wifi
- 加速计

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,pdfsuccess(res) {const filePath = res.tempFilePathwx.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 之后的一个值，默认md5success(res) {console.log(res.size)},})},})},saveFile() {wx.chooseImage({success(res) {const tempFilePaths = res.tempFilePathsconsole.log(tempFilePaths)// 保存// 先创建一个对象const fs = wx.getFileSystemManager()fs.saveFile({tempFilePath: tempFilePaths[0],success(res) {const savedFilePath = res.savedFilePathconsole.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: '保存成功',//     })//   }// })},})},
})

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}
})

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

数据传输方式有如下几种

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

<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}
})

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 = thiswx.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'}}
})

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.wifinamethis.userWifiPwd = e.detail.value.wifipwdlet 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 = thiswx.startWifi({success(){//连接that.Connected()},fail(res){wx.showToast({title: '接口调用失败',})}})},/*** 连接wifi*/Connected(){let that = thiswx.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()},})}
})

加速计

;<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"><viewclass="panel_loading"style="display:{{hasResutl==0?'block':'none'}}"><image class="img_loading" src="{{loading}}"></image><text class="text_lable">正在搜索同意时刻摇晃手机的人</text></view><viewclass="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 = thisthat.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，默认值 400duration: 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，默认值 400duration: 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轴位移100pxvar 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(),})},
})

微信小程序开发之路⑥相关推荐

微信小程序开发之路（二）
由于前段时间比较忙,已经有半个多月没有更新文章了.最近微信小程序频繁更新,越来越开放,所以今天我们将继续探讨小程序. 在微信小程序开发之路(一)中讲到微信小程序的单向绑定以及使用setData()方法 ...
微信小程序开发之路（十三）正式开工--设计ER图与数据库的创建
微信小程序开发之路(十三)正式开工–设计ER图数据库的创建先制作班费公是示功能我们在项目的 settings.py 文件中找到 DATABASES 配置项,将其信息修改为: DATABASES = ...
微信小程序开发之路（十一）微信小程序第一个计算器项目搭建（centos8）
微信小程序开发之路(十一)计算器项目搭建(centos8) pip install django django-admin startproject weixintest cd weixintest ...
微信小程序开发之路（一）
今天来为大家讲讲微信小程序,大概讲一下在开发小程序时需要注意的几个点.在开始之前先了解下微信小程序是个什么东西吧. 微信小程序(weixinxiaochengxu),简称小程序,缩写XCX,英文名mi ...
微信小程序开发之路（三）
微信野心越来越大,如今已经从开始简单的聊天工具发展成了一个互联网生态系统,网罗了目前各大互联网平台所具备的功能,最近IOS端微信上线的"搜一搜"和"看一看"更加 ...
微信小程序开发之路⑩
微信小程序设计指南网址: https://developers.weixin.qq.com/miniprogram/design/#%E5%9B%BE%E6%A0%87 自定义组件开发者可以将页面 ...
微信小程序开发之路⑦
文章目录内存监控 & 一键复制系统振动.用户截屏.添加联系人电量监控.系统电话手机感应器设置动态导航物条内存监控 & 一键复制 /*** 生命周期函数--监听页面显示*/o ...
web前端-微信小程序开发学习
web前端-微信小程序开发学习 1. 小程序的概述 2. 小程序的项目结构 2.1 小程序项目结构分析 2.2 WXML模版 2.3 小程序的宿主环境 3. 组件 3.1 视图容器类组件 3.2 常用 ...
微信小程序开发入门教程（一）
背景作为一个程序猿需要不断的充实自己,不仅要追求知识的深度,也要追求知识的广度,我也一直在这条路上践行,主要学习会让我变得专注,我非常喜欢这样的感觉,学习微信小程序开发也是兴趣使然,希望拿微信小程序 ...

微信小程序开发之路⑥

文章目录

37、微信小程序文件操作

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

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

40、罗盘

wifi

加速计

微信小程序开发之路⑥相关推荐

最新文章

热门文章