小程序测试后台服务的方法(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 相关文章推荐
看了就知道什么是JSON
Dec 09 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
Jan 24 Javascript
在JavaScript中重写jQuery对象的方法实例教程
Aug 25 Javascript
判断浏览器的内核及版本号方法汇总
Jan 05 Javascript
AngularJS基础 ng-disabled 指令详解及简单示例
Aug 01 Javascript
AngularJS 实现JavaScript 动画效果详解
Sep 08 Javascript
Bootstrap 响应式实用工具实例详解
Mar 29 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
Nov 13 jQuery
详解vue通过NGINX部署在子目录或者二级目录实践
Sep 03 Javascript
微信小程序整合使用富文本编辑器的方法详解
Apr 25 Javascript
layui使用templet格式化表格数据的方法
Sep 16 Javascript
JavaScript中document.activeELement焦点元素介绍
Nov 27 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多维数组元素操作类的方法
2016/11/14 PHP
解决PHP 7编译安装错误:cannot stat ‘phar.phar’: No such file or directory
2017/02/25 PHP
PHP下 Mongodb 连接远程数据库的实例代码
2017/08/30 PHP
laravel-admin 后台表格筛选设置默认的查询日期方法
2019/10/03 PHP
Jquery中增加参数与Json转换代码
2009/11/20 Javascript
javascript特殊用法示例介绍
2013/11/29 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
Jquery 实现图片轮换
2015/01/28 Javascript
详解JavaScript中Hash Map映射结构的实现
2016/05/21 Javascript
jQuery使用经验小技巧(推荐)
2016/05/31 Javascript
Bootstrap页面标题Page Header的实现方法
2017/03/22 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
微信小程序dom操作的替代思路实例分析
2018/12/06 Javascript
nvm、nrm、npm 安装和使用详解(小结)
2019/01/17 Javascript
JS实现的全选、全不选及反选功能【案例】
2019/02/19 Javascript
mpvue 项目初始化及实现授权登录的实现方法
2020/07/20 Javascript
React Native登录之指纹登录篇的示例代码
2020/11/03 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
使用Python开发windows GUI程序入门实例
2014/10/23 Python
用实例解释Python中的继承和多态的概念
2015/04/27 Python
简单介绍Python中的JSON使用
2015/04/28 Python
python 默认参数问题的陷阱
2016/02/29 Python
分享8个非常流行的 Python 可视化工具包
2019/06/05 Python
Django发送邮件和itsdangerous模块的配合使用解析
2019/08/10 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
python如何实现单链表的反转
2020/02/10 Python
Pycharm同步远程服务器调试的方法步骤
2020/11/04 Python
strstr()的简单实现
2013/09/26 面试题
毕业生找工作推荐信
2013/11/21 职场文书
我的梦想演讲稿1000字
2014/08/21 职场文书
联谊活动总结
2014/08/28 职场文书
县政府班子个人对照检查材料
2014/10/05 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
年底个人总结范文
2015/03/10 职场文书
小学安全工作总结2015
2015/05/18 职场文书
uniapp引入支付宝原生扫码插件步骤详解
2022/07/23 Javascript