小程序基础学习(发送请求)

这篇具有很好参考价值的文章主要介绍了小程序基础学习(发送请求)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

小程序基础学习(发送请求),小程序基础学习,学习,小程序,微信小程序,前端,微信开放平台,微信,javascript

原理

        通过js发起wx.request的方法发送请求并接受相应数据

实例(一)

小程序基础学习(发送请求),小程序基础学习,学习,小程序,微信小程序,前端,微信开放平台,微信,javascript

参数:

        url:请求网址地址,

        success:请求成功执行的函数,

        fail:请求失败执行的函数

请求返回的数据

小程序基础学习(发送请求),小程序基础学习,学习,小程序,微信小程序,前端,微信开放平台,微信,javascript

实例(二)

小程序基础学习(发送请求),小程序基础学习,学习,小程序,微信小程序,前端,微信开放平台,微信,javascript

参数:

        url:请求网址地址,

        data:请求携带的参数,

        success:请求成功执行的函数,

        fail:请求失败执行的函数

请求返回的数据

小程序基础学习(发送请求),小程序基础学习,学习,小程序,微信小程序,前端,微信开放平台,微信,javascript

有了返回的数据最后通过循环渲染给页面即可文章来源地址https://www.toymoban.com/news/detail-805554.html

页面代码

<!--pages/seven/seven.wxml-->
<navigation-bar title="旅途" back="{{false}}" color="black" background="#FFF"></navigation-bar>
<view>
  <view>
    <block wx:for="{{houselist}}" wx:key="item.data.houseId">
      <view>{{item.data.houseName}}</view>
      <image src="{{item.data.image.url}}"></image>
    </block>
  </view>
</view>
// pages/seven/seven.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    houselist:{},
    allCities:{}
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    wx.request({
      url: 'http://123.207.32.32:1888/api/city/all',
      success:(res)=>{
        const data = res.data.data
        this.setData({allCities:data})
        
      },
      fail:(err)=>{
        console.log(err)
      }
    })
    wx.request({
      url: 'http://123.207.32.32:1888/api/home/houselist',
      data:{
        page:1
      },
      success:(res)=>{
        const data = res.data.data
        this.setData({houselist:data})
        console.log(data)
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})
/* pages/seven/seven.wxss */
{
  "usingComponents": {    "navigation-bar": "/components/navigation-bar/navigation-bar"}
}

到了这里,关于小程序基础学习(发送请求)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【微信小程序】使用 wx.request 方法来发送POST网络请求,携带RequestBody参数

    在微信小程序中,你可以使用 wx.request 方法来发送网络请求。以下是将上述 Java 代码转换为微信小程序版本的示例: 在上述代码中,我们使用 wx.request 方法发送 POST 请求,并将请求的 URL、请求体数据、请求头等信息进行相应的设置。请求成功后,会在回调函数的 success 中处

    2024年02月15日
    浏览(36)
  • (保姆级解决方案)微信小程序【真机预览】无法向服务器发送请求(实测有效)

    问题描述:微信小程序“打开调试模式可以发出请求,关闭调试模式无法发出请求” 1 获取uni-cloud官网提供的request合法域名  这个获取request合法域名是针对使用uni-cloud云开发的小程序。如果使用其它合法域名,同样可以按照下面的方法解决问题。  uni-app官网  2 在微信小程

    2024年02月05日
    浏览(47)
  • 微信小程序基础使用-请求数据并渲染

    小程序模板语法-数据绑定 在js中定义数据 小程序的data是一个对象,不同于vue的data是一个函数 在模块中获取使用数据 小程序中使用 {{}} 实现数据与模板的绑定 内容绑定: view{{ 属性名 }}/view 属性绑定: input value=\\\"{{属性名}}\\\" / {{}} 内写的是表达式 简易双向绑定 小程序中提供了

    2024年02月08日
    浏览(77)
  • 微信小程序给 thinkphp后端发送请求出现错误 Wrong number of segments 问题的解决 【踩坑记录】

    这里提示 wrong number of segements , 百度了一下说这个问题是 后端解码token缺了一些东西(没正确的解码),然后我去抓了下包发现,我小程序端发送请求的时候,token是undifend,然后检查了一下store中的token发现,是我写错了变量名(😂好低级的错误) 微信小程序向后端发送请求时

    2024年02月09日
    浏览(44)
  • 微信小程序学习实录8:H5网页跳转小程序(微信开放标签、wx-open-launch-weapp按钮不显示、noPermissionJsApi)

    微信小程序学习实录7(H5嵌入小程序、获取微信收货地址、数组对象url传值、js获取url参数) 微信小程序学习实录6(百度经纬度采集、手动调整精度、H5嵌入小程序、百度地图jsAPI、实时定位、H5更新自动刷新) 微信小程序学习实录5(H5嵌入小程序、map组件、地图调起功能、腾讯百度

    2024年02月04日
    浏览(47)
  • 小白学习微信小程序的数据请求和数据展示

    微信小程序的数据请求和数据展示是开发小程序中非常重要的一部分,本文将通过一个案例来详细介绍如何进行数据请求与展示。 在开始之前,需要确保已经安装了微信小程序的开发工具,并且已经注册了一个小程序的账号。如果还没有,请先完成这些步骤。 我们将使用一

    2024年04月25日
    浏览(25)
  • 【7 微信小程序学习 - 小程序的系统API调用,网络请求封装】

    请求数据,保存数据 需要封装为单独的函数,不然不是异步的 (推荐,可配置不同基础URL的多个实例)

    2024年02月09日
    浏览(33)
  • 微信小程序可以通过wx.request()方法发送text/event-stream请求头的数据,并通过wx.onSocketMessage()方法动态接收数据

    具体步骤如下: 1. 使用wx.request()方法发送text/event-stream请求头的数据,示例代码如下: ``` wx.request({   url: \\\'your_url\\\',   header: {     \\\'Content-Type\\\': \\\'text/event-stream\\\'   },   success: function(res) {     console.log(res)   } }) ``` 2. 在页面onLoad()方法中创建WebSocket连接,示例代码如下: ``` onLoa

    2024年02月05日
    浏览(29)
  • 微信小程序详细讲解页面传值,globalData,wx,web前端开发基础

    在其他非app.js文件中修改: var app = getApp() ​ app.globalData.hasLogin = true 二、 使用 wx.navigateTo 与 wx.redirectTo 的时候,可以将部分数据放在 url 里面,并在新页面 onLoad 的时候初始化 // Navigate wx.navigateTo({ url: ‘…/pageD/pageD?name=raymondgender=male’, }) ​ // Redirect wx.redirectTo({ url: ‘…/p

    2024年04月25日
    浏览(43)
  • 微信小程序学习--基础篇(二)

    (1)list [] 数组中至少有2项,最多5项,在app.json文件中配置。 (2)在tabBar中添加\\\"selectcolor\\\":“#ccc”, 可修改选中后字体的颜色。 tab页签,对应的页面必须放到最前面 (1)通过api,开发者可以方便的调用微信提供的能力,如:获取用户信息,本地存储,支付功能。 (2)

    2024年02月19日
    浏览(20)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包