什么是传参

传参是指在向后台请求数据时，将特定参数传递给服务器的过程。在微信小程序开发中，传参分为两种情况：需要传参和不需要传参。当页面需要根据用户的不同操作展示不同的数据内容时，传参就变得必要了。

需要传参的场景

一个典型的传参场景是列表页到详情页的跳转。比如我们有一个招聘信息列表页面，每条招聘信息可能有"招聘中"、"未发布"等不同状态。当用户点击某一条信息时，我们需要展示该条信息的详细内容。

这种情况下，我们需要判断用户点击的是哪一条数据，从而在跳转后的页面展示对应的详细信息。解决方案是给每条数据分配一个唯一ID，通过微信请求方法将这个ID传递给后台，后台根据ID返回对应数据。

与后台协商传参

在实际开发中，传参需要与后台开发人员协商确定：

1. 哪些接口需要传参

2. 传递什么类型的参数

3. 参数是自定义值还是数组下标

这些都需要提前沟通好，确保前后端数据交互的一致性。

微信小程序请求方法

微信小程序封装了自己的数据请求方法(类似于Ajax)，主要有以下几个参数：

url：请求地址

data：请求参数

method：请求方式(GET或POST)

默认请求方式是GET，如果需要使用POST方式，需要明确指定：

wx.request({
  url: '接口地址',
  data: {参数},
  method: 'POST',
  success(res) {
    // 请求成功处理
  }
})

实现传参的具体步骤

1. 在WXML中声明参数

在页面元素上使用data-*=｛｛xx｝｝的形式声明要传递的参数：

   <view data-id="{{item.id}}" bindtap="toDetail">点击查看详情</view>

2. 在JS中准备接收容器

在页面的data中定义变量来存储返回的数据：

   data: {
     detailData: {} // 用于存储详情数据
   }

3. 发起带参请求

在wx.request的url中添加参数，后台根据参数返回对应数据：

   wx.request({
     url: 'https://example.com/api/detail?id=' + id,
     success(res) {
       // 处理返回数据
     }
   })

4. 处理返回数据

在请求成功的回调函数中将数据存储到页面data中：

 wx.request({   
  url: 'test.php', //接口名称  
  header: {     
   'content-type': 'application/json'       // 默认值（固定，我开发过程中还没有遇到需要修改header的）     
   },   
    success(res) { 
       console.log(res.data)    //成功之后的回调    
        } 
   })

   success(res) {

     this.setData({
       detailData: res.data
     })
   }

全局变量的使用

在微信小程序中，可以使用全局变量来存储和传递数据：

 wx.request({    
   url: 'test.php', //接口名称   
   header: {      
     'content-type': 'application/json' // 默认值（固定，我开发过程中还没有遇到需要修改header的）   
    },   
    method:POST,  //请求方式    
    data:{},  //用于存放post请求的参数   
    success(res) {     
      console.log(res.data)   //成功之后的回调   
        } 
 })

1. 定义全局变量

在app.js中定义：

   App({
     globalData: {
       userInfo: null,
       baseUrl: 'https://example.com/api'
     }
   })

2. 获取全局变量

在页面中获取：

   const app = getApp()
   console.log(app.globalData.baseUrl)

wxml：
 
      
      {tabs}}' wx:key="index" class='tab-item p-tb {{navi==index?"active":""}}'>      
         {index}}'>{{item}}// data-i='{{index}}' 
         <！--  传参，参数为js，data里面定义的数组tabs的下标index    -- >
          
     发布职位  
   
    
    {list}}' wx:key='index' style='background-color: #fff;' >
         
                   
              {{item.position}}  
              {{item.sal}}  
            
            
              {{item.city}}
              {{item.district}}
               {{item.experience}}       
               {{item.education}}       
               {{item.time}}     
                  
                    
                        
                          
                   {{item.com}}          
                                 
                          {{item.minying}}            
                          {{item.kinds}}           
                          {{item.personNum}}            
                          {{item.touzi}}           
                                
                         
                   
                 
                  
                 {item.id}}' bindtap='del' wx:if="{{navi == 1}}">删除       
                 {item.id}}' wx:if="{{navi == 0}}">下线        
                {item.id}}' wx:if="{{navi == 1 }}">上线        
                {item.id}}' bindtap='edit' wx:if="{{navi == 0 || navi == 1}}" class='edit'>编辑     
               
        
    

js：
  data: {   
    tabs: ["招聘中", "未发布"],    
    navi: 0,       //这里是为了方便我做头部切换样式定义的    
    list: [],      //声明一个list，用来存放我们要请求的数据，也就是先给它一个碗，你需要放什么东西在这个碗里，通过后面请求的参数值来决定  
    },  
    getlist() {     //这里我封装了请求，如果你不需要多次利用到这个请求就不需要像我这样封装，需要在哪里请求就在哪里写这个请求               var that = this,   //避免this指向不明，在小程序里面常常会这样做      
    navi;   
    if (this.data.navi == 0) {    //这里的this.data.navi是我上面data里面声明的navi     
     navi = 1      //上线和未上线后台给了我is_online=1或者0，我将招聘中的navi=0    
     } else {      
     navi = 0    
     }    
     wx.request({      
       url: app.globalData.url +'/rc/Position/release_list?is_online='+navi,   //字符串拼接传递参数，当is_online=navi,也即是 is_online等于0请求未发布的数据，等于1请求招聘中的数据   
      （app.globalData.url 就是你开发的域名，只不过我们在全局app.js里面封装了这个域名便于后面的维护）      
      header: {       
       'content-type': 'application/json' // 默认值     
       },      
       success(res) {       
        that.setData({         
         list: res.data.data  //我要将list这个碗里放入后台请求的is_online=0或者1这些东西        
         })      
         }   
          })  
          },
        onLoad: function (options) {    
       this.getlist();    //进入页面就要显示已经请求完了的数据，所以要把getlist（）放在onLoad里面 
     },

注意事项

1. 注意请求域名需要在微信公众平台配置

2. 开发阶段可以在详情->本地设置中勾选"不校验合法域名"

3. 建议对请求进行封装，便于统一管理和维护

4. 注意处理请求失败的情况，给用户友好提示