小程序测试后台服务的方法(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读取xml实现javascript分页
Dec 13 Javascript
JQuery节点元素属性操作方法
Jun 11 Javascript
jquery实现鼠标滑过小图查看大图的方法
Jul 20 Javascript
jquery.zclip轻量级复制失效问题
Jan 08 Javascript
fullCalendar中文API官方文档
Feb 07 Javascript
C#实现将一个字符转换为整数
Dec 12 Javascript
详解Webpack+Babel+React开发环境的搭建的方法步骤
Jan 09 Javascript
Node.js的进程管理的深入理解
Jan 09 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
Vuejs通过拖动改变元素宽度实现自适应
Sep 02 Javascript
返回上一个url并刷新界面的js代码
Sep 12 Javascript
vue中利用three.js实现全景图的完整示例
Dec 07 Vue.js
详解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效率,提高php性能的一些方法
2011/03/24 PHP
PHP的Laravel框架中使用消息队列queue及异步队列的方法
2016/03/21 PHP
PHP小偷程序的设计与实现方法详解
2016/10/15 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
使用ucenter实现多站点同步登录的讲解
2019/03/21 PHP
Javascript图像处理—为矩阵添加常用方法
2012/12/27 Javascript
javascript中的if语句使用介绍
2013/11/20 Javascript
JS获取URL中的参数数据
2013/12/05 Javascript
DOM 事件流详解
2015/01/20 Javascript
Bootstrap实现提示框和弹出框效果
2017/01/11 Javascript
js和jquery中获取非行间样式
2017/05/05 jQuery
jQuery实现全选、反选和不选功能
2017/08/16 jQuery
JS简单实现查看文档创建日期、修改日期和文档大小的方法示例
2018/04/08 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
Vue之封装公用变量以及实现方式
2020/07/31 Javascript
讲解Python中for循环下的索引变量的作用域
2015/04/15 Python
python实现dijkstra最短路由算法
2019/01/17 Python
django删除表重建的实现方法
2019/08/28 Python
关于Python3爬虫利器Appium的安装步骤
2020/07/29 Python
搭建pypi私有仓库实现过程详解
2020/11/25 Python
python如何修改文件时间属性
2021/02/05 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
Evisu官方网站:日本牛仔品牌,时尚街头设计风格
2016/12/30 全球购物
澳大利亚UGG工厂直销:Australian Ugg Boots
2017/10/14 全球购物
德国网上超市:myTime.de
2019/08/26 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
Linux常见面试题
2016/10/04 面试题
秘书行业自我鉴定范文
2013/12/30 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
淘宝店铺营销方案
2014/02/13 职场文书
信息技术培训感言
2014/03/06 职场文书
会计岗位职责范本
2014/03/07 职场文书
村干部群众路线整改措施思想汇报
2014/10/12 职场文书
HTML基础-标签分类(闭合标签,空标签,块级元素,行内元素,行级块元素,可替换元素)
2021/03/31 HTML / CSS
python如何获取网络数据
2021/04/11 Python
nginx 添加http_stub_status_module模块
2022/05/25 Servers