小程序测试后台服务的方法(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 相关文章推荐
Jquery在IE7下无法使用 $.ajax解决方法
Nov 11 Javascript
JSQL 基于客户端的成绩统计实现方法
May 05 Javascript
理解Javascript_15_作用域分配与变量访问规则,再送个闭包
Oct 20 Javascript
Prototype源码浅析 String部分(一)之有关indexOf优化
Jan 15 Javascript
javascript:history.go()和History.back()的区别及应用
Nov 25 Javascript
Angularjs 实现分页功能及示例代码
Sep 14 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
JS实现的DIV块来回滚动效果示例
Feb 07 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
浅谈Angular7 项目开发总结
Dec 19 Javascript
js String.prototype.trim字符去前后空格的扩展
Aug 23 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面向对象全攻略 (六)__set() __get() __isset() __unset()的用法
2009/09/30 PHP
PHP 数组基础知识小结
2010/08/20 PHP
linux使用crontab实现PHP执行计划定时任务
2014/05/10 PHP
php中Snoopy类用法实例
2015/06/19 PHP
php的常量和变量实例详解
2017/06/27 PHP
jQuery弹出层插件简化版代码下载
2008/10/16 Javascript
js CSS操作方法集合
2008/10/31 Javascript
jqPlot 图表中文API使用文档及源码和在线示例
2012/02/07 Javascript
dtree 网页树状菜单及传递对象集合到js内,动态生成节点
2012/04/14 Javascript
Jquery 监视按键,按下回车键触发某方法的实现代码
2014/05/11 Javascript
javascript操作select元素实例分析
2015/03/27 Javascript
分享Javascript实用方法二
2015/12/13 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
2016/05/18 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
Mint UI 基于 Vue.js 移动端组件库
2017/11/07 Javascript
将Sublime Text 3 添加到右键中的简单方法
2017/12/12 Javascript
Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制
2019/09/05 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
JS实现压缩上传图片base64长度功能
2019/12/03 Javascript
Python生成不重复随机值的方法
2015/05/11 Python
python抓取网页中图片并保存到本地
2015/12/01 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
Python自然语言处理之词干,词形与最大匹配算法代码详解
2017/11/16 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
transform python环境快速配置方法
2018/09/27 Python
浅谈python的dataframe与series的创建方法
2018/11/12 Python
Python面向对象之类的内置attr属性示例
2018/12/14 Python
详解Python 多线程 Timer定时器/延迟执行、Event事件
2019/06/27 Python
python使用socket 先读取长度,在读取报文内容示例
2019/09/26 Python
Python argparse模块应用实例解析
2019/11/15 Python
Python中如何将一个类方法变为多个方法
2019/12/30 Python
学生逃课万能检讨书2000字
2015/02/17 职场文书
2016年心理学教育培训学习心得体会
2016/01/12 职场文书
二年级数学教学反思
2016/02/16 职场文书
2016年世界人口日宣传活动总结
2016/04/05 职场文书
浅析Django接口版本控制
2021/06/26 Python