day 03 实习日志

一、学习内容

（一）学习微信小程序的API；

（二）学习怎么使用小程序的接口和方法；

（三）完成要求的模块；

 

二、课后习题

（一）在“我的页面”上获取昵称和头像，并显示出来。

源码：

.wxml：

<view class="userinfo">

<view class="userinfo-avatar">

<open-data type="userAvatarUrl"></open-data>

</view>

<open-data type="userNickName"></open-data>

</view>

.wss：

.userinfo {

position: relative;

width: 750rpx;

height: 320rpx;

color: #000000;

display: flex;

flex-direction: column;

align-items: center;

}

.userinfo-avatar {

overflow:hidden;

display: block;

width: 160rpx;

height: 160rpx;

margin: 20rpx;

margin-top: 50rpx;

border-radius: 50%;

border: 2px solid #fff;

box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);

}

.userinfo{

font-size: 20px;

background-color: #fff;

border-radius:50%;

}

程序结果：

 

（二）在“我的页面”获取手机主要信息

源码：

.wxml:

<div class="box">

<view>手机型号：{{mobileModel}}</view>

</div>

<div class="box">

<view>手机像素比：{{mobileePixelRatio}}</view>

</div>

<div class="box">

<view>窗口宽度：{{windowWidth}}</view>

</div>

<div class="box">

<view>窗口高度：{{windowHeight}}</view>

</div>

<div class="box">

<view>微信设置的语言：{{language}}</view>

</div>

<div class="box">

<view>微信版本号：{{version}}</view>

</div>

 

.wxss:

.box{

display: flex;

flex-direction: column;

justify-content: space-between;

border:2px solid #000000;

}

 

.js

var app = getApp()

Page({

data: {

mobileModel: '',

mobileePixelRatio: '',

windowWidth: '',

windowHeight: '',

language: '',

version: ''

},

onLoad: function () {

var that = this;

wx.getSystemInfo({

success: function (res) {

that.setData({

mobileModel: res.model,

mobileePixelRatio: res.pixelRatio,

windowWidth: res.windowWidth,

windowHeight: res.windowHeight,

language: res.language,

version: res.version

})

}

})

}

})

程序结果：

 

 

 

（三）把整个“地图”页面变成地图

源码：

.wxml

<view style='width:100%;height:100%'>

<view wx:if="{{latitude}}" mode="widthFix">纬度：{{latitude}}</view>

<view wx:if="{{longitude}}" mode="widthFix">经度：{{longitude}}</view>

<view wx:if="{{address}}" mode="widthFix">地址：{{address}}</view>

 

<map longitude="{{longitude}}" latitude="{{latitude}}" scale="13" markers="{{markers}}"style='width:100%;height:100%'></map>

</view>

 

.wxss

page{

height: 100%;

}

.js

Page({

data: {

longitude: 0,

latitude: 0,

markers: [{

iconPath: "assets/icons/position2.png",

id: 0,

latitude: 21.1526,

longitude: 110.29754,

width: 30,

height: 30

}]

},

onLoad: function () {

console.log(this)

},

onReady: function () {

// console.log(this)

var _this = this;

wx.getLocation({

success: function (res) {

console.log(res);

_this.setData({

longitude: res.longitude,

latitude: res.latitude

})

}

})

 

}

})

程序结果：

 

三、学习总结及心得

     在这一堂课中主要讲解了微信小程序的接口以及方法的使用，比如说地图，怎么引入地图，并放大和缩小。课下的作业是根据课堂上讲解的方法来完成的，有获取用户头像、用户名称等等，虽然有点多，但是基本都能实现，这需要的时间很多，不是每一个接口跟方法都是一接触就会的，而是要通过查找资料慢慢懂得。