实训第四天 获取手机信息，地图定位

1.mine页面背景图片
在mine.wxml里面

<view class="container"> 

<view style='width:100%;height:450rpx'>   //图片大小设置

<image class='auto-img' src='../../images/bg.jpg' ></image>  //图片位置格式引用auto-img类

</view>

</view>
在mine.wxss
.container{

width: 100%;

height: 100%;

}

.auto-img{   

width: 100%;

height: 100%;

display: block;  //占一行，就不会有白边

margin-top: -188px;  //设置照片垂直位置

}

2.求适应页面的高度：图片宽度/适应的宽度*图片高度；或者直接用rpx固定它的大小
3.在页面背景中居中放一个头像和用户名
注意image标签里面不能套任何标签
先把用户头像设定好格式后放进页面中
<image class='usericon' src='../../asserts/icons/my.png'></image>
usericon类设置格式：

.usericon{

height:200rpx;

width:200rpx;

border-radius:50%;

}

再将头像弄到页面中间：用margin-top不行，所以考虑定位，将背景图片去掉，再给头像标签加个背景图片，但背景图片不能用背景路径，只能用网络图片或者base64。
在util中再建立一个chooseimage.js页面
// 本地相册选择图片

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

}

})

}

})

再在背景类bg中调用background:url（本地照片转换的64位base码）


4.获取手机信息：wx.getSystemInfo
在data里先定义好各个手机信息，

data: {

uicon: '../../assets/icons/my.png',

uname: '用户名',

model: '',

system: '',

screenHeight: '',

screenWidth: '',

language: '',

version: ''

}

再wx.getSystemInfo获取手机信息

onLoad: function (options) {

var _this = this;  //function  //function内如果直接用this数据会丢失

// 获取手机系统信息

wx.getSystemInfo({

success: function (res) {  // 回调函数

console.log(res);  //打印出手机信息

_this.setData({  // 将手机各个信息赋值给data里设定的数据，即改变data值，用setData（）

model: res.model,

system: res.system,

screenHeight: res.screenHeight,

screenWidth: res.screenWidth,

language:res.language,

version=res.version

})

}

});

wx.getSetting({      //获取授权

success(res) {

if (res.authSetting['scope.userInfo']) {

// 已经授权，可以直接调用 getUserInfo 获取头像昵称

wx.getUserInfo({

success: function (res) {

_this.setData({

uicon: res.userInfo.avatarUrl,

uname: res.userInfo.nickName

})

}

})

} else {

bindGetUserInfo();

}

}

});

},
再在wxml页面调用它例如：  <view>手机型号：{{mobileModel}}</view>

地图定位：
wxml页面：

<map longitude="{{longitude}}"

latitude="{{latitude}}"

polyline="{{polyline}}"

circles='{{circles}}'

scale="13" style='width:100%;height:100%' show-location="true" show-compass="true" enable-rotate="true" enable-traffic="true"
在js页面的data里面定义经度纬度，用setData获取当前定位的经度纬度，再用Poinline定义数组point，存放获取的经度纬度，定义定义的浮标，再在js页面调用show-location="true"显示带有方向的当前定位点。
js页面

onLoad: function () {

console.log(this)

},

onReady: function () {

var _this = this;

wx.getLocation({

success: function (res) {

console.log(res);

_this.setData({

longitude: res.longitude,

latitude: res.latitude,

 

})

_this.setData({

latitude: res.latitude,

longitude: res.longitude,

polyline: [{

points: [{

latitude: res.latitude,

longitude: res.longitude,

}],

color: "#FF0000DD",

width: 2,

dottedLine: true

}],
|显示结果：