• 【小程序】uni-app 页面的传参和接参


    值得一提的是小程序只能使用字符串的方式进行传递,不像vue的路由传参。至于为什么要这样,这就需要看文档怎么说了。

    1.传参

    注意:传递参数只能以 ?key=value&key=value 方式传递

    1.  <navigator
    2.    v-for="item2 in item.children"
    3.    :key="item2.cat_id"
    4.    :url="`/pages/goods_detail/goods_detail?goods_id=${item2.cat_id}`"
    5.  >
    6.      <!-- 在起始页面跳转到goods_detail.vue页面并传递参数 -->
    7.  </navigator>

    2.接收参数

    使用 onLoad() 钩子函数来接收

    1.  onLoad(query){
    2.      console.log("接收参数",query); // query 就是传递过来的参数
    3.  }

    3.复杂数据传递和接收

    小程序只能以 字符串的方式进行传递和接收,那么复杂类型对象和数组怎么传呢?

    可以使用 encodeURIComponentdecodeURIComponent ,并解码编码配置 json格式来进行。

    encodeURIComponent()  函数可把字符串作为 URI 组件进行编码。

    注意 不转义的字符:     A-Z a-z 0-9 - _ . ! ~ * ' ( )

    decodeURIComponent()  函数可对 encodeURIComponent() 函数编码的 URI 进行解码。

    传递参数

    1.  goData(){
    2.   const obj = {
    3.   name:'jack',
    4.   id:1
    5.   }
    6.   const arr = [1,2,'asdasd']
    7.   // 进行编码并转换 json格式    
    8.   const list = encodeURIComponent(JSON.stringify(arr))
    9.      // 跳转传参
    10.   uni.navigateTo({ url: '/pages/goods_detail/goods_detail?list='+list })
    11.  }

    接收参数

    1.  onLoad(query){
    2.      // 进行解码并 json格式转复杂类型
    3.      const res = JSON.parse(decodeURIComponent(query.list))
    4.      console.log("接收参数",res);
    5.  }

  • 相关阅读:
    阴影(shadow mapping)(硬阴影)
    Linux文件属性和设备文件与挂载
    2023深圳CPSE安博会亮点指引
    tensorflow 使用tf.where编辑tensor的每个值
    go exec.Command使用
    移动应用数据安全管理要求(三)
    Locust、JMeter性能测试之查询类接口【二】
    pip修改为镜像源,window和linux修改方式
    Vscode 快速下载
    《500强高管谈VE》-企业经营与VE活动
  • 原文地址:https://blog.csdn.net/m0_55960697/article/details/125453218