系列文章目录

【零基础微信小程序入门开发】小程序介绍及环境搭建
【零基础微信小程序入门开发】配置小程序
【零基础微信小程序入门开发】小程序框架一
【零基础微信小程序入门开发】小程序框架二
【零基础微信小程序入门开发】基础能力（一）
👉【零基础微信小程序入门开发】基础能力（二）

业务域名介绍

同【服务器域名】配置一样在小程序界面配置即可，不过他是作为嵌入的、承载网页的容器。会自动铺满整个小程序页面，小游戏和==个人类型==的小程序暂不支持使用，我们可以在调试机上看一下效果，它的用法很简单

<web-view src="https://www.baidu.cn"></web-view>

效果

我们滑动到最底部，可以看到他是铺满全屏的

可以通过网页对一些业务的处理，例如支付，但是不支持个人

存储

每个微信小程序都可以有自己的本地缓存，可以通过 wx.setStorage/wx.setStorageSync、wx.getStorage/wx.getStorageSync、wx.clearStorage/wx.clearStorageSync，wx.removeStorage/wx.removeStorageSync 对本地缓存进行读写和清理

可以通过存储来判断用户登录与否，可以在信息存在的情况下，判断是否需要重新登录授权，缓存一些基本数据，因为前面学到的data中的数据大小是有限的

设置缓存数据到本地

通过按钮将数据写入到缓存里，我们新建一个按钮

按钮wxml代码：

<button type="primary" bindtap="huancun">缓存数据</button>

触发点击事件

  huancun:function(){
     wx.setStorageSync('dhdmw', "大家好！！")

  },

然后先观察这里的数据，出了logs是没有其他的（这个是小程序demo的运行日志）

点击【缓存数据】按钮后：

数据已经缓存下来了，只要不清空都可以使用，我们看一下setStorageSync方法（我们针对wx.setStorageSync说明）

wx.setStorageSync(string key, any data)

关键字+数据 就这么简单，那么读取肯定就要用到关键字key了

读取缓存数据

新建一个读取按钮【读出数据】
按钮的wxml代码：

<button type="default" bindtap="dushuju">读出数据</button>

js代码：

 dushuju:function(){
    var message=wx.getStorageSync('dhdmw');
    wx.showToast({
      title: message,
    })
  },

通过弹窗将刚刚缓存的数据读取出来：

清除缓存数据

新建一个按钮名为【清空缓存】
wxml：

<button type="warn" bindtap="clear">清空缓存</button>

js代码：

  clear:function(){

    wx.clearStorageSync();
  },

点击后打开Storage看一下效果：

隔离策略

同一个微信用户，同一个小程序 storage 上限为 10MB。storage 以用户维度隔离，同一台设备上，A 用户无法读取到 B 用户的数据；不同小程序之间也无法互相读写数据。所以不必担心跨站的情况

==同一小程序使用不同插件：不同插件之间，插件与小程序之间 storage 不互通。==

==不同小程序使用同一插件：同一插件 storage 不互通。==

文件系统

文件系统是小程序提供的一套以小程序和用户维度隔离的存储以及一套相应的管理接口。通过 wx.getFileSystemManager() 可以获取到全局唯一的文件系统管理器，所有文件系统的管理操作通过 FileSystemManager 来调用。

我们通过下面的例子来获取到文件的路径：

//文件资源管理器：
var fs = wx.getFileSystemManager()

//选择文件
wx.chooseImage({
  success: function (res) {
    var tempFilePaths = res.tempFilePaths // tempFilePaths 的每一项是一个本地临时文件路径
  }
})

//保存文件
fs.saveFile({
  tempFilePath: '', // 传入一个本地临时文件路径
  success(res) {
    console.log(res.savedFilePath) // res.savedFilePath 为一个本地缓存文件路径
  }
})

我们以实例来说明问题：
首先创建一个【选择文件】按钮

wxml:

<button type="primary" bindtap="choose">选择文件</button>

对应的js事件：

choose:function(){
    
    wx.chooseImage({
      success: function (res) {
        var tempFilePaths = res.tempFilePaths
        console.log(tempFilePaths);
        //获取到临时路径 后保存
    
      
      }
    })
  

  },

获取到刚刚上传的图片临时路径

以上就是今天讲的内容，如果对你有帮助，欢迎在评论区留言，如果有不足之处欢迎指出！