数据绑定：
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>