小程序测试后台服务的方法(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实现下拉菜单的二级联动利用json对象从DB取值显示联动
Mar 27 Javascript
基于jQuery Tipso插件实现消息提示框特效
Mar 16 Javascript
jQuery实现查找链接文字替换属性的方法
Jun 27 Javascript
js实现可旋转的立方体模型
Oct 16 Javascript
基于js的变量提升和函数提升(详解)
Sep 17 Javascript
Vue的移动端多图上传插件vue-easy-uploader的示例代码
Nov 27 Javascript
vue实现微信分享朋友圈,发送朋友的示例讲解
Feb 10 Javascript
Bootbox将后台JSON数据填充Form表单的实例代码
Sep 10 Javascript
基于vue中keep-alive缓存问题的解决方法
Sep 21 Javascript
ES6基础之 Promise 对象用法实例详解
Aug 22 Javascript
vue项目中常见问题及解决方案(推荐)
Oct 21 Javascript
Vue数据双向绑定底层实现原理
Nov 22 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/08/08 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
使用php实现快钱支付功能(涉及到接口)
2013/07/01 PHP
PHP图像处理之imagecreate、imagedestroy函数介绍
2014/11/19 PHP
PHP去除字符串最后一个字符的三种方法实例
2017/03/01 PHP
setTimeout()递归调用不加引号出错的解决方法
2014/09/05 Javascript
JavaScript的arguments对象应用示例
2014/09/15 Javascript
JavaScript数组前面插入元素的方法
2015/04/06 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
在Node.js中使用HTTP上传文件的方法
2015/06/23 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
JS中artdialog弹出框控件之提交表单思路详解
2016/04/18 Javascript
AngularJS入门教程之MVC架构实例分析
2016/11/01 Javascript
基于JavaScript实现窗口拖动效果
2017/01/18 Javascript
jquery获取select,option所有的value和text的实例
2017/03/06 Javascript
微信小程序-横向滑动scroll-view隐藏滚动条
2017/04/20 Javascript
vue.js父组件使用外部对象的方法示例
2017/04/25 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
微信小程序事件流原理解析
2019/11/27 Javascript
django模型中的字段和model名显示为中文小技巧分享
2014/11/18 Python
基于循环神经网络(RNN)实现影评情感分类
2018/03/26 Python
python pandas dataframe 行列选择,切片操作方法
2018/04/10 Python
基于python及pytorch中乘法的使用详解
2019/12/27 Python
Python sep参数使用方法详解
2020/02/12 Python
Python程序慢的重要原因
2020/09/04 Python
突袭HTML5之Javascript API扩展4—拖拽(Drag/Drop)概述
2013/01/31 HTML / CSS
EJB包括(SessionBean,EntityBean)说出他们的生命周期,及如何管理事务的
2015/07/24 面试题
幼儿教师培训感言
2014/03/08 职场文书
农村产权制度改革实施方案
2014/03/21 职场文书
作文评语大全
2014/04/23 职场文书
民主生活会汇报材料
2014/12/15 职场文书
Python 文本滚动播放器的实现代码
2021/04/25 Python
python元组打包和解包过程详解
2021/08/02 Python
Python sklearn分类决策树方法详解
2022/09/23 Python