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

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

1.传参

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

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

2.接收参数

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

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

3.复杂数据传递和接收

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

可以使用 encodeURIComponent 和 decodeURIComponent ，并解码编码配置 json格式来进行。

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

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

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

传递参数

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

接收参数

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