实训日记·fourday

Rps图片显示适应设备屏幕分辨率，宽度可以自适应（auto）但高度不可控

解决办法：1）算法处理

在onLoad（页面加载时）使用getSystemInfo函数的返回值获取手机信息，然后根据宽高设置图片的大小（按比例）

2）使用rps

前提条件是需要提前准备好照片（2rps=1px（物理像素），iPhone6比例随着设备的改变而改变，在开发中使用iPhone6作为视觉稿）

 

image标签内不能内嵌image标签，可能出现显示异常（不能嵌套任何标签，直接使用标签定义）

在image标签层上显示图片

1）使用margin-top给img标签一个向上的像素值，使图片往上偏移

这种方法具有范围

2）使用cover-view标签直接在view标签内覆盖显示

这里在父view标签内设置背景到img的效果

在父view标签样式内使用background：url（背景文件不能用本地路径，使用网络图片或者base64）内设置图片的URL 

2.1base64 调用getFileSystemManger（）内的readFile方法，转化encoding码，转化成base64

wx.chooseImage()从本地选择图片

yes=>

     

wx.chooseImage({

success: res => {

wx.getFileSystemManager().readFile({

filePath: res.tempFilePaths[0], //选择图片返回的相对路径

encoding: 'base64', //编码格式

success: res => { //成功的回调

console.log('data:image/png;base64,' + res.data)

}

})

}

})

 

 

wxss page：全局配置，比如宽高可以显示10%

高度直接auto可能会不显示，view标签需要内容撑高

 

request和response请求和响应

 

homework 不使用button进行用户授权

· 2018-12-27更新后，为了提高用户体验，取消scope判断全局数据中无用户信息时弹出授权弹窗。

必须让用户自己主动点击open-type为getUserInfo的按钮才能触发，把弹框的主动权还给了用户。