uni-app的h5/小程序/app 网络请求,解决本地环境和生产环境网络请求问题

这篇具有很好参考价值的文章主要介绍了uni-app的h5/小程序/app 网络请求,解决本地环境和生产环境网络请求问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

本篇的重点在于解决h5/小程序/app这三端在本地和生产环境的网络请求问题
全部代码贴在了全文最后

思路:

首先要理解这三个端的特性,h5会有跨域问题需要反向代理,小程序和app不需要反向代理,同时小程序还得用https域名。

一、h5,

一般会跨域需要反向代理。所以要在mainifest.json设置反向代理。在请求接口时,还得拼个/api前缀

// 配置代理
 "devServer" : {
   
     "proxy" : {
   
         "/api" : {
   
             "target" : "http://192.168.1.193:8999",
             "changeOrigin" : true, //是否跨域
             "secure" : false, // 设置支持https协议的代理
             "pathRewrite" : {
   
                 "^/api" : ""
             }
         }
     }
 }
let url ='/api/system/login'

本地调试是loacalhost:808几,
uni-app的h5/小程序/app 网络请求,解决本地环境和生产环境网络请求问题

正式环境的话,会变成ip或域名前缀+/api/system/login,后端需要配置一下nginx代理,将api替换一下

二、小程序

不需要反向代理,直接请求。所以请求接口不需要拼api前缀。
但需要https域名,所以本地环境测试时开启‘不校验合法域名……’
1.在微信开发者工具,点击详情>本地设置
uni-app的h5/小程序/app 网络请求,解决本地环境和生产环境网络请求问题
2.开启‘不校验合法域名……’
uni-app的h5/小程序/app 网络请求,解决本地环境和生产环境网络请求问题

在微信公众平台https://mp.weixin.qq.com/ ,扫码登录小程序,点击开发>开发管理,找到服务器域名,
uni-app的h5/小程序/app 网络请求,解决本地环境和生产环境网络请求问题文章来源地址https://www.toymoban.com/news/detail-499085.html

// #ifdef MP
if (process.env.NODE_ENV === 'development') {
   
	BASE_URL = "http://192.168.1.193:8999"

到了这里,关于uni-app的h5/小程序/app 网络请求,解决本地环境和生产环境网络请求问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

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

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

相关文章

  • uni-app滚动分页 兼容(App 小程序 H5)

    因为手机端本身屏幕空间不大 所以大家一般都会选择用滚动分页 首先 我在根目录下创建了一个 api目录 下面创建了一个bookApi.js 其中写了一个请求函数 getBookList 根据当前页 page 和 每页展示多少条 pageSize 获取数据 那么 我的组件代码是这样的 首先 我们肯定要引入bookApi.js中的

    2024年02月16日
    浏览(38)
  • 【UniApp】-uni-app-网络请求

    经过上个章节的介绍,大家可以了解到 uni-app-pinia存储数据的基本使用方法 那本章节来给大家介绍一下 uni-app-网络请求 的基本使用方法 首先我们打开官方文档,我先带着大家看一下官方文档的介绍:https://uniapp.dcloud.net.cn/api/request/request.html 从官方文档中我们可以看到,可以

    2024年02月04日
    浏览(33)
  • uni-app实现 app 小程序 手机端H5扫码功能

    首先 扫码这个功能小程序和App都是有现成的方法 但是H5是不行的 我们可以看这样一段代码 这里 我们用了条件编译 App和小程序中的代码是 一样的 他们都可以正常执行scanCode进行扫码 至于H5手机端界面 我用web-view套了个百度的链接进来 其实 大家可以参考我的文章 vue实现二维

    2024年02月11日
    浏览(37)
  • uni-app | 小程序嵌入H5页面实现支付功能

    前一阵在做公司小程序时,有个需要对接支付的功能。但是本着订单数据和支付统一入口的设计原则,计划是对接公司商城现有的支付体系。故本方案是分析对接商城支付几种可行方案以及每种方案的可行性,最后综合选出一种最佳的方案。 实现方式 跳转商城小程序支付 跳

    2024年02月07日
    浏览(48)
  • uni-app 之 uni.request 网络请求API接口

    uni-app 之 uni.request 网络请求API接口 image.png

    2024年02月09日
    浏览(36)
  • uni-app实现自定义导航栏,兼容H5、App、微信小程序

    很多情况下,系统自带的导航栏无法满足UI设计的要求,这时候就需要我们自定义导航栏来实现需求,要考虑跨端的多种情况,这里我们封装成一个组件来使用,实现效果如下: 一、H5、App、微信小程序的区别 1.H5:导航栏高度可以设为44px,它没有状态栏,因为H5端运行在浏览

    2024年04月13日
    浏览(42)
  • uni-app多选select组件,兼容多平台小程序、H5

          目录 介绍 平台差异说明 使用方式 安装 引入 基本使用 默认选中项(回显) 配置label、value对应的key名称 获取点击确认后的结果 完整示例 API Props Option Attributes Slot Events 多选select组件目前只支持多选,单选请用单选select组件 支持配置段 兼容多平台小程序、H5

    2024年02月09日
    浏览(36)
  • uni-app 使用webview加载H5打开微信小程序

    最近公司有个需求要求在app里点击一个功能打开小程序,并且关闭小程序回到app,模仿平安保险app。 毕竟我也是刚学习uni-app,找了很多资料,找到了一个天天外链的网站可以生成一个小程序的链接,使用uni的webview去加载这个链接,很好,需求满足,但是收费,那能不能自己

    2023年04月18日
    浏览(46)
  • uni-app 实现navigateBack返回修改前一页面数据(H5、APP、小程序)

    先自我介绍一下,小编浙江大学毕业,去过华为、字节跳动等大厂,目前阿里P7 深知大多数程序员,想要提升技能,往往是自己摸索成长,但自己不成体系的自学效果低效又漫长,而且极易碰到天花板技术停滞不前! 因此收集整理了一份《2024年最新Web前端全套学习资料》,

    2024年04月29日
    浏览(43)
  • 前端Vue uni-app App/小程序/H5 通用tree树形结构图

    随着技术的发展,开发的复杂度也越来越高,传统开发方式将一个系统做成了整块应用,经常出现的情况就是一个小小的改动或者一个小功能的增加可能会引起整体逻辑的修改,造成牵一发而动全身。 通过组件化开发,可以有效实现单独开发,单独维护,而且他们之间可以随

    2024年02月16日
    浏览(30)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包