小程序测试后台服务的方法(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代码必备[js多浏览器兼容写法]
Oct 29 Javascript
JavaScript对象链式操作代码(jquery)
Jul 04 Javascript
最简单的js图片切换效果实现代码
Sep 24 Javascript
js的alert样式如何更改如背景颜色
Jan 22 Javascript
离开当前页面前使用js判断条件提示是否要离开页面
May 02 Javascript
jQuery的层级查找方式分析
Jun 16 Javascript
浅谈js函数中的实例对象、类对象、局部变量(局部函数)
Nov 20 Javascript
Vue2.x中的Render函数详解
May 30 Javascript
微信小程序实现侧边分类栏
Oct 21 Javascript
vue+vant实现商品列表批量倒计时功能
Jan 13 Javascript
JavaScript计算出两个数的差值
Mar 19 Javascript
解决Ant Design Modal内嵌Form表单initialValue值不动态更新问题
Oct 29 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
php记录日志的实现代码
2011/08/08 PHP
PHP利用str_replace防注入的方法
2013/11/10 PHP
wordpress安装过程中遇到中文乱码的处理方法
2015/04/21 PHP
PDO::getAvailableDrivers讲解
2019/01/28 PHP
php模拟post提交请求调用接口示例解析
2020/08/07 PHP
通过JQuery实现win8一样酷炫的动态磁贴效果(示例代码)
2013/07/13 Javascript
JQuery写动态树示例代码
2013/07/31 Javascript
查找iframe里元素的方法可传参
2013/09/11 Javascript
JS如何将数字类型转化为没3个一个逗号的金钱格式
2014/01/27 Javascript
jquery查找父元素、子元素(个人经验总结)
2014/04/09 Javascript
jQuery绑定事件不执行但alert后可以正常执行
2014/06/03 Javascript
Javascript前端UI框架Kit使用指南之Kitjs简介
2014/11/28 Javascript
深入理解JavaScript系列(27):设计模式之建造者模式详解
2015/03/03 Javascript
JavaScript用select实现日期控件
2015/07/17 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
vuejs项目打包之后的首屏加载优化及打包之后出现的问题
2018/04/01 Javascript
写一个Vue Popup组件
2019/02/25 Javascript
JS中实现浅拷贝和深拷贝的代码详解
2019/06/05 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
微信小程序实现下滑到底部自动翻页功能
2020/03/07 Javascript
[40:04]Secret vs Infamous 2019国际邀请赛淘汰赛 败者组 BO3 第二场 8.23
2019/09/05 DOTA
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
Pandas探索之高性能函数eval和query解析
2017/10/28 Python
Python操作mongodb数据库的方法详解
2018/12/08 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
Python递归函数 二分查找算法实现解析
2019/08/12 Python
Python对wav文件的重采样实例
2020/02/25 Python
中东地区最大的奢侈品市场:The Luxury Closet
2019/04/09 全球购物
火山咖啡:Volcanica Coffee
2019/10/29 全球购物
应届硕士毕业生自荐信
2014/05/26 职场文书
新学期开学标语
2014/06/30 职场文书
债务纠纷代理词
2015/05/25 职场文书
MySQL开启事务的方式
2021/06/26 MySQL
vue自定义右键菜单之全局实现
2022/04/09 Vue.js