小程序测试后台服务的方法(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 相关文章推荐
JS原型对象通俗&quot;唱法&quot;
Dec 27 Javascript
Java中Timer的用法详解
Oct 21 Javascript
javascript的几种写法总结
Sep 30 Javascript
利用Node.JS实现邮件发送功能
Oct 21 Javascript
JavaScript的继承实现小结
May 07 Javascript
angular $watch 一个变量的变化(实例讲解)
Aug 02 Javascript
jQuery图片加载失败替换默认图片方法汇总
Nov 29 jQuery
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
微信小程序仿今日头条导航栏滚动解析
Aug 20 Javascript
在Vuex中Mutations修改状态操作
Jul 24 Javascript
使用Webpack 搭建 Vue3 开发环境过程详解
Jul 28 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
完美解决phpdoc导出文档中@package的warning及Error的错误
2016/05/17 PHP
Zend Framework前端控制器用法示例
2016/12/11 PHP
阿里云Win2016安装Apache和PHP环境图文教程
2018/03/11 PHP
Javascript中的数学函数集合
2007/05/08 Javascript
jValidate 基于jQuery的表单验证插件
2009/12/12 Javascript
jquery 学习笔记一
2010/04/07 Javascript
jQuery提交多个表单的小技巧
2014/07/27 Javascript
js中的getAttribute方法使用示例
2014/08/01 Javascript
jQuery中prevUntil()方法用法实例
2015/01/08 Javascript
百度地图api如何使用
2015/08/03 Javascript
jQuery实现信息提示框(带有圆角框与动画)效果
2015/08/07 Javascript
jQuery-1.9.1源码分析系列(十)事件系统之事件包装
2015/11/20 Javascript
深入理解jquery中的事件与动画
2016/05/24 Javascript
javascript事件模型介绍
2016/05/31 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
AngularJS 控制器 controller的详解
2017/10/17 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
2017/11/28 Javascript
使用selenium抓取淘宝的商品信息实例
2018/02/06 Javascript
node 命令方式启动修改端口的方法
2018/05/12 Javascript
详解vue的diff算法原理
2018/05/20 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
如何在wxml中直接写js代码(wxs)
2019/11/14 Javascript
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Android应用开发中Action bar编写的入门教程
2016/02/26 Python
Python实现提取XML内容并保存到Excel中的方法
2018/09/01 Python
numpy.transpose()实现数组的转置例子
2019/12/02 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
python利用文件时间批量重命名照片和视频
2021/02/09 Python
详解html5页面 rem 布局适配方法
2018/01/12 HTML / CSS
HTML5拖放API实现自动生成相框功能
2020/04/07 HTML / CSS
Kendra Scott官网:美国领先的时尚配饰品牌
2020/10/22 全球购物
竞选劳动委员演讲稿
2014/04/28 职场文书
中华在我心中演讲稿
2014/09/13 职场文书
社区党务工作总结2015
2015/05/19 职场文书
高二数学教学反思
2016/02/18 职场文书
Python游戏开发实例之graphics实现AI五子棋
2021/11/01 Python