day 04 实习日志

一、学习内容

  学习怎么使用微信小程序项目框架

 

二、课后作业

（一）用button获取用户授权获取头像和昵称

源码：

.wxml

<view class='bg'>

<view class="container">

<image class='usericon' src='{{uicon}}' mode='widthFix'></image>

<view class="userinfo" wx:if="{{isLogin}}">

<!-- 如果只是展示用户头像昵称，可以使用 <open-data /> 组件 -->

<open-data type="userAvatarUrl" class="userinfo-avatar"></open-data>

<open-data type="userNickName" class="userinfo-nickname"></open-data>

</view>

<view class="userinfo" wx:else>

<!-- 需要使用 button 来授权登录 -->

<button type="default" size="mini" wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>

<view wx:else>请升级微信版本</view>

</view>

</view>

</view>

 

.wxss

button{

color: #fff;

font-size: 30rpx;

background: rgb(7, 197, 23);

}

.userinfo {

display: flex;

flex-direction: row;

align-items:baseline;

}

.userinfo-avatar {

width: 128rpx;

height: 128rpx;

margin: 20rpx;

border-radius: 80%;

}

.userinfo-nickname {

color: #fff;

}

.usermotto {

margin-top: 200px;

}

 

.container{

width: 100%;

}

 

.auto-img{

width: 100%;

height: 100%;

display: block;

}

.usericon{

height:200rpx;

width:200rpx;

border-radius:50%;

}

.bg>text{

color: white;

}

.bg{

width:100%;

height:350rpx;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

background:url('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1561022916299&di=202c8c5b2ff44403fe71d0a1417e41d5&imgtype=0&src=http%3A%2F%2Fp17.qhimg.com%2Fbdr%2F__85%2Fd%2F_open360%2Fxuanku1221%2F1.jpg');

}

.js

const app = getApp()

 

Page({

data: {

isLogin: false,

canIUse: wx.canIUse('button.open-type.getUserInfo'),

uicon:'img/xingkong.png'

},

onLoad() {

// 查看是否授权

let that = this;

wx.getSetting({

success(res) {

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

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

that.data.isLogin = true;

that.setData({

isLogin: true

});

wx.getUserInfo({

success(res) {

console.log(res.userInfo)

that.setData({

userInfo: res.userInfo

});

}

})

} else {

that.setData({

isLogin: false

});

}

}

})

},

onShow() {

 

},

bindGetUserInfo(e) {

// 授权后的处理

console.log(e.detail.userInfo)

this.setData({

isLogin: true

});

},

pingmu: function (option) {

var that = this;

wx.getSystemInfo({

success: function (res) {

//屏幕高宽

var windowWidth = res.windowWidth;

var windowHeight = res.windowHeight;

console.log('windowHeight: ' + windowHeight);

//图片离上一元素的高度像素，这里用的是百分比来计算，当高度变化时，计算出来的高度像素距也会发生改变

var viewTop = windowHeight * 0.545;

var viewSecondTop = windowHeight * 0.026;

console.log('viewTop: ' + viewTop);

console.log('viewSecondTop: ' + viewSecondTop)

that.setData({

viewTop: viewTop,

viewSecondTop: viewSecondTop

})

}

})

}

})

程序结果：

（二）头像与名称的背景图实现不同手机型号自适应高度

程序结果：

 

（三）地图页面加个光标

程序结果：

 

三、总结以及心得

    

通过查看网上的官网介绍的微信小程序，然后再通过老师简单讲解，大概明白了基本的框架，接下来就是实现相应的基本功能，在完成课后作业的时候，难度还是有的，但是除了查看官网的基本介绍，还要自己去查资料，了解并学会去运用。

在这一次我是学会了怎么弄定位光标，比之前的直接定位好很多了，而且我也知道怎么去获取名称和头像，这个有两个方法，怎么实现的接口也不一样，所以觉得这次学会了很多。