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

})

}

})

}

})

程序结果:

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

程序结果:

 

(三)地图页面加个光标

程序结果:

 

三、总结以及心得

    

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值