性能测试之微信小程序小试 _性能测试

胸怀万里世界，放眼无限未来。这篇文章主要讲述性能测试之微信小程序小试相关的知识，希望能为你提供帮助。
背景

微信小程序是目前最常用的一个小小应用，也是很多电商、餐饮等很多行业推广不可少的一个产品，那么微信小程序性能应该怎么测试，有一句这样说的【在新事物和不可知的未来中有勇力继续前进、自信一切可以被了知和把握】咱们可以聊一聊，怎么压测微信小程序。

本次目的：现在很多人对小程序的性能测试存在着误解，以为会有什么特殊的处理，但实际上并没有，逻辑仍然是html的前端页面和后端的服务器支撑。

所以从实现上来说，仍然从接口上执行性能测试即可，其接口的逻辑，如下文所述。

百度百科解说

微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

分析在当前这个前后分离的时代，微信小程序亦复如此。既然想压小程序那么就开始包丁解牛了解小程序的结构。

创建微信小程序工程1、下载开发者工具
https://developers.weixin.qq.com/miniprogram/dev/devtools/devtools.html 并且安装成功

文章图片

新建项目

文章图片

AppID百度查下怎么申请，因为咱们目的是想知道怎么做性能测试，就不教大家怎么获取。
输入AppID创建成功项目

开发者工具简单介绍

文章图片

简单代码演示表单代码演示
index.wxml

< !--index.wxml--> < view class="container"> < form bindsubmit="submit"> < view> < text> 姓名：< /text> < input name="name" value="https://www.songbingjia.com/android/{{name}}" /> < /view> < view> < text> 性别：< /text> < radio-group name="gender"> < label wx:for="{{gender}}" wx:key="value"> < radio value="https://www.songbingjia.com/android/{{item.value}}" checked="{{item.checked}}" /> {{item.name}}< /label> < /radio-group> < /view> < view> < text> 专业技能：< /text> < checkbox-group name="skills"> < label wx:for="{{skills}}" wx:key="value"> < checkbox value="https://www.songbingjia.com/android/{{item.value}}" checked="{{item.checked}}" /> {{item.name}}< /label> < /checkbox-group> < /view> < view> < text> 您的意见：< /text> < textarea name="opinion" value="https://www.songbingjia.com/android/{{opinion}}" /> < /view> < button form-type="submit"> 提交< /button> < /form> < /view>

index.js

Page({/*** 页面的初始数据*/data: {name: \'初始化数据\',gender: [{name: \'男\',value: \'0\',checked: true},{name: \'女\',value: \'1\',checked: false}],skills: [{name: \'HTML\',value: \'html\',checked: true},{name: \'CSS\',value: \'css\',checked: true},{name: \'javascript\',value: \'js\',checked: false},{name: \'Photoshop\',value: \'ps\',checked: false},],opinion: \'测试\'},

onLoad: function (options) {//获取数据wx.request({url: \'http://127.0.0.1:8082/weixin\',success: res => {console.log(res.data)this.setData(res.data.extend.infopage)}})},//提交数据submit: function (e) {wx.request({method: \'post\',url: \'http://127.0.0.1:8082/weixin\',data: e.detail.value,success: function (res) {console.log(res)}})}})

index.json

{"usingComponents": {},"navigationBarTitleText": "7d微信小程序性能测试演示"}

index.wxss

.container {margin: 50rpx; }
view {margin-bottom: 30rpx; }
input {width: 600rpx; margin-top: 10rpx; border-bottom: 2rpx solid #ccc; }
label {display: block; margin: 8rpx; }
textarea {width: 600rpx; height: 100rpx; margin-top: 10rpx; border: 2rpx solid #eee; }

结果显示：

文章图片

文章图片

服务端代码通过springboot搭建服务端，代码如下

@Controllerpublic class WeiXInController {
@GetMapping("/weixin")@ResponseBodypublic Msg getWeixint() {HashMap< String, ArrayList< Skills> > hashMap1 = new HashMap< > (); HashMap< String, ArrayList< Gender> > hashMap = new HashMap< > (); HashMap< String, String> hashMap3 = new HashMap< > ();
hashMap3.put("name", "数据下发"); hashMap3.put("opinion", "get获取得数据");
ArrayList< Gender> list = new ArrayList< > (); list.add(new Gender("男", "0", true)); list.add(new Gender("女", "1", true));
ArrayList< Skills> list1 = new ArrayList< > (); list1.add(new Skills("HTML", "html", true)); list1.add(new Skills("CSS", "css", false)); list1.add(new Skills("javaScript", "js", false)); list1.add(new Skills("Photoshop", "ps", true)); list1.add(new Skills("python", "py", true));
hashMap.put("gender", list); hashMap1.put("skills", list1);
HashMap< String, Object> hashMap2 = new HashMap< > ();
hashMap2.putAll(hashMap); hashMap2.putAll(hashMap1); hashMap2.putAll(hashMap3);
System.out.println(hashMap2);
return Msg.success().add("infopage", hashMap2); }
@PostMapping(value = "https://www.songbingjia.com/weixin", produces = "application/json; charset=UTF-8")@ResponseBodypublic Msg getWeixin(@RequestBody SudentInfo sudentInfo) {System.out.println(sudentInfo);
HashMap< String, ArrayList< Skills> > hashMap1 = new HashMap< > (); HashMap< String, ArrayList< Gender> > hashMap = new HashMap< > (); HashMap< String, String> hashMap3 = new HashMap< > ();
hashMap3.put("name", "张三"); hashMap3.put("opinion", "pot数据获取");
ArrayList< Gender> list = new ArrayList< > (); list.add(new Gender("男", "0", true)); list.add(new Gender("女", "1", true));
ArrayList< Skills> list1 = new ArrayList< > (); list1.add(new Skills("HTML", "html", true)); list1.add(new Skills("CSS", "css", false)); list1.add(new Skills("JavaScript", "js", false)); list1.add(new Skills("Photoshop", "ps", true));
hashMap.put("gender", list); hashMap1.put("skills", list1);
HashMap< String, Object> hashMap2 = new HashMap< > ();
hashMap2.putAll(hashMap); hashMap2.putAll(hashMap1); hashMap2.putAll(hashMap3);
System.out.println(hashMap2);
return Msg.success().add("infopage", hashMap2); }
}

启动服务端

文章图片

编译微信小程序
勾选本地调试功能

文章图片

再次编译小程序

文章图片

提交数据

文章图片

调试器查看
数据正常下发

文章图片

小结
小程序通过get请求把数据拉取下拉与通过post请求把数据提交给服务端，服务端数据正常下发给小程序，通过小程序简单代码请求演示，就知道小程序也是通过get或者post请求获取数据。

通过上面简单demo演示相信大家对小程序与服务端数据交互有大概明白，既然知道小程序压测本质与其他压测没有什么差别，就是压测接口，因为样式都在本地，第一次下载就缓存到本地，对服务端没有压力。

看累了送大家一句：
【性能测试之微信小程序小试】 大学之道，在明明德，在亲民，在止於至善。知止而後有定，定而後能静，静而後能安，安而後能虑，虑而後能得。物有本末，事有终始，知所先後，则近道矣。