小程序测试后台服务的方法(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 相关文章推荐
alixixi runcode.asp的代码不错的应用
Aug 08 Javascript
jquery、js操作checkbox全选反选
Mar 12 Javascript
jquery实现的一个简单进度条效果实例
May 12 Javascript
基于jquery实现的文字向上跑动类似跑马灯的效果
Jun 17 Javascript
删除Javascript Object中间的key
Nov 18 Javascript
js实现带按钮的上下滚动效果
May 12 Javascript
jQuery实现带幻灯的tab滑动切换风格菜单代码
Aug 27 Javascript
jquery采用oop模式class类的使用示例
Jan 22 Javascript
Bootstrap菜单按钮及导航实例解析
Sep 09 Javascript
基于Vue2x的图片预览插件的示例代码
May 14 Javascript
Vue中使用方法、计算属性或观察者的方法实例详解
Oct 31 Javascript
vue.js实现三级菜单效果
Oct 19 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
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
php中的钩子理解及应用实例分析
2019/08/30 PHP
PHP使用Http Post请求发送Json对象数据代码解析
2020/07/16 PHP
Nigma vs Alliance BO5 第四场2.14
2021/03/10 DOTA
javascript 控制弹出窗口
2007/04/10 Javascript
js操作输入框中选择内容兼容IE及其他主流浏览器
2014/04/22 Javascript
关于webuploader插件使用过程遇到的小问题
2016/11/07 Javascript
javascript 中null和undefined区分和比较
2017/04/19 Javascript
Angular 4.x中表单Reactive Forms详解
2017/04/25 Javascript
JavaScript之class继承_动力节点Java学院整理
2017/07/03 Javascript
JS实现导出Excel的五种方法详解【附源码下载】
2018/03/15 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
2018/08/28 Javascript
浅谈vue引用静态资源需要注意的事项
2018/09/28 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
2019/03/07 Javascript
vue实现微信浏览器左上角返回按钮拦截功能
2020/01/18 Javascript
JavaScript观察者模式原理与用法实例详解
2020/03/10 Javascript
JavaScript中的全局属性与方法深入解析
2020/06/14 Javascript
Vue获取微博授权URL代码实例
2020/11/04 Javascript
Python入门篇之文件
2014/10/20 Python
python 连接sqlite及简单操作
2017/06/30 Python
Python学习之用pygal画世界地图实例
2017/12/07 Python
Python读取本地文件并解析网页元素的方法
2018/05/21 Python
Python中几种属性访问的区别与用法详解
2018/10/10 Python
Python的iOS自动化打包实例代码
2018/11/22 Python
django主动抛出403异常的方法详解
2019/01/04 Python
基于python历史天气采集的分析
2019/02/14 Python
在Python中过滤Windows文件名中的非法字符方法
2019/06/10 Python
Python tkinter三种布局实例详解
2020/01/06 Python
python 实现两个npy档案合并
2020/07/01 Python
vscode调试django项目的方法
2020/08/06 Python
python 模拟登陆github的示例
2020/12/04 Python
工商学院毕业生自荐信
2013/11/12 职场文书
2014春晚主持词
2014/03/25 职场文书
商家认证委托书格式
2014/10/16 职场文书
求职自我评价参考范文
2019/05/16 职场文书
2019年特色火锅店的创业计划书模板
2019/08/28 职场文书