小程序测试后台服务的方法(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 相关文章推荐
重载toString实现JS HashMap分析
Mar 13 Javascript
使用JavaScript构建JSON格式字符串实现步骤
Mar 22 Javascript
onkeydown事件解决按回车键直接提交数据的需求
Apr 11 Javascript
javascript类型转换使用方法
Feb 08 Javascript
JavaScript获取当前url根目录(路径)
Jun 17 Javascript
Bootstrap基本布局实现方法详解
Nov 25 Javascript
vue.js的提示组件
Mar 02 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
setTimeout与setInterval的区别浅析
Mar 23 Javascript
jquery.pager.js实现分页效果
Jul 29 jQuery
layui 选择列表,打勾,点击确定返回数据的例子
Sep 02 Javascript
electron踩坑之remote of undefined的解决
Oct 06 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轻松实现中英文混排字符串截取
2014/05/28 PHP
如何解决phpmyadmin导入数据库文件最大限制2048KB
2015/10/09 PHP
PHP中模糊查询并关联三个select框
2017/06/19 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
2011/04/06 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
JavaScript 对任意元素,自定义右键菜单的实现方法
2013/05/08 Javascript
使用mini-define实现前端代码的模块化管理
2014/12/25 Javascript
js中 计算两个日期间的工作日的简单实例
2016/08/08 Javascript
jQuery双向列表选择器DIV模拟版
2016/11/01 Javascript
通过源码分析Vue的双向数据绑定详解
2017/09/24 Javascript
jQuery实现checkbox的简单操作
2017/11/18 jQuery
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
JavaScript常用8种数组去重代码实例
2020/09/09 Javascript
js+for循环实现字符串自动转义的代码(把后面的字符替换前面的字符)
2020/12/24 Javascript
[01:53]2016完美“圣”典风云人物:Maybe专访
2016/12/05 DOTA
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
Python多线程结合队列下载百度音乐的方法
2015/07/27 Python
Flask框架各种常见装饰器示例
2018/07/17 Python
python使用selenium实现批量文件下载
2019/03/11 Python
Python3转换html到pdf的不同解决方案
2019/03/11 Python
python中pip的使用和修改下载源的方法
2019/07/08 Python
详解Python 中sys.stdin.readline()的用法
2019/09/12 Python
Django用内置方法实现简单搜索功能的方法
2020/12/18 Python
加拿大最大的书店:Indigo
2017/01/01 全球购物
英国第一的购买便宜玩具和游戏的在线购物网站:Bargain Max
2018/01/24 全球购物
承办会议欢迎词
2014/01/17 职场文书
读书月活动方案
2014/05/22 职场文书
2014年人事工作总结范文
2014/11/19 职场文书
2014年依法行政工作总结
2014/11/19 职场文书
考试作弊检讨
2015/01/27 职场文书
撤诉申请书法院范本
2015/05/18 职场文书
花木兰观后感
2015/06/10 职场文书
退休教师追悼词
2015/06/23 职场文书
高中政治教学反思
2016/02/23 职场文书