小程序测试后台服务的方法(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 相关文章推荐
Javascript Request获取请求参数如何实现
Nov 28 Javascript
javascript实现的左右无缝滚动效果
Sep 19 Javascript
Bootstrap进度条实现代码解析
Mar 07 Javascript
vue之数据交互实例代码
Jun 16 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
微信小程序实现富文本图片宽度自适应的方法
Jan 20 Javascript
JS实现换肤功能的方法实例详解
Jan 30 Javascript
小程序实现横向滑动日历效果
Oct 21 Javascript
小程序瀑布流组件实现翻页与图片懒加载
May 19 Javascript
vue结合el-upload实现腾讯云视频上传功能
Jul 01 Javascript
Ant Design moment对象和字符串之间的相互转化教程
Oct 27 Javascript
Vue过滤器(filter)实现及应用场景详解
Jun 15 Vue.js
详解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
剧场版动画《PSYCHO-PASS 3 FIRST INSPECTOR》3月27日日本上映!
2020/03/06 日漫
PHP无限分类的类
2007/01/02 PHP
php数组函数序列之in_array() 查找数组值是否存在
2011/10/29 PHP
解析PHP实现多进程并行执行脚本
2013/06/18 PHP
thinkphp实现上一篇与下一篇的方法
2014/12/08 PHP
Zend Studio使用技巧两则
2016/04/01 PHP
中高级PHP程序员应该掌握哪些技术?
2016/09/23 PHP
创建无限极分类树型结构的简单方法
2017/06/20 PHP
php实现的mongoDB单例模式操作类
2018/01/20 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
php中上传文件的的解决方案
2018/09/25 PHP
浅谈laravel框架与thinkPHP框架的区别
2019/10/23 PHP
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML
2011/10/16 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
wangEditor编辑器失去焦点后仍然可以在原位置插入图片分析
2015/05/06 Javascript
微信WeixinJSBridge API使用实例
2015/05/25 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
使用Web Uploader实现多文件上传
2016/06/08 Javascript
通过JS和PHP两种方法判断用户请求时使用的浏览器类型
2016/09/01 Javascript
JS控制页面跳转时未请求要跳转的地址怎么回事
2016/10/14 Javascript
js无提示关闭浏览器窗口的两种方法分析
2016/11/06 Javascript
JS+HTML5实现图片在线预览功能
2017/07/22 Javascript
vue v-model动态生成详解
2018/06/30 Javascript
Vue项目中配置pug解析支持
2019/05/10 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
python GUI实例学习
2017/11/21 Python
Python微医挂号网医生数据抓取
2019/01/24 Python
基于python判断目录或者文件代码实例
2019/11/29 Python
Pycharm2020.1安装中文语言插件的详细教程(不需要汉化)
2020/08/07 Python
Canvas图片分割效果的实现
2019/07/29 HTML / CSS
乡村卫生服务一体化管理实施方案
2014/03/30 职场文书
学习党章心得体会2016
2016/01/15 职场文书
七年级作文(600字3篇)
2019/09/24 职场文书
html5 录制mp3音频支持采样率和比特率设置
2021/07/15 Javascript