实现功能
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
})
学习总结
今天主要讲的是小程序开发的一些界面设计过程,主要内容也不多
- 界面设计考验组件如何使用
- 缺乏了前端基础知识,这点后期还是要慢慢补
- 做作业还是需要依靠不断自我深化,去查找资料