小程式中實作頁面跳轉
對標簽系結點擊事件
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="https://www.cnblogs.com/suncolor/archive/2022/12/16/{{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 > <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方法拼接兩個串列 }); } }); },
注意：圖片目前只是上傳到了記憶體，
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/540128.html
標籤：其他