实训第四天

wxml代码

 

<!--pages/mine/mine.wxml-->

 

<view class="container">

 

<view class='bg'>

 

<!-- <image class='auto-img' src='../../images/bg.jpg' /> -->

 

 

 

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

 

<text>{{uname}}</text>

 

</view>

 

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

 

<view>手机版本号：{{system}}</view>

 

<view>手机屏幕分辨率：{{screenWidth}} * {{screenHeight}}</view>

 

 

 

</view>

 

 

 

js部分代码

 

onLoad: function (options) {

 

// this

 

var _this = this;

 

// 获取手机系统信息

 

wx.getSystemInfo({

 

success: function (res) {

 

console.log(res);

 

_this.setData({

 

model: res.model,

 

system: res.system,

 

screenHeight: res.screenHeight,

 

screenWidth: res.screenWidth

 

})

 

}

 

});

 

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

 

})

感想：

今天我们学习的是微信小程序的页面设计，页面设计涉到了很多代码和前端的知识，我掌握起来也相对比较困难，不过经过请教同学和老师，以及寻找相关的资料，我也基本了解并掌握了页面设计。