网络请求API及抖音小程序接口获取、页面实现（网络请求AIP 获取接口 接口数据与前端页面对接）2019年3月28日

今天主要学习了网络请求API，同时，开始抖音小程序项目，获取接口数据，然后将数据渲染在前台页面。

网络请求API

. 网络请求API wx.request 必要参数：url ；
. 如果post传值接收不到，必须把header里的content-type，改变为application/x-www-form-urlencoded
. 这里我们需要把网络请求方法作为共用代码放进js文件里，然后定义util对象给他post方法，传入参数that func 分别把引用页面的this 和 该页面处理数据的方法传入，然后通过网络请求api理的方法，成功时用相应的方法处理数据
. 最后把整个页面导出 用方法module.exports = util;

//公公代码
//可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块
var util = {};
// 它有两个接收值，that，它就是个接收值的名字。它的值，是根据传入的值
//  fun 它就是个接收值的名字。它的值，是根据传入的值, 传入b，它的值就是b
util.post = function(that,fun){
  // 如果post传值接收不到，必须把header里的content-type，改变为application/x-www-form-urlencoded
    // json数据，必须一次返回。也不能有其他的打印数据或输出数据。
    // var that = this;
  wx.request({
    url: 'http://www.ouyangke.com/douyin.php',
    data: {
      a: 'index'
    },
    method: 'POST',
    dataType: 'json',
    header: {
      // 'content-type': 'application/json',
      'content-type': 'application/x-www-form-urlencoded'
    },
    success(e) {
      // 把page里的this，重新赋值，就不会给api里的this冲突了。
      // this.setData不能在api里使用。
      // 如果js文件里的data数据改变了，wxml里的数据会跟着改变。
      // 返回return是没用的
      // that 是什么？是接收值，它接收的是什么呢？ 是传入方（2.js）的整个文件的（page）传过来了。 相当于 this
      // fun是什么？ 是接收值，它接收的是方法名（b），就相当于this.b可以调用（2.js）里的b方法
      // this.b 相当于 调用（2.js）里的b方法
      // that[fun] 相当于 调用（2.js）里的b方法 that是this，[fun]相当于 .b
      // ()括号是传值，我们把接口得到的数据，给（2.js）里的b方法
      that[fun](e.data.data);
    }
  })
}
module.exports = util;

// pages/1/2.js
//引入外部就是文件
var ut = require(‘../../utils/util.js’);
Page({

/**
 * 页面的初始数据
 */
data: {
    dou: []
},
/**
 * 生命周期函数--监听页面加载
 */
onLoad: function (options) {
    ut.post(this, 'b');    
},
b: function(e){
    this.setData({
        dou: e
    })
    console.log(e);
}

})

事件绑定

<!--pages/1/3.wxml-->
<!-- bindtap是将点击事件绑定在组件上 点击触发后面的方法 -->
<!-- data-后面可以跟自定义属性  然后可以将属性值传给后台 -->
<text bindtap="a" data-oo="jiji" style="color:red;">{{ name }}</text>
<input bindinput="b" style="margin:35px; border:1px solid blue"></input>

// pages/1/3.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        name: 'php 中文网'
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
    },
    a: function(e) {
        // e下面的target下面的dataset下面的id是前台页面的自定义属性值
        // console.log(e.target.dataset.oo);
        console.log(e);
    },
    b:function(e) {
        this.setData({
            name:e.detail.value
        })
        // e下面detail下面的value是输入框的值
        // console.log(e.detail.value);
    }
})

抖音小程序获取接口数据

现在来做抖音小程序，首先通过接口获取数据，然后根据获取的数据在前端页面渲染出来。
首先引入公共js文件，然后用post方法连接端口

var com = require('../../utils/util.js');
//监听页面加载完后
  onLoad: function () {
    com.post('douyin.php', {uid : uid}, 'getData', this);
    this.setData({
      windowHeight: wx.getSystemInfoSync().windowHeight  //获取屏幕可使用高度
    })
  },
      getData: function(e) {
        // console.log(e.data);
        e.data[0].autoplay = true;
        this.setData({
            play: e.data
        })

post方法需要传入 获取接口的链接 然后传入的数据 获取接口数据后处理数据的回调函数 还有调用这个方法的页面
最后获取的数据赋给play
前端页面调用play里面相应的属性值，然后在前端渲染出来。

<!--index.wxml-->
<!-- 顶部固定数据 -->
<!-- 搜索图标 -->
<view style="position:fixed;left:30rpx;top:30rpx;z-index:9999;">
  <image class="top_img" src="../../img/search.png"></image>
</view>
<!-- 推荐和定位 -->
<view style="text-align:center;width:100%;position:fixed;top:30rpx;z-index:9999;color:#fff;">
  <text space="emsp" decode="true" style="font-size:30rpx;">推荐&nbsp;&nbsp;</text>
  <text space="emsp" decode="true" style="font-size:18rpx;">&nbsp;&nbsp;|&nbsp;&nbsp;</text>
  <text space="emsp" decode="true" style="font-size:24rpx;">&nbsp;&nbsp;合肥</text>
</view>
<!-- 二维码图标 -->
<view style="position:fixed;right:100rpx;top:30rpx;z-index:9999;">
  <image class="top_img" src="../../img/scan.png"></image>
</view>
<!-- live图标 -->
<view style="position:fixed;right:30rpx;top:30rpx;z-index:9999;">
  <image class="top_img" src="../../img/live.png"></image>
</view>
<!-- 滑块视图容器 vertical纵向 indicator-dots不显示面板 autoplay不自动切换 -->
<!-- height 滑块试图高度，根据手机屏幕高度，动态设置 -->
<swiper vertical="true" indicator-dots="" autoplay="" style="height:{{windowHeight}}px;" bindchange="edit_v">
  <!-- swiper-item 每个单元滑动容器 -->
  <!-- wx:for循环js里的数据 wx:key先阶段用不到，防止有黄色错误，不给值  item-id="{{item.id}}" -->
  <swiper-item wx:for="{{play}}" wx:key="id" wx:for-index="key">
    <view style="text-align:center;width:100rpx;position:fixed;right:10rpx;bottom:{{windowHeight/3}}rpx;z-index:9999;">
      <!-- 头像，关注按钮 -->
      <view>
        <image class="avatar" src="{{item.user.avatar}}"></image>
        <image style="width:30rpx;height:30rpx;" src="../../img/follow.png"></image>
      </view>
      <!-- 点赞按钮 -->
      <image wx:if="{{item.is_zan == 0}}" class="right_img" src="../../img/love.png" bindtap="zan" data-id="{{item.id}}" data-key="{{key}}"></image>
      <!-- 点赞成功按钮 -->
      <image wx:if="{{item.is_zan == 1}}" class="right_img" src="../../img/love_on.png"></image>
      <view class="text">{{item.zan_number}}</view>
      <!-- 消息按钮 -->
      <image class="right_img" src="../../img/com.png" bindtap="b" data-id="{{item.id}}" data-key="{{key}}"></image>
      <view class="text">{{item.msg_number}}</view>
      <!-- 转发按钮 -->
      <image class="right_img" src="../../img/forwa.png"></image>
      <view class="text">{{item.forward}}</view>
    </view>
    <!-- 视频 -->
    <video id="video_{{key}}" autoplay="{{item.autoplay}}" initial-time="{{item.initial}}" controls="" class="wh100" src="{{item.video}}" bindtap="z" bindended="g"></video>
    <!-- 标题、内容、歌曲 -->
    <view style='position:fixed;left:30rpx;bottom:10rpx;z-index:9999;color:#fff;font-size:28rpx;width:80%;'>
      <view style="margin-bottom:10rpx;">@<span style="font-size:34rpx;">{{item.user.nickname}}</span></view>
      <view style="margin-bottom:10rpx;">{{item.conten}}</view>
      <view class='box'>
        <view class='flex-box' style='left: {{posLeft2}}px;'>
          <view id='txt3' class='txt'>{{item.audio.title}}</view>
          <view class='txt' style='margin-left: {{marginLeft}}px'>{{item.song}}</view>
        </view>
      </view>
    </view>
    <!-- 歌曲文字，前面的抖音logo -->
    <image style='width:20rpx;height:20rpx;position:fixed;left:30rpx;bottom:40rpx;z-index:99999;' src="../../img/dou.png"></image>
    <!-- 旋转图片 -->
    <image style='border-radius:50%;width:100rpx;height:100rpx;position:fixed;right:30rpx;bottom:40rpx;z-index:99999;' src='{{item.audio.url}}' class='img' animation="{{animationData}}"></image>
  </swiper-item>
</swiper>
<!-- 弹框 评论 -->
<view style="position:fixed;bottom:0rpx;" wx:if="{{is_p == 1}}">
  <input style="width:720rpx;background-color:#fff;padding:20rpx;" placeholder="有爱评论，说点儿好听的~" focus="true" bindinput="i"></input>
  <view>
    <button type="default" style='width:50%;float:left;' bindtap="c">取消</button>
    <button type="primary" style='width:50%' bindtap="d">确定</button>
  </view>
</view>