实习日志day4——6.20

 

数据绑定：

XXX.wxml  标签文件
XXX.js  逻辑文件
1.在逻辑文件中可以定义一个变量 
例如：msg：”地方的看法”，
num：1000，
is boy：true，
person：{
name：“小红”，
height：158，
}

<view>num:{{num}}</view>
<view>{{msg}}</view>
<view>person.name:{{person.name}}--person.height{{person.height}}</view>
1.实现mine页面不点击button实现自动获取用户权限得到用户头像和名称

index.js

// pages/mine/mine.js

Page({

 

/**

* 页面的初始数据

*/

data: {

uicon: '../../assets/icons/my.png',

uname: '用户名',

model: '',

system: '',

screenHeight: '',

screenWidth: ''

},

 

/**

* 生命周期函数--监听页面加载

*/

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

})

}

})

} else {

bindGetUserInfo();

}

}

});

},

 

/**

* 生命周期函数--监听页面初次渲染完成

*/

onReady: function () {

 

},

 

/**

* 生命周期函数--监听页面显示

*/

onShow: function () {

 

},

 

/**

* 生命周期函数--监听页面隐藏

*/

onHide: function () {

 

},

 

/**

* 生命周期函数--监听页面卸载

*/

onUnload: function () {

 

},

 

/**

* 页面相关事件处理函数--监听用户下拉动作

*/

onPullDownRefresh: function () {

 

},

 

/**

* 页面上拉触底事件的处理函数

*/

onReachBottom: function () {

 

},

 

/**

* 用户点击右上角分享

*/

onShareAppMessage: function () {

 

}

})

 

index.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>

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

mine.js

// pages/mine/mine.js

const app = getApp()

 

Page({

data: {

ischecked:true,

num1:10,

num2:10,

str1:"hello",

str2:"piaopiao",

 

msg:"Home",

id:"txt",

index:"5",

imgurl: [{

url: "../../assets/icons/b3.jpg"

}, {

url: "../../assets/icons/b2.jpg"

}, {

url: "../../assets/icons/b11.jpg"

}, {

url: "../../assets/icons/b3.jpg"

}, {

url: "../../assets/icons/b2.jpg"

}, {

url: "../../assets/icons/b3.jpg"

}, {

url: "../../assets/icons/b11.jpg"

}],

flag:false,

obj: {

name:"惠普",

index:"0",

time:"18"

}

},

click:function(){

console.log(this.data.flag);

 

// 获取手机信息

// wx.getSystemInfo({key:value})

wx.getSystemInfo({

success: function (res) {

console.log(res);

}

})

// 更改data属性

// this.setdata(object)

this.setData({

flag: !this.data.flag

})

},

 

onLoad: function () {

 

}

})

mine.wxml

 

<swiper indicator-dots="true" indicator-color="#fff" indicator-active-color="#5fdec9">

<block wx:for="{{imgurl}}" wx:key="{{index}}">

<swiper-item>

<image src='{{item.url}}' style='width:100%;height:100%;'></image>

</swiper-item>

</block>

</swiper>

 

<!-- 数据绑定 -->

<image src='../../assets/icons/position2.png' style='width:50px;height:50px;' wx:if="{{flag}}"></image>

<image src='../../assets/icons/my.png' style='width:50px;height:50px;' wx:if="{{!flag}}"></image>

<button bindtap='click'>点击</button>

 

<view wx:for="{{imgurl}}" wx:key="{{i}}" wx:for-index="i" wx:for-item="val">{{i}}:{{val.url}}</view>

 

<!-- 引用模板 -->

<template is="modal" data="{{...obj}}"></template>

 

<!-- 定义一个模板 -->

<template name="modal">

{{index}}:{{name}}

<text>{{time}}</text>

</template>

 

<!-- 引用模板 -->

<template is="item" data="{{...obj}}"></template>

<!-- 导入一个模板 -->

<import src="../../template.wxml"/>

3.地图页面给它加个光标

classify.js

// pages/classify/classify.js

Page({

data: {

longitude: 0,

latitude: 0

},

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

})

}

})

 

}

})

classfiy.wxml

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

<map longitude="{{longitude}}" latitude="{{latitude}}" scale="13" style='width:100%;height:100%' show-location="true" enable-rotate="true"></map>

</view>