微信小程序使用HTTP请求_绕过HTTPS_云函数 request-promise get、post 请求SpringBoot 超详细使用总结

最新推荐文章于 2024-08-22 08:58:24 发布
最新推荐文章于 2024-08-22 08:58:24 发布
阅读量8.3k 收藏 48
点赞数 11
分类专栏： 小程序 文章标签： 小程序 nodejs javascript java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LW_Hadoop/article/details/107609600
版权

微信小程序使用HTTP请求_绕过HTTPS_云函数 request-promise get、post 超详细使用总结

在微信小程序中鹅产出于安全性的考虑限定了小程序使用的服务器请求必须是HTTPS，即需要合法域名的备案才行，默认是不支持HTTP请求的，当然开发版和本地、真机调试是只要在 详情里的本地设置中关闭合法域名校验也是可以使用HTTP进行测试的，但是一旦发布体验版或者正式版是无法通过请求的。但是同时鹅厂也提供了云开发的支持，而云开发是支持node.js的,那么我们可以通过使用 request-promise 来使用HTTP请求，进而绕过HTTPS的限制。

大多人都使用的是 request-promise 或者 got, 我这里使用的是 request-promise，在使用 request-promise 前请先在本地安装好 node.js 环境。

使用 request-promise 使用 HTTP请求 绕过HTTPS校验

1、 首先我们需要在开发工具中使用云开发,注意必须要使用自己 微信公众平台 注册的后得到的 AppID(小程序ID) 来创建项目
在这里插入图片描述
在这里插入图片描述

2、 然后在项目中创建一个文件夹（我这里创建了一个cloud文件夹）,注意文件夹的目录结构，然后在项目的配置文件中使用 "cloudfunctionRoot": "cloud/", 指定云函数的文件夹路径,注意必须是 cloudfunctionRoot 文件夹可以随意命名
在这里插入图片描述

 "cloudfunctionRoot": "cloud/"

在这里插入图片描述

注意如果之前没有使用过云开发,那么是没有默认的云开发环境的，我这里是之前有一个news的云环境，系统自动指定的

3、 创建云开发环境，打开云开发，然后创建一个云环境,需要记号云环境的id，建议复制下来

在这里插入图片描述在这里插入图片描述

如果是之前有云环境可以从这里创建，我这里已经创建好了云环境了，就不再创建一个了

在这里插入图片描述
4、 指定云环境,在 app.json 中指定云环境的id
在这里插入图片描述

	wx.cloud.init({
      env: "news-sdnlu"
    });

在这里插入图片描述
选择自己的云环境
在这里插入图片描述
5、 右键云环境文件夹,在云环境中创建 node.js 函数
在这里插入图片描述
6、 右键云函数,使用终端打开，然后输入 npm install request-promise 注意本地要 先安装好 node.js 环境 ,关于安装 node.js 环境的百度一下就有了请自行安装，这里不做赘述。
在这里插入图片描述

	npm install request-promise

在这里插入图片描述

出现 request-promise@xxx 证明安装成功，你的版本不一定和我的一样

7、 在云函数中使用 request-promise 注意完成云函数的创建后都要右键上传部署,并且每次修改都要重新上传部署

// 云函数入口文件
const cloud = require('wx-server-sdk')
//引入request-promise用于做网络请求
var rp = require('request-promise');
//这里是指定云环境的id，与app.json中一样，为了方便切换环境，建议使用 cloud.DYNAMIC_CURRENT_ENV 自动指定
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {
  //我这里是指定使用小程序传递的URL进行的测试请求,默认是GET请求
  let url = event.url;
  // console.log('前端参数');
  // console.log(event);
  if(url == null || url == undefined ){
    return 'URL不存在'
  }else{
    return await rp(url)
    .then(function (res) {
      return res
    })
    .catch(function (err) {
      return '请求失败'
    });
  }
  
}

在这里插入图片描述
8、 在项目中调用云函数测试 HTTP 请求,在wx.cloud.callFunction 中指定云函数的名称

	 //测试请求
    wx.cloud.callFunction({
      name: 'HttpAPI',//你的云函数名称
      data: {
        url: 'http://ip:端口/test',
      }
    }).then( (res)=>{
    //请求成功
      console.log(res);
    }).catch( (res)=> {
    //请求失败
      console.log(res);
    })

在这里插入图片描述

注意 result 是请求的结果,我使用的是springboot做的后台服务器,但是结果是字符串所以需要使用 JSON.parse(res.result) 转成json数据，如果那你们的请求结果不是字符串那么就不需要json化

初步使用HTTP请求就成功啦,接下来介绍一下使用 request-promise 的GET于POST请求的参数传递，我这里使用的是springboot的后台,这里赘述springboot 的内容,并且这里不封装 RESTful 风格的请PUT、DELETE求，只使用GET、POST

request-promise GET 请求

不废话直接上代码
1、云函数中

云函数的console.log();只能在云函数的日志中查看，不会打印到控制台上,以为云函数不是本地

// 云函数入口文件
const cloud = require('wx-server-sdk')
//引入request-promise用于做网络请求
var rp = require('request-promise');

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {
  let url = event.url;
  // console.log('前端参数');
  // console.log(event);
  if(url == null || url == undefined ){
    return 'URL不存在'
  }else{
    return await rp(url)
    .then(function (res) {
      return res
    })
    .catch(function (err) {
      return '请求失败'
    });
  }
}

小程序js中

wx.showLoading({
      title: '加载中',
      mask: true
    });

    var that = this;

    wx.cloud.callFunction({
      name: 'HttpGetNotepad',//你的云函数名称
      data: {
      //对于get请求我们的参数可以直接拼接在url?后面,多个参数使用 & 了解 如:url?a=1&b=1 我这里是使用 RESTful 风格的URL
        url: 'http://ip或者域名:端口/notepad/'+app.globalData.openid
      }
    }).then( (res)=>{
      // console.log(res);
      var result = JSON.parse(res.result);
      if(result.code == 200){
        that.setData({
          noepadInfo: result.data
        })
      }else{
        wx.showToast({
          title: '服务器错误',
          duration: 2000
        });
        // wx.hideLoading();
      }
      wx.hideLoading();

    }).catch( (res)=>{
      // console.log(res);
      wx.showToast({
        title: '服务器断开',
        duration: 2000
      });
      wx.hideLoading();
    })

springboot后端

 @GetMapping("/notepad/{opendId}")
    public Result getUserContent(@PathVariable("opendId") String opendId){
        List<User_Notepad> notepadByOpendId = user_service.findNotepadByOpendId(opendId);
        return Result.success(notepadByOpendId);
    }

request-promise POST 请求

这一部分是个重点,有两种传递参数的方式
1、 使用form表单传递参数

云函数

// 云函数入口文件
const cloud = require('wx-server-sdk')
//引入request-promise用于做网络请求
var rp = require('request-promise');

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {
  // console.log(event);
  let url = event.url;
  if(url == null || url == undefined ){
    return 'URL不存在'
  }else{
    return await rp({
      url: url,
      method: "POST",
      json: true,
      form: {
        openId: event.openId,
        content: event.content,
        date: event.date,
        startAddress: event.startAddress,
        startPoint: event.startPoint,
        endAddress: event.endAddress,
        endPoint: event.endPoint,
        startTime: event.startTime,
        endTime: event.endTime,
        beforTime: event.beforTime,
        remind: event.remind
      },
      headers: {
        //"content-type": "application/json",
        "content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
      },
    })
    .then(function (res) {
      return res
    })
    .catch(function (err) {
      return '请求失败'
    });
  }

}

小程序js调用

//发送请求到服务器
	//这只是为了用户友好性做的显示 loading 
      wx.showLoading({
        title: '保存中',
        mask: true
      })
  
      wx.cloud.callFunction({
        name: 'HttpAddNotepad',//你的云函数名称
        data: {
          // url: 'http://lw.free.idcfengye.com/notepad',
          url: 'http://ip或者域名/notepad',
          openId: app.globalData.openid,
          content: this.data.zhuti,
          date: this.data.date,
          startAddress: this.data.startAddress,
          startPoint: this.data.startPoint,
          endAddress: this.data.endAddress,
          endPoint: this.data.endPoint,
          startTime: this.data.timeStart,
          endTime: this.data.timeEnd,
          beforTime: this.data.tiqian,
          remind: (this.data.flag?1:0)
        }
      }).then( (res)=>{
        // console.log(res);
        if(res.result.code == 200 || res.result.data >0){
          wx.showToast({
            title: '保存成功',
            duration: 1000
          });
          //返回页面
          setTimeout(function () {
            wx.navigateBack({
              delta: 1
            })
          }, 1000)
        }else{
          wx.showToast({
            title: '保存失败',
            duration: 2000
          });
          // wx.hideLoading();
        }
      }).catch( (res)=> {
        // console.log(res);
        wx.showToast({
          title: '保存失败',
          duration: 2000
        });
        // wx.hideLoading();
      })

springboot后端

	 @PostMapping("/notepad")
	 //这里不能使用 @RequestBody 接收数据，只能是自动入参
    public Result addUserNotepad( User_Notepad notepad ) throws Exception{
        JobAndTrigger jt = null;
        
        if(notepad.getRemind() == 1 && notepad.getBeforTime()!=null && notepad.getStartTime()!=null){
           
            jt = user_service.addSendJob(notepad);
        }
        //数据入库
        notepad.setJt(jt);

        int row = user_service.insertUseNotepad(notepad);
        return Result.success("添加成功",notepad.getId());
    }

2、 使用body传递参数
云函数

// 云函数入口文件
const cloud = require('wx-server-sdk')
//引入request-promise用于做网络请求
var rp = require('request-promise');

cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})

// 云函数入口函数
exports.main = async (event, context) => {
  let url = event.url;
  let data = event.info;
  // console.log(data);

  if(url == null || url == undefined ){
    return 'URL不存在'
  }else{
    return await rp({
      url: url,
      method: "POST",
      json: true,
      body: data,//这里就是使用的json格式的数据
      headers: {
        "content-Type": "application/json",
        // "content-Type": "application/x-www-form-urlencoded; charset=UTF-8",
        // 'User-Agent': 'Request-Promise'
        // "token": event.token
      },
    })
    .then(function (res) {
      return res
    })
    .catch(function (err) {
      return '请求失败'
    });
  }
}

小程序js调用

	//构造数据 数据可以在 调用云函数的data中写，这里是个人风格这么写,没有强制要求
      var info = 
      {
        id: this.data.notepadInfo.id,
        openId: app.globalData.openid,
        content: this.data.zhuti,
        date: this.data.date,
        startAddress: this.data.startAddress == this.data.notepadInfo.startAddress?null:this.data.startAddress,
        startPoint: this.data.startPoint == this.data.notepadInfo.startPoint?null:this.data.startPoint,
        endAddress: this.data.endAddress == this.data.notepadInfo.endAddress?null:this.data.endAddress,
        endPoint: this.data.endPoint == this.data.notepadInfo.endPoint?null:this.data.endPoint,
        startTime: this.data.timeStart,
        endTime: this.data.timeEnd,
        beforTime: this.data.tiqian,
        remind: (this.data.flag?1:0),
      }
      // console.log(info);
      wx.cloud.callFunction({
        name: 'HttpUpdateRemind',
        data: {
          url: 'http://ip或者域名/upnotepad',
          info: info //json格式的数据
        }
      }).then( (res)=>{
        // console.log(res);
        if(res.result.code == 200 || res.result.data >0){
          wx.showToast({
            title: '修改成功',
            duration: 1000
          });
          //返回页面
          setTimeout(function () {
            wx.redirectTo({
              url: '/pages/myNotepad/myNotepad'
            })
          }, 1000)
        }else{
          wx.showToast({
            title: '修改失败',
            duration: 2000
          });
          // wx.hideLoading();
        }
      }).catch( (res)=> {
        // console.log(res);
        wx.showToast({
          title: '修改失败',
          duration: 2000
        });
        // wx.hideLoading();
      })

sprongboot后端

@PostMapping("/remind/{flag}")
//这里就用 @RequestBody接收参数
    public Result updateRemind(@PathVariable("flag") boolean flag, @RequestBody User_Notepad notepad ) throws Exception{

        JobAndTrigger jt = null;
       
        if(notepad!=null && flag){
         
            jt = user_service.addSendJob(notepad);
            notepad.setJt(jt);
//            System.out.println(jt);
            notepad.setRemind(1);
        }else if(notepad!=null && !flag && notepad.getJt()!=null && (!StringUtils.isEmpty(notepad.getJt().getJobName())) ){
            jt = quartzService.deleteJob(notepad.getJt());
            notepad.setJt(jt);
//            System.out.println(jt);
            notepad.setRemind(0);
        }
        //数据入库
        int res = user_service.updateRemind(notepad);

        return Result.success("修改成功",notepad);
    }

这里是个人做微信小程序的一点总结，如果你觉得对你有用请留个赞呗

> 转发请注明出处:https://blog.csdn.net/LW_Hadoop

LW_Hadoop
关注
专栏目录
微信小程序开发:http请求
weixin_33716941的博客
09-25 696
在微信小程序进行网络通信，只能和指定的域名进行通信，微信小程序包括四种类型的网络请求。 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downloadFile) WebSocket通信(wx.connectSocket) 这里以介绍wx.request,wx.uploadFile,...
微信云开发，后台node.js环境，使用axios中post请求上传到“云存储”，遇到的一系坑。如果使用request-promise就没有这么坑
hjiaqing的博客
07-13 2359
微信云开发，后台node.js环境，使用axios中post请求上传到“云存储”，遇到的一系坑。如果使用request-promise就没有这么坑。 //向云存储上传文件 static async upLoadFile(path,file){ const ACCESS_TOKEN = await AccessToken.getAccessToken(); let res = await axios.post(`/tcb/uploadfile?access_token=${AC
微信小程序设置http请求的步骤详解
10-21
给大家介绍了微信小程序如何进行http请求的详细步骤，相信对大家学习微信小程序网络请求会有所帮助，有需要的朋友们下面来一起看看吧。
requests 库之发送 form-data 格式的 http 请求
weixin_71807218的博客
07-07 974
这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你！通过后台日志发现是传入数据格式不正确导致的，公司的post接口入参方式为form-data , 而我是用json串的方式入参的。**3、发送http请求时，以form-data的格式作为requests的参数**将手机号、密码数据传入后，始终登陆不成功，经过与开发沟通后知道需要签名才能登陆。使用requests的requests_toolbelt模块 ，需要自行安装。
微信小程序服务器请求post,微信小程序使用HTTP请求_绕过HTTPS_云函数 request-promise get、post...
weixin_30764401的博客
08-06 1474
request-promise GET 请求1、云函数中> `云函数的console.log();只能在云函数的日志中查看，不会打印到控制台上,以为云函数不是本地`// 云函数入口文件const cloud = require('wx-server-sdk')//引入request-promise用于做网络请求var rp = require('request-promise');cloud...
微信小程序——云函数三方库request-promise的使用详解
时代新人的博客
04-24 1万+
三方库request-promise的使用： 1）首先在浏览器打开github，然后在搜索框输入request搜索，如下图所示： 找到第一个request打开，然后下滑找到我们需要的request-promise点击打开找到的request-promise，然后向下滑动会看到需要先安装 接下来就是安装request-promise环境了： 打开微信开发者工具，在小程序项目的云函数环境文件...
6.1、小程序访问http服务器(C#)
huangcheng42123的博客
11-23 2643
一、IIS配置 IIS (Internet Information Services)是windows的系统组件，可以按用户的要求来安装和卸载。 其作用是（根据用途来说）在做网页设计（其中重点是网页设计类的汇编语言如：asp、java等）的基本服务器（即本地服务器），可以用它来实现和运行（测试）你所制作的网页。 1、打开程序功能： 2：找到IIS (Internet Information Services)，并把底下的“Web管理工具”、“万维网服务”以及子项全都勾选 W...
Request-Promise 开源项目教程
最新发布
gitblog_00910的博客
08-22 767
Request-Promise 开源项目教程 request-promiseThe simplified HTTP request client 'request' with Promise support. Powered by Bluebird.项目地址:https://gitcode.com/gh_mirrors/re/request-promise 1. 项目的目录结构及介绍 Reque...
[小程序]Http网络请求
就随便写写....
01-21 1609
小程序使用https协议发送和接收数据
微信小程序云开发如何使用云函数生成二维码
10-16
总结，通过以上步骤，我们可以使用微信小程序云开发的云函数生成二维码。这种方式允许开发者将二维码生成逻辑放到云端，降低了客户端的计算负担，同时也方便了数据的安全管理。在实际应用中，可以根据需求调整参数，...
微信小程序中使用Async-await方法异步请求变为同步请求方法
10-17
首先定义异步的get和post请求函数，以及加载提示和隐藏提示的函数，这些函数都返回Promise对象，以便可以在async函数中使用await关键字等待它们的完成。 ```javascript // api/index.js // request get请求 const ...
request-promise:具有Promise支持的简化的HTTP请求客户端“请求”。 由Bluebird提供技术支持
04-12
请求承诺 不推荐使用！ 自2020年2月11日起， 已完全弃用。 预计不会有新变化。 实际上，有一段时间没有人降落了。 此软件包也已弃用，因为它取决于request 。 Fyi，这是的以及的。 具有Promise支持的简化的HTTP请求客户端“请求”。 由Bluebird提供支持。 和都很棒，但是我发现自己使用了相同的设计模式。 Request-Promise向请求调用对象添加了Bluebird支持的.then(...)方法。 默认情况下，http响应代码不是2xx，将导致承诺被拒绝。 可以通过设置options.simple = false来覆盖它。 还要检查与request-promise v4非常相似的新库： v1 –不依赖Bluebird，而是使用本机ES6 Promise。 request-promise-any v1 –允许您注册any-promise支持的an
微信小程序request请求封装，验签代码实例
10-15
request是微信小程序提供的用于向服务器发送HTTP请求的API，支持GET、POST等多种请求方式。在小程序中发起网络请求需要使用wx.request()方法，它是一个全局函数，可以通过调用小程序实例的request方法实现。 接下来...
微信小程序 请求 封装, promise, 请求并发限制， 排队请求, ...wx-request-master.zip
09-25
"微信小程序 请求 封装, promise, 请求并发限制， 排队请求"这个主题涵盖了几个关键的开发实践，下面将详细介绍这些概念。 1. **微信小程序的网络请求接口**：微信小程序提供了`wx.request()`接口来执行HTTP请求，...
微信小程序HTTP请求从0到1封装
10-16
微信小程序自身的网络请求API `wx.request` 已经相当完善，其使用方式类似于$.ajax，提供了丰富的配置项。然而，尽管如此，它仍缺乏一些高级功能，例如公共配置、请求和响应拦截器。 为了实现这些功能，我们可以...
小程序请求，wx.request 请求封装
热门推荐
marendu的博客
08-06 1万+
小程序请求，wx.request 请求封装 // 提示与加载工具类 export default class Tips { static success(title) { wx.showToast({ title: title, icon: 'success', duration: 2000 }) } static error...
【微信小程序】小程序与服务端的http通信
richest_qi的博客
11-03 6667
文章目录搭建服务端小程序小程序与服务端通信get请求小程序向服务端发送数据服务端接收小程序发送过来的数据post请求小程序向服务端发送数据服务端接收小程序发送过来的数据请求前后的状态处理 搭建服务端 npm install -save-dev express // server.js const express = require("express"); const server = express(); server.use("/test",function(req,res){ const o
封装axios网络请求模块
wys997的博客
08-24 468
core.js import axios from "axios"; import store from '../store' const instance = axios.create({//实例化axios baseURL: 'https://www.****.com/api', headers: { //设置请求头,这里支持create创建实例时需要带的 } }); //请求来接 instance.interceptors.request.use(funct
微信小程序只支持https请求，如何解决对于一些接口是http请求的？
Qianmoer的博客
07-01 2914
如果后台接口是 HTTP 协议，则需要您在服务端做一个转发，将 HTTPS 请求转发到 HTTP 接口上。这样，就可以在微信小程序中使用 HTTPS 协议访问 HTTP 接口了。微信小程序支持使用 wx.request() 发起 HTTPS 网络请求。这样，就可以在微信小程序中使用 HTTPS 协议访问 HTTP 接口了。
微信小程序封装网络请求代码详细解析
06-13
好的，我会为您详细解析微信小程序封装网络请求代码。 微信小程序中的网络请求有两种方式：一种是使用内置的wx.request()函数，另一种是使用第三方库进行封装。下面我们来介绍一下如何封装网络请求代码。 1. 创建一个request.js文件 首先，我们需要在项目目录下创建一个request.js文件。该文件用于封装网络请求代码。 2. 封装网络请求代码 在request.js文件中，我们可以使用Promise对象来封装网络请求代码。下面是一个基本的封装代码： ``` function request(url, method, data) { return new Promise((resolve, reject) => { wx.request({ url: url, method: method, data: data, success: function (res) { resolve(res.data); }, fail: function (error) { reject(error); } }) }) } module.exports = { request: request } ``` 上面的代码中，我们定义了一个request函数，它接受三个参数：url、method和data。其中，url表示请求的地址，method表示请求的方法（GET或POST），data表示请求的参数。 该函数返回一个Promise对象，当请求成功时，调用resolve方法并传递返回的数据；当请求失败时，调用reject方法并传递错误信息。 3. 在页面中使用封装代码 在页面中使用封装的网络请求代码非常简单。我们只需要在页面的js文件中引入request.js文件，并调用request函数即可。下面是一个示例代码： ``` const request = require('../../utils/request.js'); Page({ data: { list: [] }, onLoad: function () { this.getList(); }, getList: function () { let url = 'https://xxx.xxx.xxx'; // 请求地址 let method = 'GET'; // 请求方法 let data = {}; // 请求参数 request.request(url, method, data) .then(res => { this.setData({ list: res }) }) .catch(error => { console.log(error); }) } }) ``` 上面的代码中，我们在onLoad函数中调用getList函数，该函数使用request函数发起网络请求。当请求成功时，将返回的数据存储到list中；当请求失败时，打印错误信息。 以上就是微信小程序封装网络请求代码的详细解析。希望对您有所帮助！
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值