微信小程序的网络设置,及网络请求:wx.request(OBJECT)

所有文章会优先在:
微信公众号“颜家大少”中发布
转载请标明出处
?

微信小程序要实现网络请求,首先要对其进行设置,下面以”微信web开发者工具V1.01.170913”为例

一:对于服务器网站没有备案,或只需要做本地测试的用户

在“微信web开发者工具”的“设置”->“项目设置”->“项目设置”中
选:不校验安全域名、TLS 版本以及 HTTPS 证书,如下图

二:对已有备案的网站服务器用户

因为小程序只支持https的域名,所以先要确保自己的网站服务器已安装了SSL证书,至于怎样安装,可参考我之前的文章,如下:
一:https的简单介绍及SSL证书的生成
二:https的SSL证书在服务器端的部署,基于tomcat,spring boot
三:让服务器同时支持http、https,基于spring boot
四:https的SSL证书在Android端基于okhttp,Retrofit的使用

然后,通过下面两步设置
1):在mp.weixin.qq.com中用自己的小程序帐号登录,在”设置”->”开发设置”中填写服务器域名,如下图:


设置完后,在“微信web开发者工具”的“设置”->“项目设置”->“域名信息”中会看到刚在后台的域名设置,如下图:

2):在“微信web开发者工具”的“设置”->“项目设置”->“项目设置”中
不要选:不校验安全域名、TLS 版本以及 HTTPS 证书,如下图

三:设置完成后,就开始代码部分

先设置一个view用于显示收到服务器应答的数据
再设置一个button,用于点击时调用”httpRequest()”发起对服务器的请求
pages\index\index.wxml 内容如下:

<!--index.wxml-->
<view class="container">
  <!-- This is our View -->
  <view> Http Receive: {{response}} </view>
  <button bindtap="httpRequest"> http test </button>
</view>

pages\index\index.js内容如下:

// This is our App Service.
// This is our data.
var helloData = {
  response: ‘‘
}
// Register a Page.
Page({
  data: helloData,

  httpRequest: function (e) { //对应:<button bindtap="httpRequest"> http test </button>的button点击
  var that=this
    wx.request({
      url: ‘http://127.0.0.1/test‘, //仅为示例,要根据你实际的接口地址
      data: {
        x: ‘ab‘,
        y: ‘cd‘
      },
      header: {
        ‘content-type‘: ‘application/json‘ // 默认值
      },

      success: function (res) {
        console.log(res.data)
        that.setData({
          response: res.data //把接收到的服务器数据显示到{{response}}中
        })
      }
    })
  }
})

上面代码等同于访问:

https://127.0.0.1/test?x=ab&y=cd

最终显示的结果如下(当然,收到什么内容要根据你服务器的回复内容):



更多精彩内容,请关注微信公众号:颜家大少

?

时间: 2024-11-05 15:48:21

微信小程序的网络设置,及网络请求:wx.request(OBJECT)的相关文章

微信应用号小程序发起请求wx.request(OBJECT)

微信应用号小程序发起请求wx.request(OBJECT) wx.request(OBJECT) ? wx.request发起的是https请求.一个微信小程序,同时只能有5个网络请求连接. OBJECT参数说明: 参数名 类型 必填 说明 url String 是 开发者服务器接口地址 data Object.String 否 请求的参数 header Object 否 设置请求的header , header中不能设置Referer method String 否 默认为GET,有效值:O

微信小程序:nginx 设置HTTPS

微信小程序需要HTTPS服务. 程序是NGINX做前段代理,现将NGINX设置HTTPS做个总结 微信小程序需要HTTPS服务,并且有相关要求: 开发通过https://www.qcloud.com/product/ssl#userDefined10 检测SSL,显示之前配置的https未能通过.主要是算法和域名没通过. 具体操作命令如下 1 先生成key,并设置密码 openssl genrsa -des3 -out server_new.key 2048 2 通过key 再生成csr ope

微信小程序 text属性设置 WXSS样式

>微信小程序的布局css样式 参考自  珺L 文字 width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-weight:bold;    /*设置字体加粗*/border:1px solid red;/*添加边框样式(粗细为1px, 颜色为红色的实线)*/ font-family:"宋体";   /*设置字体为宋体*/ ----------------------

微信小程序开发——使用promise封装异步请求

前言: 有在学vue的网友问如何封装网络请求,这里以正在写的小程序为例,做一个小程序的请求封装. 关于小程序发起 HTTPS 网络请求的Api,详情可以参考官方文档:wx.request(Object object). 如果直接使用官方提供的个Api,那么每次在进行网络请求调用时,我们都要按官方文档上说的那样传递需要设置的请求参数,然后对不同的请求相应结果做不同的处理.但是前端同服务器端的接口请求中有大部分的请求参数以及响应结果处理都是很类似的,也就没有必要对所有请求代码都重新敲敲一遍,那么对原

[小程序]微信小程序获取input并发送网络请求

1. 获取输入框数据wxml中的input上增加bindinput属性,和方法值在js部分定义与之对应的方法,只要在输入的时候,数据就会绑定调用到该方法,存入data属性变量中 2. 调用get请求发起网络请求调用wx.request发起网络请求 3.调用微信Toast接口展示结果 4.按钮绑定bindtap属性,当按钮点击的时候会调用对应的方法 index.wxml部分 <view class="indexInput"> <input maxlength="

微信小程序开发:设置消息推送

开发设置中,启用并设置消息推送配置后,用户发给小程序的消息以及开发者需要的事件推送,都将被微信转发至该服务器地址中. 不过照着说明去操作,即使按照最简单的明文方式去设置,还是提示Token验证失败.仔细研究说明,其实服务器验证过程很简单,用Get发来一个连接,然后在自己的页面中去检验,不想做也可以先不做,直接返回echostr即可.关键在,怎么返回,开始我还以为必须要按照xml或者json返回,试了半天,其实很简单,清空所有其他输出,直接返回echostr即可. Response.Clear()

微信小程序封装bindinput &amp; 输入框出现清空图标 &amp; wx:key对input的影响

Q:我以前写小程序每次获取输入内容,都要写一个方法,觉得十分麻烦,所以写了一个通用的方法. A:我能想到的原理就是,不同的input所带的data不同,bindinput事件setData不同的data. <input class="weui-input" data-inputName='name' placeholder="你的姓名" bindinput="bindKeyInput" value='{{item}}' bindfocus=

学习微信小程序之css4设置颜色,单位表示,字体样式

颜色的设置可以通过RGB设置 可以直接通过英文单词设置 可以通过16进制来设置 长度单位: 字体样式: 设置字体样式 字体粗细 设置字体风格 设置字间距

微信小程序全局变量的设置、使用、修改

1. 全局变量的设置 在miniprogram > app.js 文件中设置,globalData对象就是存储全局变量的. App({ globalData: { hasLogin: false, openid: null }, onLaunch: function () { } }) 2.全局变量的使用 在app.js文件中,直接使用,如: this.globalData.hasLogin 在其他非app.js文件中使用,需要先申明app变量,如: var app = getApp() app

微信小程序 setData动态设置数组中的数据

setdata传递动态数据值必须为对象(只能是key:value) 语法如下 this.setData({ filter: 1212 }) 如果setdata要传递数组呢? 首先相到的是 this.setData({ filter.a: 12 filter.b: 32 }) 这样回报语法错误 既然语法规定不能在里面写数组,那就把数组定义到外面 filter.selectArea1 = 1, filter.selectArea2 = 2, filter.selectArea3 = 3, this.