侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

百度小程序封装get post请求等全局函数及实现请求后端api数据循环展示功能

微信(小程序)  /  管理员 发布于 1年前   871

接上一篇百度小程序列表循环显示,因为上一篇是写死的测试数据用来循环列表展示

这篇就要动态的 直接请求服务端后台接口 返回数据,然后循环出来

get,post等函数需要全局使用,所以要封装一下


步骤

1.工具 (因为是测试demo,直接用Web IDE)

Web IDE 无需安装随时进行百度小程序的开发、调试、预览、发布小程序。并支持 git 、效率云等版本管理功能。

Web IDE 使用地址

https://ide.smartprogram.baidu.com/


新建文件夹utils

并新建utils/api.js文件用来放置全局函数get.post等

const baseUrl = 'https://www.zongscan.com'; 

const http = ({ url = '', param = {}, ...other } = {}) => {
  swan.showLoading({
    title: '加载中'
  });
  let timeStart = Date.now();
  return new Promise((resolve, reject) => {
    swan.request({
      url: getUrl(url),
      data: param,
      header: {
        'content-type': 'application/json'
        // 默认值 ,另一种是 "content-type": "application/x-www-form-urlencoded"
      },
      ...other,
      complete: res => {
        swan.hideLoading();
        // console.log(`耗时${Date.now() - timeStart}`);
        if (res.statusCode >= 200 && res.statusCode < 300) {
          resolve(res.data);
        } else {
          reject(res);
        }
      }
    });
  });
};

const getUrl = url => {
  if (url.indexOf('://') == -1) {
    url = baseUrl + url;
  }
  return url;
};

// get方法
const get = (url, param = {}) => {
  return http({
    url,
    param
  });
};
const post = (url, param = {}) => {
  return http({
    url,
    param,
    method: 'post'
  });
};

const _put = (url, param = {}) => {
  return http({
    url,
    param,
    method: 'put'
  });
};
const _delete = (url, param = {}) => {
  return http({
    url,
    param,
    method: 'put'
  });
};

module.exports = {
  baseUrl,
  get,
  post,
  _put,
  _delete
 
  // 使用方式
  // 单个请求
  // api.get('/journalismApi').then(res => {
  //   console.log(res)
  // }).catch(e => {
  //   console.log(e)
  // })
  // 一个页面多个请求
  // Promise.all([
  //   api.get('list'),
  //   api.get(`detail/${id}`)
  // ]).then(result => {
  //   console.log(result)
  // }).catch(e => {
  //   console.log(e)
  // })
};


在入口文件app.js中引入进来

/* globals swan */
const requireApi = require('./utils/api.js');

App({
    //全局函数  
    requireApi,
    onLaunch(options) {
        // do something when launch
    },
    onShow(options) {
        // do something when show
    },
    onHide() {
        // do something when hide
    }
});


使用

pages/index/index.js代码  get请求后端接口

const app = getApp();
Page({
  data: {
    testArr: []
  },
  onPageScroll: function (e) {
  },
  contactCB(e){
    console.log(e)
  },
 
  onLoad: function () {
     this.testArr();
  },
  testArr() {
    let _this = this;
    app.requireApi.get('/api/xx').then(res => {
      _this.setData({
        testArr: res
      });
      console.log("后端api数据", res);
    });
  }
});

2.png


pages/index/index.swan代码 循环视图

<view class="center">
    <view class="center-title">--中间</view>
    <block>
        <navigator url="" s-for="item, index in testArr">
            <view class="liebiao">
                <view class="liebiao-title">{{item.id}}</view>
                <view style="font-size:26rpx;color:red;">{{item.Name}}</view>
            </view>
        </navigator>
    </block>
</view>

效果图:

3.png


  • 上一条:
    百度小程序使用在线Web IDE工具简单的布局及列表循环展示数据功能
    下一条:
    百度小程序列表中点击跳转详情页流程步骤
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 小程序开发之跳转微信直播示例api(0个评论)
    • 在uni_app中开发小程序之常用功能示例代码汇总(0个评论)
    • 小程序开发之多端框架:taro(0个评论)
    • 微信小程序前端使用七牛云官方SDK上传七牛云代码示例(0个评论)
    • 百度小程序审核未通过,真机审核存在点击返回键退出小程序...解决方式之一tabBar(0个评论)
    • 近期文章
    • 如何优雅处理async await错误推荐:await-to-js库(0个评论)
    • lodash工具库(0个评论)
    • 在Laravel项目中使用中间件方式统计用户在线时长功能代码示例(0个评论)
    • 在Laravel中构建业务流程模型(0个评论)
    • windows系统中安装FFMpeg及在phpstudy环境php7.3 + php-ffmpeg扩展的使用流程步骤(0个评论)
    • 在go语言中对浮点的数组、切片(slice)进行正向排序和反向排序(0个评论)
    • 在go语言中对整数数组、切片(slice)进行排序和反向排序(0个评论)
    • 在go语言中对字符串数组、切片(slice)进行排序和反向排序(0个评论)
    • 最新国内免注册ChatGPT体验站_ChatGPT镜像站访问链接地址2023/3/28持续更新(0个评论)
    • 在Laravel项目中的实现无密码认证之:发送邮箱链接授权(0个评论)
    • 近期评论
    • 博主 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 @ xiaoB 你只管努力,剩下的叫给天意;天若有情天亦老,..
    • xiaoB 在

      2023年国务院办公厅春节放假通知:1月21日起休7天中评论 会不会春节放假后又阳一次?..
    • BUG4 在

      你翻墙过吗?国内使用vpn翻墙可能会被网警抓,你需了解的事中评论 不是吧?..
    • 博主 在

      go语言+beego框架中获取get,post请求的所有参数中评论 @ t1  直接在router.go文件中配就ok..
    • Jade 在

      如何在MySQL查询中获得当月记录中评论 Dear zongscan.com team, We can skyroc..
    • 2017-10
    • 2018-01
    • 2020-03
    • 2021-06
    • 2021-10
    • 2022-03
    • 2023-02
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客