小程序测试后台服务的方法(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 相关文章推荐
javascript中的几个运算符
Jun 29 Javascript
javascript 写类方式之五
Jul 05 Javascript
从阶乘函数对比Javascript和C#的异同
May 31 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
Oct 01 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
jQuery+CSS实现的网页二级下滑菜单效果
Aug 25 Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 Javascript
JavaScript解决浮点数计算不准确问题的方法分析
Jul 09 Javascript
layer.js之回调销毁对话框的例子
Sep 11 Javascript
vue项目中定义全局变量、函数的几种方法
Nov 08 Javascript
Angular封装表单控件及思想总结
Dec 11 Javascript
JS如何实现网站中PC端和手机端自动识别并跳转对应的代码
Jan 08 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获取网络文件的实现代码
2010/01/01 PHP
php 上传文件类型判断函数(避免上传漏洞 )
2010/06/08 PHP
php cli 小技巧
2013/06/03 PHP
PHP保留两位小数并且四舍五入及不四舍五入的方法
2013/09/22 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
简单了解将WordPress中的工具栏移到底部的小技巧
2015/12/31 PHP
Zend Framework教程之Bootstrap类用法概述
2016/03/14 PHP
php把时间戳转换成多少时间之前函数的实例
2016/11/16 PHP
Zend Framework入门应用实例详解
2016/12/11 PHP
Laravel中日期时间处理包Carbon的简单使用
2017/09/21 PHP
De facto standard 世界上不可思议的事实标准
2010/08/29 Javascript
jquery上传插件fineuploader上传文件使用方法(jquery图片上传插件)
2013/12/05 Javascript
jQuery实现的向下图文信息滚动效果
2015/05/03 Javascript
AngularJS中的Directive实现延迟加载
2016/01/25 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
用jquery的attr方法实现图片切换效果
2017/02/05 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
2017/08/15 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
nodejs 使用nodejs-websocket模块实现点对点实时通讯
2018/11/28 NodeJs
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
2019/07/26 Javascript
vue element 中的table动态渲染实现(动态表头)
2019/11/21 Javascript
微信小程序开发(二):页面跳转并传参操作示例
2020/06/01 Javascript
Python中shapefile转换geojson的示例
2019/01/03 Python
python队列Queue的详解
2019/05/10 Python
python修改字典键(key)的方法
2019/08/05 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
Exoticca英国:以最优惠的价格提供豪华异国情调旅行
2018/10/18 全球购物
护理学中专毕业生求职信
2013/11/11 职场文书
个人函授自我鉴定
2014/03/25 职场文书
老公给老婆的保证书
2014/04/28 职场文书
创先争优标语
2014/06/27 职场文书
2015年派出所民警工作总结
2015/04/24 职场文书
狼牙山五壮士观后感
2015/06/09 职场文书
忠诚教育学习心得体会
2016/01/23 职场文书