小程序测试后台服务的方法(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 获取、设置HTML或TEXT内容的两种方法
May 23 Javascript
Javascript中的Callback方法浅析
Mar 15 Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 Javascript
JS实现兼容性好,带缓冲的动感网页右键菜单效果
Sep 18 Javascript
localStorage实现便签小程序
Nov 28 Javascript
jQuery中DOM节点删除之empty与remove
Jan 20 Javascript
AngularJS实现路由实例
Feb 12 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 Javascript
Angular5给组件本身的标签添加样式class的方法
Apr 07 Javascript
vue项目打包之后背景样式丢失的解决方案
Jan 17 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 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中fgetcsv()函数用法实例
2014/11/28 PHP
PHP5全版本绕过open_basedir读文件脚本漏洞详细介绍
2015/01/20 PHP
调试WordPress中定时任务的相关PHP脚本示例
2015/12/10 PHP
PHP函数按引用传递参数及函数可选参数用法示例
2018/06/04 PHP
javascript中的几个运算符
2007/06/29 Javascript
在一个浏览器里呈现所有浏览器测试结果的前端测试工具的思路
2010/03/02 Javascript
js实现鼠标拖动图片并兼容IE/FF火狐/谷歌等主流浏览器
2013/06/06 Javascript
简单实用的全选反选按钮例子
2013/10/18 Javascript
Js操作Select大全(取值、设置选中等等)
2013/10/29 Javascript
js sort 二维数组排序的用法小结
2014/01/24 Javascript
jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
2015/10/23 Javascript
浅析jquery数组删除指定元素的方法:grep()
2016/05/19 Javascript
基于JS快速实现导航下拉菜单动画效果附源码下载
2016/10/27 Javascript
JS返回顶部实例代码
2020/08/09 Javascript
Vue递归实现树形菜单方法实例
2018/11/06 Javascript
[36:33]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第二场 11.29
2020/12/02 DOTA
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
简单介绍Python的Django框架加载模版的方式
2015/07/20 Python
pycharm中连接mysql数据库的步骤详解
2017/05/02 Python
基于Django的ModelForm组件(详解)
2017/12/07 Python
python解决字符串倒序输出的问题
2018/06/25 Python
Python爬虫框架Scrapy常用命令总结
2018/07/26 Python
python 并发下载器实现方法示例
2019/11/22 Python
Python数据可视化:饼状图的实例讲解
2019/12/07 Python
mac使用python识别图形验证码功能
2020/01/10 Python
python实现mean-shift聚类算法
2020/06/10 Python
Backcountry旗下的户外商品闪购网站:steep&cheap
2016/09/22 全球购物
New Balance法国官方网站:购买鞋子和服装
2019/09/01 全球购物
北京天润融通.net面试题笔试题
2012/02/20 面试题
部队学习十八大感言
2014/01/11 职场文书
品酒会策划方案
2014/05/26 职场文书
学习十八大标语
2014/10/09 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
升职自荐信范文
2015/03/27 职场文书
2019年浪漫婚礼证婚词
2019/06/27 职场文书
解决hive中导入text文件遇到的坑
2021/04/07 Python