微信小程序搭建新闻列表(跟进上一篇博客案例)

本文旨在完善上一篇博客案例
后台接口文档
主要会用到的新语法罗列[

{发送请求篇:微信小程序如何向后端发送请求},

{页面跳转传递参数和接收参数:微信小程序页面跳转和接收参数},

{修改data中变量:拿到数据后如何对data中变量进行赋值},

]

微信小程序如何向后端发送请求

微信内置请求方法`wx:request({})`

wx.request({
   
      url: '请求地址',
      data: {
   请求携带参数},
      method: '请求方法',
      success: (res) => {
   请求成功后执行的回调函数}
    })

这么着配置还没有完全完成，这样发送请求会报当前域名不在合法的request 的合法域名列表中，需要进行以下操作

项目上线阶段可以这么玩

进入主页拖动找到以下模块

找到下面的服务器域名

将要请求的域名进行上述配置就可以正常发送请求了

在开发阶段也可以在编译器中进行配置

微信小程序页面跳转和接收参数

两种跳转详情页方式,区别在于头部导航不同

1.wx.navigateTo这种导航跳转是带返回的

2.wx.redirectTo这种导航方式是带返回主页的

通过什么方式将上级页面的参数传过来呢？
通过自定义属性赋值方法（我也不知道这么叫对不对）
例如：
在主页面结构中

<view class="post-container" data-id='{
   {item.id}}' bind:tap='goDetail'>

在.js文件中这样拿到当前data-id的传参是结果

  goDetail(event){
   
  

    const id=event.currentTarget.dataset.id
    

	}

goDetail(event){
   
    const id=event.currentTarget.dataset.id
    wx.navigateTo({
   
      url:`/pages/detail/detail?id=${
     id}`,// 通过问号传值的方式将id值传递给子页面
    })

    // wx.redirectTo({
   
    //   url: '/pages/detail/detail',
    // })
  },

在子页面的onLoad钩子函数的形参options可以获取到上级页面传递的参数

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
   
    console.log(options);
  },

输出结果为传递的参数对象

{id: "2"}

拿到数据后如何对data中变量进行赋值

这里有两种方法
1.this.setData({}) ：这种方法随模板刷新
2.this.data ：这种方法不随模板刷新
这里主要讲解一下第一种方法，因为第一种方法会响应模板渲染(就是当 data 中存储数据发生变化时模板中数据也会相应刷新)

this.setData({})语法

this.setData({
   
data中变量名:拿到的数据
})

要注意的是如果用到this就必须要先声明

let that=