微信小程序使用wx.request请求服务器json数据并渲染到页面操作示例

下面是使用wx.request请求服务器JSON数据并渲染到页面的步骤：

1. 准备工作

在使用wx.request请求服务器JSON数据之前，需要先知道接口地址和返回的数据格式。若是自己开发的API，需要自己定义返回的数据格式；若是使用第三方API，则需要查看API的文档，了解返回的数据格式。

2. 发送请求

在小程序中调用wx.request函数发送请求，示例代码如下：

wx.request({
  url: 'https://example.com/api/getData',
  success: function(res) {
    console.log(res.data);
  }
})

请求参数中的url即为请求地址，success是请求成功后的回调函数，res为请求结果，其中res.data就是返回的JSON数据。

3. 渲染数据

获取到请求的JSON数据后，可以将数据渲染到页面中。渲染需要用到小程序的数据绑定功能，示例代码如下：

<view>
  <text>商品名称：{{product.name}}</text>
  <text>商品价格：{{product.price}}元</text>
</view>

示例中，{{product.name}}和{{product.price}}分别绑定了product对象中的name和price属性。在JS代码中，可以将获取到的JSON数据解析后，给product对象赋值：

wx.request({
  url: 'https://example.com/api/getProduct',
  success: function(res) {
    that.setData({
      product: res.data
    });
  }
})

其中setData方法用于更新页面的数据，将res.data赋值给product对象后，页面中的数据就会被渲染出来。

以上就是使用wx.request请求服务器JSON数据并渲染到页面的步骤。另外，这里还提供一些常见的错误处理方式：

1. 请求失败的处理

若是请求失败，success回调函数不会被触发，可以在请求参数中添加fail回调函数或者complete回调函数进行处理。

wx.request({
  url: 'https://example.com/api/getData',
  success: function(res) {
    console.log(res.data);    
  },
  fail: function(res) {
    console.log("请求失败");
  },
  complete: function(res) {
    console.log("请求完成");
  }
})

1. 处理返回的数据

获取到的JSON数据可能不是标准的JSON格式，需要使用JSON.parse方法将其解析成JSON对象。若是返回的数据格式不是JSON，可以在fail回调函数中处理。

wx.request({
  url: 'https://example.com/api/getData',
  success: function(res) {
    var data = JSON.parse(res.data);
    console.log(data);    
  },
  fail: function(res) {
    console.log("请求失败或返回错误数据");
  }
})