小程序测试后台服务的方法(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实现导航固定顶部的效果仿蘑菇街
Oct 22 Javascript
js实现ArrayList功能附实例代码
Oct 29 Javascript
node.js使用require()函数加载模块
Nov 26 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
jQuery四种选择器使用及示例
Jun 05 Javascript
jQuery简单实现tab选项卡切换效果
Jun 20 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
May 12 Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 Javascript
微信小程序自定义弹窗wcPop插件
Nov 19 Javascript
基于Node的Axure文件在线预览的实现代码
Aug 28 Javascript
react用Redux中央仓库实现一个todolist
Sep 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
PHP函数之error_reporting(E_ALL ^ E_NOTICE)详细说明
2011/07/01 PHP
PHP循环函数使用介绍之PHP基础入门教程
2013/09/21 PHP
php curl post 时出现的问题解决
2014/01/30 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
ie 调试javascript的工具
2009/04/29 Javascript
JS继承 笔记
2011/07/13 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
一个检测表单数据的JavaScript实例
2014/10/31 Javascript
javascript控制图片播放的实现代码
2020/07/29 Javascript
js右下角弹出提示框示例代码
2016/01/12 Javascript
JS中使用DOM来控制HTML元素
2016/07/31 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
svg动画之动态描边效果
2017/02/22 Javascript
javascript实现计算指定范围内的质数示例
2018/12/29 Javascript
简单了解Javscript中兄弟ifream的方法调用
2019/06/17 Javascript
vue仿淘宝滑动验证码功能(样式模仿)
2019/12/10 Javascript
[18:20]DOTA2 HEROS教学视频教你分分钟做大人-昆卡
2014/06/11 DOTA
[48:52]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第一局
2016/02/25 DOTA
在Qt5和PyQt5中设置支持高分辨率屏幕自适应的方法
2019/06/18 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
python将图片转base64,实现前端显示
2020/01/09 Python
Python使用pdb调试代码的技巧
2020/05/03 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
网站编辑求职信
2013/10/17 职场文书
班主任师德师风自我剖析材料
2014/10/02 职场文书
2015年驾驶员工作总结
2015/04/29 职场文书
被告答辩状范文
2015/05/22 职场文书
家长通知书家长意见
2015/06/03 职场文书
致运动员赞词
2015/07/22 职场文书
应届生们该怎么书写求职信?
2019/07/05 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
用Python生成会跳舞的美女
2022/01/18 Python
vue实现列表拖拽排序的示例代码
2022/04/08 Vue.js