微信小程序——如何获取url中的数据

如何获取url中的数据

这里举个例子！
当我们需要编辑一个可以点击的图片超链接

这时候结构是这个样子的

1. 首先最外层有一个视图层view
2. 在view中添加超链接标签<navigator> </navigator>
3. 最后在navigator标签中添加image标签
   具体如下：

html页面

<!-- 导航开始 -->
<view class="index_cate">
  <navigator
   wx:for="{{cateList}}"
	wx:key="name"
	 url="/pages/category/index"
	  open-type="switchTab">
    <image  src="{{item.image_src}}" mode="widthFix" />
  </navigator>
</view>
<!-- 导航结束 -->

解析：

1. 在navigator标签中，用for遍历js文件中存储的数组cateList
2. 指定key，这里的key必须是数据中不重复的
3. 在image标签上绑定遍历出来的图片

js

在这里补充一个知识点——Promise

• promise是一个对象，对象和函数的区别就是对象可以保存状态，函数不可以（闭包除外）
• 并未剥夺函数return的能力，因此无需层层传递callback，进行回调获取数据
• 代码风格，容易理解，便于维护
• 多个异步等待合并便于解决

new Promise(
  function (resolve, reject) {
    // 一段耗时的异步操作
    resolve('成功') // 数据处理完成
    // reject('失败') // 数据处理出错
  }
).then(
  (res) => {console.log(res)},  // 成功
  (err) => {console.log(err)} // 失败
)

• resolve作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；
  reject作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去
• promise有三个状态：
  1、pending[待定]初始状态
  2、fulfilled[实现]操作成功
  3、rejected[被否决]操作失败
  当promise状态发生改变，就会触发then()里的响应函数处理后续步骤；
  promise状态一经改变，不会再变。
• Promise对象的状态改变，只有两种可能：
  从pending变为fulfilled
  从pending变为rejected。
  这两种情况只要发生，状态就凝固了，不会再变了。

1. 补充完这些知识点，我们就可以来编辑一个用于请求的index.js了（/request/index.js）

export const request =(params)=> {
  return new Promise((resolve,reject)=>{
      wx.request({
        ...params,
        // 成功的回调函数
        success:(result)=>{
          resolve(result);
        },
        // 失败的回调函数
        fail:(err)=>{
          reject(err);
        }
      });

  })
}

2. 在我们对应的页面下的index.js中，做这几个步骤
   1. 创建一个接收数据的空数组==>cateList:[]
   2. 创建一个获取导航数组的方法getCateList()
   3. 在生命周期函数onLoad中调用该方法
      具体操作如下：

Page({
	  /**
   * 页面的初始数据
   */
  data: {
  //1.导航 数组
    cateList:[]
    },
    /**
   * 生命周期函数--监听页面加载
   * 页面开始加载 就会触发
   */
  onLoad: function (options) {
  //3. 调用函数，一定要加this！！！
  this.getCateList();
  },
  //2.获取 导航 数据
    getCateList(){
      request({
        url:'https://api-hmugo-web.itheima.net/api/public/v1/home/catitems'})
        .then(result=>{
        this.setData({
          cateList:result.data.message
        })
      })
    }
})