小程序按钮跳转页面（微信小程序的点击事件、页面跳转、数据绑定、数据修改、获取用户信息及定位、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="https://www.cnblogs.com/suncolor/archive/2022/12/16/{{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方法拼接两个列表 }); } }); },

注意：图片目前只是上传到了内存             。