1、图片的载入以及滑块视图容器使用
index.js:
Page({
data: {
imgUrls: [
'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
],
indicatorDots: false,
autoplay: false,
interval: 5000,
duration: 1000,
flag: false
},
index.wxml:
<swiper indicator-dots="true" indicator-color="#fff"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
<block wx:for="{{imgUrls}}"wx:key="{{index}}">
<swiper-item>
<image src="{{item}}" class="slide-image" style='width:100%;height:100%;'/>
</swiper-item>
</block>
</swiper>
2、地图的载入以及定位
map.wxml:
<view style='width:100%;height:100%'>
<map longitude="{{longitude}}" latitude="{{latitude}}" scale="13" style='width:100%;height:100%' show-location="true" ></map>
</view>
map.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
})
}
})
}
})
3、获取用户头像及用户名
mine.js:
const app = getApp()
Page({
data:{
userInfo:{},
canIUse:wx.canIUse("button.open-type.getUserInfo")
},
click: function () {
console.log(this.data.flag);
wx.getSystemInfo({
success: function (brand) {
console.log(brand)
}
})
this.setData({
flag: !this.data.flag
})
},
onLoad: function () {
wx.getSetting ({
success:function(res){}
})
},
onGotUserInfo:function(e){
console.log(e.detail.userInfo)
this.setData({
userInfo:e.detail.userInfo,
})
}
})
mine.wxml:
<!--pages/mine/mine.wxml-->
<button wx:if="[[canIUse]]" open-type="getUserInfo" bindgetuserinfo="onGotUserInfo"bindtap="bindViewTap" >获取用户信息</button>
<view class="userinfo">
<block >
<image bindtap= " bindViewTap" class="userinfo- avatar" src="{{userInfo.avatarUrl}}"></image>
<text class="userinfo-nickname" style=''>{{userInfo. nickName}}</text>
</block>
</view>
<button wx:if="[[canIUse]]" open-type="getSystemInfo" bindgetuserinfo="onGotSystemInfo" >获取手机信息</button>
<view class="systemInfo">
<block>
<view>model:{{model}}</view>
<view>system:{{system}}</view>
<view>version:{{version}}</view>
<view>windowHeight:{{windowHeight}}</view>
<view>windowWidth:{{windowWidth}}</view>
<view>language:{{language}}</view>
</block>
</view>
mine.wxss:
.avatar{
height: 50px;
width: 50px;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
align-content: center;
}