小程序测试后台服务的方法(ngrok)


Posted in Javascript onMarch 08, 2019

什么是ngrok?

官方解释是这样说的:

ngrok 是一个反向代理,通过在公共的端点和本地运行的 Web 服务器之间建立一个安全的通道。

这段话是什么意思?

运行ngrok服务以后,本地运行的Web服务会被ngrok代理。当你访问它给你提供的域名时候,它会经过公共的端点解析到本地,这样本地的服务就可以通过外网访问了。(看不懂也没关系,会用就行了)

如何使用?

这里告诉大家一个国内搭建的 Ngrok国内免费服务器-小米球,使用起来更方便灵活。

服务成功启动以后长这样,表示把这个域名映射到本地,支持httphttps哦:

小程序测试后台服务的方法(ngrok)

启动本地的服务

服务的业务逻辑很简单,就是返回一个json对象:

@SpringBootApplication
@RestController
public class DockerApplication {
  public static void main(String[] args) {
    SpringApplication.run(DockerApplication.class, args);
  }
  @RequestMapping("/hello")
  public Object index() {
    Map data=new HashMap();
    data.put("code",200);
    data.put("msg","ngrok搭建成功");
    return data;
  }
}

然后通过浏览器访问这个域名,返回下面这串信息就说明ngrok搭建成功了。

{"msg":"ngrok搭建成功","code":200}

接下来我们要

在小程序里使用我们的后台服务

(搞这么一堆,终于可以使用啦)。

index.wxml写上这一段代码:

<view>
<button bindtap="clickMe">点我</button>
</view>
<view>状态码:{{data.code}}</view>
<view>信息:{{data.msg}}</view>

点击按钮绑定了一个clickMe函数,如果函数执行成功返回的值就会在下面渲染出。

index.js实现这个函数:

clickMe : function(){
  var that = this;
  wx.request({
   url: 'https://video01.ngrok.xiaomiqiu.cn/hello',  
   success(res) {
    var data = res.data;
    that.setData({
     data: data
    });
   }
  })
 }

记得在详情里比这个勾上,

小程序测试后台服务的方法(ngrok)

终于可以测试了

点击前:

小程序测试后台服务的方法(ngrok)

点击后:

小程序测试后台服务的方法(ngrok)

说明我们的后台成功被小程序访问到了!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js每次Title显示不同的名言
Sep 25 Javascript
JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
Jan 11 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
深入剖析JavaScript中的函数currying柯里化
Apr 29 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
requirejs按需加载angularjs文件实例
Jun 08 Javascript
js字符限制(字符截取) 一个中文汉字算两个字符
Sep 12 Javascript
vue实现点击当前标签高亮效果【推荐】
Jun 22 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
使用vue-cli4.0快速搭建一个项目的方法步骤
Dec 04 Javascript
Js类的构建与继承案例详解
Sep 15 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 #Javascript
利用angular自动编译andriod APK的绕坑经历分享
Mar 08 #Javascript
详解小程序循环require之坑
Mar 08 #Javascript
详解js 创建对象的几种方法
Mar 08 #Javascript
浅谈Javascript常用正则表达式应用
Mar 08 #Javascript
validform表单验证的实现方法
Mar 08 #Javascript
webpack4.x下babel的安装、配置及使用详解
Mar 07 #Javascript
You might like
ThinkPHP CURD方法之field方法详解
2014/06/18 PHP
php xhprof使用实例详解
2019/04/15 PHP
Nigma vs Liquid BO3 第一场2.13
2021/03/10 DOTA
javascript 表单规则集合对象
2009/07/21 Javascript
autoPlay 基于jquery的图片自动播放效果
2011/12/07 Javascript
JavaScript中的apply()方法和call()方法使用介绍
2012/07/25 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
屏蔽script注入小例子
2013/11/12 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
Script标签与访问HTML页面详解
2014/01/10 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
Javascript基础教程之函数对象和属性
2015/01/18 Javascript
javascript将数字转换整数金额大写的方法
2015/01/27 Javascript
javascript中不易分清的slice,splice和split三个函数
2016/03/29 Javascript
Windows 系统下设置Nodejs NPM全局路径
2016/04/26 NodeJs
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
Vue组件的使用教程详解
2018/01/05 Javascript
vue-cli webpack 引入swiper的操作方法
2018/09/15 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
2019/01/24 jQuery
浅谈layui分页控件field参数接收对象的问题
2019/09/20 Javascript
Vue为什么要谨慎使用$attrs与$listeners
2020/08/27 Javascript
Python中函数eval和ast.literal_eval的区别详解
2017/08/10 Python
python 堆和优先队列的使用详解
2019/03/05 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
详解如何在登录过期后跳出Ifram框架
2020/09/10 HTML / CSS
Rag & Bone官网:瑞格布恩高级成衣
2018/04/19 全球购物
医学类个人求职信范文
2014/02/05 职场文书
员工生日活动方案
2014/08/24 职场文书
幼儿园大班见习报告
2014/10/31 职场文书
2014年后勤工作总结范文
2014/12/16 职场文书
2016年庆“七一”主题党日活动总结
2016/04/05 职场文书
浅析CSS在DevTools 中架构演变
2021/10/05 HTML / CSS
Win11更新失败并提示0xc1900101
2022/04/19 数码科技
多线程Spring通过@Scheduled实现定时任务
2022/05/25 Java/Android