小程序测试后台服务的方法(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中的常见排序算法
Mar 27 Javascript
JS 无法通过W3C验证的处理方法
Mar 09 Javascript
JS中动态添加事件(绑定事件)的代码
Jan 09 Javascript
jQuery筛选器children()案例详解(图文)
Feb 17 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
浅谈javascript的Touch事件
Sep 27 Javascript
JS实现双击屏幕滚动效果代码
Oct 28 Javascript
jQuery Ajax File Upload实例源码
Dec 12 Javascript
windows下vue-cli导入bootstrap样式
Apr 25 Javascript
vuex操作state对象的实例代码
Apr 25 Javascript
如何在Angular8.0下使用ngx-translate进行国际化配置
Jul 24 Javascript
vue实现在线预览pdf文件和下载(pdf.js)
Nov 26 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新手上路(十三)
2006/10/09 PHP
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
Laravel中使用阿里云OSS Composer包分享
2015/02/10 PHP
判断在css加载完毕后执行后续代码示例
2014/09/03 Javascript
解决js页面滚动效果scrollTop在FireFox与Chrome浏览器间的兼容问题的方法
2015/12/03 Javascript
AngularJS手动表单验证
2016/02/01 Javascript
AngularJS读取JSON及XML文件的方法示例
2017/05/25 Javascript
Angular5集成eventbus的示例代码
2018/07/19 Javascript
vue 点击按钮增加一行的方法
2018/09/07 Javascript
ES6 Map结构的应用实例分析
2019/06/26 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
Python中的装饰器用法详解
2015/01/14 Python
Django的数据模型访问多对多键值的方法
2015/07/21 Python
在Linux系统上部署Apache+Python+Django+MySQL环境
2015/12/24 Python
Python中的pack和unpack的使用
2018/03/12 Python
对python Tkinter Text的用法详解
2018/10/11 Python
Python 脚本实现淘宝准点秒杀功能
2019/11/13 Python
python使用opencv resize图像不进行插值的操作
2020/07/05 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
通过代码实例了解Python异常本质
2020/09/16 Python
Debenhams爱尔兰:英国知名的百货公司
2017/01/02 全球购物
怎样建立和理解非常复杂的声明?例如定义一个包含N 个指向返回 指向字符的指针的函数的指针的数组?
2013/03/19 面试题
大学生毕业自我评价范文分享
2013/11/07 职场文书
社区服务活动总结
2014/05/07 职场文书
社区平安建设方案
2014/05/25 职场文书
公司副总经理任命书
2014/06/05 职场文书
拒绝黄毒毒宣传标语
2014/06/26 职场文书
会计专业自荐书
2014/07/08 职场文书
党支部活动策划方案
2014/08/18 职场文书
追悼会答谢词
2015/01/05 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
电影建党伟业观后感
2015/06/01 职场文书
创作书写之导游词实用技巧分享(干货)
2019/12/20 职场文书
如何用python识别滑块验证码中的缺口
2021/04/01 Python
Vue.js中v-bind指令的用法介绍
2022/03/13 Vue.js