微信小程序的点击事件、页面跳转、数据绑定、数据修改、获取用户信息及定位、for指令、获取用户上传图片
小程序中实现页面跳转
对标签绑定点击事件
data是点击时传入的参数
<view bindtap="clickMe" data-nid="123" data-name="SD" >点我跳转</view>
/**
* 用户点击事件
*/
clickMe(e){
console.log(e)
var nid = e.currentTarget.dataset.nid //通过这种方式可以拿到传过来的参数
console.log(nid)
页面跳转
通过wx里的方法跳转
// navigateTo, redirectTo 只能打开非 tabBar 页面。
// switchTab 只能打开 tabBar 页面。
// reLaunch 可以打开任意页面。
wx.switchTab({
url: '/pages/home/home', // 路由后面可以加?的方式传参数,调用页面路由带的参数可以在目标页面的onLoad方法中获取。
})
}
通过标签跳转(类似a标签)
<navigator url="/pages/redirect/redirect?id=666">跳转到新页面</navigator> 只能跳转非tabbar页面
数据绑定
-
wxml
<view>数据1:{{message}}</view>
-
展示数据
// pages/bind/bind.js
Page({
/**
* 页面的初始数据
*/
data: {
message:"沙雕李业",
}
)}
数据双向绑定
前台input框修改了,js里的data数据也会相应改变
wxml
input框添加了一个bindinput属性,后面接了一个函数,当input框的值变化时,就会触发bindPhone函数
<view>手机号:</view>
<input value="{{phone}}" bindinput="bindPhone" placeholder="请输入手机号"></input>
js
// 该函数实时跟新数据的值
bindPhone:function(e){
this.setData({ phone:e.detail.value});
},
数据修改
-
wxml
<view>数据2:{{message}}</view>
<button bindtap="changeData">点击修改数据</button> -
修改数据
Page({
data: {
message:"沙雕李业",
},
changeData:function(){
// 修改数据
this.setData({ message: "大沙雕李业"});
}
})
获取用户信息
方式一
-
wxml
<view bindtap="getUserName">获取当前用户名</view>
-
js
getUserName:function(){
// 调用微信提供的接口获取用户信息
wx.getUserInfo({
success: function (res) {
// 调用成功后触发
console.log('success',res)
// 然后可以用this.setData修改对应数据,展示在前台上,注意this指的不是pages的而是wx了
// 我们需要在getUserName函数后面使用var that = this ,然后在wx里就可以使用that.setData修改对应数据了
},
fail:function(res){
// 调用失败后触发
console.log('fail', res)
}
})
},
方式二
-
wxml
当点击该按钮时,会弹出一个框询问是否授权获取用户信息
<button open-type="getUserInfo" bindgetuserinfo="xxxx">授权登录</button> -
js
xxxx:function(){
wx.getUserInfo({
success: function (res) {
// 调用成功后触发
console.log('success', res)
},
fail: function (res) {
// 调用失败后触发
console.log('fail', res)
}
})
}
注意事项:
-
想要获取用户信息,必须经过用户授权(button)。
-
已授权
-
不授权,通过调用wx.openSetting
// 打开配置,手动授权。
// wx.openSetting({})
-
获取用户位置
-
wxml
<view bindtap="getLocalPath">{{localPath}}</view>
-
js
data: {
localPath:"请选择位置",
},
getLocalPath:function(){
var that = this;
wx.chooseLocation({
success: function(res) {
that.setData({localPath:res.address});
},
})
},
for指令
-
wxml
<!--pages/goods/goods.wxml-->
<text>商品列表</text>
<view>
<view wx:for="{{dataList}}" >{{index}} - {{item}}</view>
<view wx:for="{{dataList}}" wx:for-index="idx" wx:for-item="x">{{idx}} - {{x}}</view>
</view>
<view>
{{userInfo.name}}
{{userInfo.age}}
</view>
<view>
<view wx:for="{{userInfo}}">{{index}} - {{item}}</view>
</view> -
js
data: {
dataList:["白浩为","海狗","常鑫"],
userInfo:{
name:"alex",
age:18
}
},
获取图片
-
wxml
<!--pages/publish/publish.wxml-->
<view bindtap="uploadImage">请上传图片</view>
<view class="container">
<image wx:for="{{imageList}}" src="{{item}}"></image>
</view> -
js
data: {
imageList: ["/static/hg.jpg", "/static/hg.jpg"]
},
uploadImage:function(){
var that = this;
wx.chooseImage({
count:9, //图片最多的个数
sizeType: ['original', 'compressed'], // 图片大小
sourceType: ['album', 'camera'], //图片的来源,相机或者本地
success:function(res){
// 设置imageList,页面上图片自动修改。
// that.setData({
// imageList: res.tempFilePaths
// });
// 默认图片 + 选择的图片;
that.setData({
imageList: that.data.imageList.concat(res.tempFilePaths) //concat方法拼接两个列表
});
}
});
},
注意:图片目前只是上传到了内存。