实习日志04

API的使用（上）

• wx.getSystemInfo(Object object)：获取系统信息

      系统信息的获取：wx.getSystemInfoSync()  wx.getSystemInfo()的同步版本

属性	类型	说明
brand	string	设备品牌
model	string	设备型号
pixelRatio	number	设备像素比
screenWidth	number	屏幕宽度，单位px
screenHeight	number	屏幕高度，单位px

• 如何做图片的自适应？      -设置图片width/未知图片height=屏幕width/屏幕实际height，算出图片的hight设置大小

         img不能套任何东西（文字）

 

• 如何使图片放在图片上?       -另一张图片做背景图

 

• 背景图的设置：只支持图片的格式为base64位

     1、wx.chooseImage(Object object)：从本地相册选择图片或使用相机拍照

     FileSystemManager.readFile(Object object)：读取本地文件内容

属性	类型	默认值	必填	说明
filePath	string		是	要读取的文件的路径
encoding	string		否	指定读取文件的字符编码，如果不传 encoding，则以 ArrayBuffer 格式读取文件的二进制内容
success	function		否	接口调用成功的回调函数

    2、成功后object.success 回调函数

 

属性	类型	默认值	必填	说明
tempFilePath	string		是	需要保存的文件的临时路径

    3、修改文件格式方法

           object.encoding 的合法值

值	说明	最低版本
ascii
base64
binary

 

   wx.getSavedFileInfo(Object object)

获取本地文件的文件信息。此接口只能用于获取已保存到本地的文件，若需要获取临时文件信息，请使用 wx.getFileInfo() 接口。

属性	类型	默认值	必填	说明
filePath	string		是	文件路径
success	function		否	接口调用成功的回调函数

     wx.getFileInfo(Object object)获取文件信息

属性	类型	默认值	必填	说明
filePath	string		是	本地文件路径

具体过程：

// 本地相册选择图片
wx.chooseImage({
  success: res => {
    // console.log(res.tempFilePaths[0]);

    //读取本地文件内容
    wx.getFileSystemManager().readFile({
      //要读取的文件的路径
      filePath: res.tempFilePaths[0],
      // 读取文件的字符编码
      encoding: 'base64',//字符编码
      success: res => {
        console.log(res);
        console.log('data:image/jpg;base64,' + res.data);
      }

    })
  }
})

 

补充：wx.getSavedFileList(Object object)：获取该小程序下已保存的本地缓存文件列表

 在背景图上的图片上下左右居中：

display: flex;

flex-direction: column;

justify-content: center;

 

子view垂直居中：align-items: center;

垂直居中 ：vertical-align: center;

内容居中：justify-content: center;

子view排列方式row--水平 column--垂直 ： flex-direction:row;

练习：今日实训作业：实现mine页面不点击button实现自动获取用户权限得到用户头像和名称，头像与名称的背景图实现不同手机型号自适应高度，地图页面给它加个光标。