当前位置:网站首页>Wechat applet (function transfer parameters, transfer multiple parameters, page Jump)

Wechat applet (function transfer parameters, transfer multiple parameters, page Jump)

2022-06-13 06:11:00 Vue sauce

##1. Function arguments :

<!--bindtap-- Event name ;personalCollect-- Function name ; data-type--- Parameters  -->
    <text class="flex {
     {collectType==0?'collectActive':''}}" bindtap="personalCollect" data-type="0"> travel </text>
    <text class="flex {
     {collectType==1?'collectActive':''}}" bindtap="personalCollect" data-type="1"> Photography </text>

js : Get parameter value

//js file 
 personalCollect (event) {
    
        let num = event.currentTarget.dataset.type// obtain event Parameters transmitted 
    },

##2. Page Jump ( Jump to a new page )

<!-- wxml file -->
<!--bindtap Binding function , Click the jump  -->
	<view bindtap="onSkip"> Jump to the page </view>
//js file 
  onSkip () {
    
      //wx.navigateTo: Keep the current page , Jump to a page in the app 
      //url: Page path to jump to 
       wx.navigateTo({
    
           url: '../pages/sonPage/collect',
       })
   },

Jump through multiple parameters :

<!--  Parent page -->
<view bindtap="onSkip" data-url="./sonPage/details?id={
     {article.id}}" data-city="{
     {article.cityName}}">
onSkip(e) {
    
        let url = e.currentTarget.dataset.url
        let city = e.currentTarget.dataset.city
         wx.navigateTo({
    
         `${
      url}&city=${
      city}` // Each value uses & Separate , city To get better values for sub pages 
         })
    },
// The child page gets the parameters of the parent page 
    onLoad:(options)=>{
    
      console.log(options)// Here the bread contains the transmitted value 
}

summary :
Function arguments : Because the development of wechat small program is different from the past ordinary web Development , Unable to get js obtain wxml Of documents dom structure , But you can use wechat applet data binding and view Labeled ”data-xx“ Custom properties to change the label class name , Pass value wxml Set up data-[ Parameter name ] Pass parameters ,[ Parameter name ] It can only be lowercase , It can't be capitalized
Page Jump : Page Jump also has a jump called wx.switchTab, It's a jump to tabBar page , And shut down all the others tabBar page , The usage is almost the same , Check out the official documentation
https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html

原网站

版权声明
本文为[Vue sauce]所创,转载请带上原文链接,感谢
https://yzsam.com/2022/02/202202270557115971.html