微信小程序请求数据的方法(wx.request)

一. 请求之前的准备工作

1. 在pages的根目录下创建js文档

1.1 在js文档中创建公共配置文件(config.js)

1.1.1 在config.js中抽出公共域名

1.1.2 在app.js中引入config.js文件

####### 1.1.3 在请求数据的js文件中定义

2.请求的数据是一个对象

2.1 先获取接口(可直接获取接口数据)

/** 在请求数据的js文件中(eg:index.js)
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    that.getInfo()
  },
  getInfo()  {
  	wx.request ({
		url:  app.config.apiUrl + 'get/index' , // 拼接接口地址(前面为公共部分)
		method: 'post',
		header: {
			'content-type' : 'application/json'
		},
		success (res) {
			if (res) { 
				console.log(res.data)  // 打印查看是否请求到接口数据
				// 开始获取数据 eg: textBox(获取文字内容)
				textBox : res.data.data.list.basic.brand_story  // 根据network查看请求到的接口的结构获取相对应的数据
			}	else {
				console.log('没有数据')
			}
		}) 
  },

console.log(res.data)结果如下

3. 请求的数据是一个数组中的对象

3.1 需要遍历数组中的对象

请求方法和上面一样,只需现在success中先遍历数组数据

/*
* 以产品列表为例
* 产品列表中的数据: id,产品名,产品图片,产品副标题等
*/
 /**
   * 第一步
   *	 页面的初始数据
   */
  data: {
    list: [ ]
  },
  /*
  * 第二步 这里的success(res) 是wx.request({})里的,其他的上面一样
  */
   success(res) {
        if (res) {
          console.log(res.data)
          // 获取接口中的数据
          let productList = res.data.data.list.product_list.data
          // 遍历数组,获取需要的数据
          for (var i = 0; i < productList.length;i++) {
            productList[i].id;
            productList[i].title
            productList[i].ctitle
            productList[i].storage 
            productList[i].efficacy
            productList[i].product_image = app.config.imgUrl + productList[i].product_image
          }
          //  console.log(productList)
          that.setData({
          	// 将获取到的数据赋值给数组对象中
            list: productList,
          })
        } else {
          console.log('没有数据')
        }
      }

完整代码:

4. 请求带参数的数据 (以参数id为例)

4.1 product文件传参

wxml文件:

js文件:

4.2 productDetails接受参数

js文件



这样就可以根据产品的id点击跳转到相应的产品列表

5. 请求带参数的数据(参数为page,上拉加载更多产品)

5.1 定义page的值,默认是第一页 ,如果page为0,则会加载两次页面

5.2 获取数据,并加载出来

6. 搜索产品功能

点击搜索框搜索产品

如果输入的不是关键字则出现这样的页面

6.1 双向绑定

wxml文件

js文件

6.2 点击根据输入的关键字获取数据

7. 将后台获取的html标签转为小程序标签

7.1 rich-text方法,缺点:获取的数据是一整个大标签 ,无法设置样式,获取的图片也不能自适应

方法: wxml文件

<rich-text nodes="{{introduce}}"></rich-text>

js文件

data : {
	introduce: ' '
}

7.2 使用wxParse将动态获取后台的html转换为小程序标签(可以实现图片自适应,可以根据data)

7.2.1 需要先在git上下载wxParse (下载地址: https://github.com/icindy/wxParse )

7.2.2 在需要使用wxParse的wxss文件中引入wxParse.wxss样式文件

@import "/page/wxParse/wxParse.wxss";

7.2.3 在需要加载html内容的wxml文件中引入wxParse

7.2.3 在需要加载html内容的页面对应的js文件里引入wxParse并获取数据

var WxParse = require('../../wxParse/wxParse.js');

补充说明:

打印后台获取的数据可以看到图片的路径不完整,需要使用replace替换成完整的路径,所以这里多了一步全局查找并替换的步骤.