微信小程序ajax实现请求服务器数据及模版遍历数据功能示例

下面是详细讲解“微信小程序ajax实现请求服务器数据及模板遍历数据功能示例”的攻略：

前言

微信小程序是一种轻量级应用程序，可以在微信中运行，它采用了类似于React的组件化的编程模式，使用WXML、WXSS、JS和JSON，可以快速开发出小程序应用。

在小程序中，我们可能需要从服务器获取数据，随后将数据渲染到页面中，这就需要用到ajax技术了。下面将详细介绍在微信小程序中使用ajax请求服务器数据以及如何使用模板遍历数据的功能。

AJAX请求服务器数据

在微信小程序中，如果需要向服务器发送ajax请求，可以使用wx.request函数，它的参数如下：

wx.request({
  url: '', //请求的URL地址
  data: {}, //请求的参数
  method: 'GET', //请求方法，默认为GET
  header: {
      'content-type': 'application/json' //请求头部信息
  },
  success: function(res){
    //请求成功后得到的数据
  },
  fail: function(){
    //请求失败后的处理方法
  },
  complete: function(){
    //请求完成后的处理方法
  }
})

下面是一个请求百度翻译API的示例：

wx.request({
  url: 'http://api.fanyi.baidu.com/api/trans/vip/translate',
  data: {
    q: 'apple', //要翻译的文字
    from: 'en', //源语言，英语
    to: 'zh', //目标语言，中文
    appid: 'your_appid', //需要申请百度翻译API的appid
    salt: '123',
    sign: 'your_sign' //需要申请百度翻译API的sign
  },
  success: function(res){
    console.log(res.data);
  }
})

需要注意的是，在请求完成后可能返回的状态码并不是200，因此判断请求是否成功需要使用success函数的参数res.statusCode。

模板遍历数据

在微信小程序中，可以使用模板来渲染数据，例如我们有一个日记列表，需要将日记的标题和日期显示在页面上，可以先在WXML中写好模板：

<!-- 日记模板 -->
<template name="diaryItem">
  <view class="diary-item">
    <view class="title">{{title}}</view>
    <view class="date">{{date}}</view>
  </view>
</template>

然后在JS代码中请求服务器获取到日记数据并将它们存储在一个数组中，最后遍历数组使用模板渲染数据：

// 日记列表页面
Page({
  data: {
    diaryList: [] //日记列表
  },
  onLoad: function(options){
    var that = this;
    wx.request({
      url: 'your_server_url',
      success: function(res){
        that.setData({
          diaryList: res.data //将服务器返回的日记数据存到页面数据中
        })
      }
    })
  }
})

在WXML中使用模板并遍历日记列表：

<!-- 渲染日记列表 -->
<scroll-view class="diary-wrap">
  <!-- 使用模板遍历日记列表 -->
  <block wx:for="{{diaryList}}" wx:key="{{index}}">
    <template is="diaryItem" data="{{title: item.title, date: item.date}}"></template>
  </block>
</scroll-view>

需要注意的是，使用模板时必须指定模板的名称和模板数据，而且在遍历数据时必须使用block标签，否则会出错。

示例

下面是一个自定义TabBar组件的示例，它使用了ajax向服务器请求TabBar列表数据，并使用模板渲染TabBar。

// TabBar组件
Component({
  data: {
    tabBarList: [] //TabBar列表
  },
  options: {
    addGlobalClass: true //使组件的样式引用page里的样式文件
  },
  ready: function(){
    var that = this;
    wx.request({
      url: 'your_server_url',
      success: function(res){
        that.setData({
          tabBarList: res.data //将服务器返回的TabBar数据存到组件数据中
        })
      }
    })
  },
  methods: {
    // TabBar点击事件
    onTap: function(event){
      var index = event.currentTarget.dataset.index;
      var tabBarList = this.data.tabBarList;
      var selectedItem = tabBarList[index];
      wx.navigateTo({
        url: selectedItem.url //跳转到选中的页面
      })
    }
  }
})

在WXML中使用模板并遍历TabBar列表：

<!-- TabBar组件模板 -->
<template name="tabBarItem">
  <view class="tabbar-item {{selected ? 'selected': ''}}" bindtap="onTap" data-index="{{index}}">
    <image class="tabbar-icon" src="{{iconPath}}"></image>
    <view class="tabbar-text">{{text}}</view>
  </view>
</template>

<!-- 渲染TabBar列表 -->
<view class="tabbar-wrap">
  <!-- 使用模板遍历TabBar列表 -->
  <block wx:for="{{tabBarList}}" wx:key="{{index}}">
    <template is="tabBarItem" 
              data="{{iconPath: item.iconPath, text: item.text, selected: item.selected, index: index}}">
    </template>
  </block>
</view>

在页面中使用自定义TabBar组件：

<!-- 页面 -->
<view class="page-wrap">
  <!-- 页面内容 -->
</view>
<!-- TabBar组件 -->
<tab-bar></tab-bar>

需要注意的是，自定义组件的JS文件必须以Component()函数为入口，自定义组件的模板必须使用template标签，并且在使用自定义组件时必须在JSON文件中的usingComponents字段中声明。