201711671226 信管1172 实训总结四

实现功能

 

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

})

 

学习总结

今天主要讲的是小程序开发的一些界面设计过程，主要内容也不多

1. 界面设计考验组件如何使用
2. 缺乏了前端基础知识，这点后期还是要慢慢补
3. 做作业还是需要依靠不断自我深化，去查找资料