小程序测试后台服务的方法(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 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
JQuery 选项卡效果(JS与HTML的分离)
Apr 01 Javascript
jquery 图片 上一张 下一张 链接效果(续篇)
Apr 20 Javascript
jQuery Mobile 导航栏代码
Nov 01 Javascript
JS+CSS实现可拖拽的漂亮圆角特效弹出层完整实例
Feb 13 Javascript
jQuery form插件的使用之处理server返回的JSON, XML,HTML数据
Jan 26 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
基于chosen插件实现人员选择树搜索自动筛选功能
Sep 24 Javascript
使用Ajax与服务器(JSON)通信实例
Nov 04 Javascript
Bootstrap基本组件学习笔记之导航(10)
Dec 07 Javascript
javascript checkbox/radio onchange不能兼容ie8处理办法
Jun 13 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 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
基于mysql的bbs设计(二)
2006/10/09 PHP
php模拟asp中的XmlHttpRequest实现http请求的代码
2011/03/24 PHP
PHP实现将textarea的值根据回车换行拆分至数组
2015/06/10 PHP
比较详细的关于javascript 解析json的代码
2009/12/16 Javascript
Javascript 函数中的参数使用分析
2010/03/27 Javascript
基于Jquery制作的幻灯片图集效果打包下载
2011/02/12 Javascript
jQuery获得页面元素的绝对/相对位置即绝对X,Y坐标
2014/03/06 Javascript
javascript(js)的小数点乘法除法问题详解
2014/03/07 Javascript
js设置document.domain实现跨域的注意点分析
2015/05/21 Javascript
利用HTML5的画布Canvas实现刮刮卡效果
2015/09/06 Javascript
plupload+artdialog实现多平台上传文件
2016/07/19 Javascript
详解vue+webpack+express中间件接口使用
2018/07/17 Javascript
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
JavaScript实现的九种排序算法
2019/03/04 Javascript
PHP读取远程txt文档到数组并实现遍历
2020/08/25 Javascript
从零开始用webpack构建一个vue3.0项目工程的实现
2020/09/24 Javascript
详解Python中的Cookie模块使用
2015/07/06 Python
Python中字符串格式化str.format的详细介绍
2017/02/17 Python
Python面向对象之继承代码详解
2018/01/29 Python
python主线程捕获子线程的方法
2018/06/17 Python
Python+OpenCV实现图像融合的原理及代码
2018/12/03 Python
python 实现矩阵按对角线打印
2019/11/29 Python
浅谈keras中的后端backend及其相关函数(K.prod,K.cast)
2020/06/29 Python
Python常用模块函数代码汇总解析
2020/08/31 Python
python 基于selenium实现鼠标拖拽功能
2020/12/24 Python
Python使用cn2an实现中文数字与阿拉伯数字的相互转换
2021/03/02 Python
使用css3实现的tab选项卡代码分享
2014/12/09 HTML / CSS
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
英国鲜花递送:Blossoming Gifts
2020/07/10 全球购物
三维科技面试题
2013/07/27 面试题
大学生职业生涯规划书的基本内容
2014/01/06 职场文书
《风娃娃》教学反思
2014/04/19 职场文书
会计实训报告范文
2014/11/04 职场文书
财务工作个人总结
2015/02/27 职场文书
php去除deprecated的实例方法
2021/11/17 PHP
python中的random模块和相关函数详解
2022/04/22 Python