微信小程序的点击事件、页面跳转、数据绑定、数据修改、获取用户信息及定位、for指令、获取用户上传图片 |
您所在的位置：网站首页 › 微信小程序改照片背景色 › 微信小程序的点击事件、页面跳转、数据绑定、数据修改、获取用户信息及定位、for指令、获取用户上传图片 |
|
小程序中实现页面跳转
对标签绑定点击事件
data是点击时传入的参数
点我跳转
/**
* 用户点击事件
*/
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标签） 跳转到新页面 只能跳转非tabbar页面 数据绑定wxml 数据1：{{message}}展示数据 // pages/bind/bind.js Page({ /** * 页面的初始数据 */ data: { message:"沙雕李业", } )} 数据双向绑定前台input框修改了，js里的data数据也会相应改变 wxml input框添加了一个bindinput属性，后面接了一个函数，当input框的值变化时，就会触发bindPhone函数 手机号：js // 该函数实时跟新数据的值 bindPhone:function(e){ this.setData({ phone:e.detail.value}); }, 数据修改wxml 数据2：{{message}} 点击修改数据修改数据 Page({ data: { message:"沙雕李业", }, changeData:function(){ // 修改数据 this.setData({ message: "大沙雕李业"}); } }) 获取用户信息 方式一wxml 获取当前用户名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 当点击该按钮时，会弹出一个框询问是否授权获取用户信息 授权登录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 {{localPath}}js data: { localPath:"请选择位置", }, getLocalPath:function(){ var that = this; wx.chooseLocation({ success: function(res) { that.setData({localPath:res.address}); }, }) }, for指令wxml 商品列表 {{index}} - {{item}} {{idx}} - {{x}} {{userInfo.name}} {{userInfo.age}} {{index}} - {{item}}js data: { dataList:["白浩为","海狗","常鑫"], userInfo:{ name:"alex", age:18 } }, 获取图片wxml 请上传图片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方法拼接两个列表 }); } }); },注意：图片目前只是上传到了内存。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |