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

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

博主信息

博文 42

粉丝 2

访问量 52659

专题推荐

更多>

网络请求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>

批改状态：未批改

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

html文档结构、css选择器和盒模型初探（html文档结构说明，常用的标签，常用的css选择器及优先级，盒模型内外边距边框线）2019年1月14日22时45分

2019-01-15 17:40:32

首页

PHP培训

视频教程

学习路径

资源下载

技术文章

社区

微信公众号

网络请求API

事件绑定

抖音小程序获取接口数据