Skip to content

D
DoraemonKit

DiDi / DoraemonKit
10 个月 前同步成功

通知 166
Star 19623
Fork 3062
D
DoraemonKit

前往新版Gitcode，体验更适合开发者的 AI 搜索 >>

提交 7b7c27c6 编写于 作者: Z Zixuan wu
浏览文件
操作

feature: add the httpInjector for miniapp

上级 b15dd7bf
隐藏空白更改
内联 并排
Showing with 891 addition and 1 deletion
miniapp/example/app.json
浏览文件 @ 7b7c27c6
......@@ -8,6 +8,7 @@
"dist/logs/logs",
"dist/positionSimulation/positionSimulation",
"dist/storage/storage",
"dist/httpInjector/httpInjector",
"dist/index/index"
],
"window": {
......
miniapp/example/dist/debug/debug.js
浏览文件 @ 7b7c27c6
......@@ -37,6 +37,11 @@ Page({
"image": "../assets/img/h5door-icon.png",
"path": "../h5door/h5door"
},
{
"title": "请求注射",
"image": "../assets/img/injector.png",
"path": "../httpInjector/httpInjector"
},
{
"title": "更新版本",
"image": "../assets/img/update-version-icon.png",
......
miniapp/example/dist/httpInjector/httpInjector.js 0 → 100644
浏览文件 @ 7b7c27c6
const app = getApp()
app.globalData.originRequest = wx.request
Page({
data: {
interceptors:[],
isInjected: false,
isShowManage:false,
addPopupClass:'',
isShowMask:false,
addInfo:{
key:'',
value:'',
title:'添加',
isRegex: false,
disabled:false
}
},
onLoad () {
this.setData({
addInfo:{
key:'',
value:'',
title:'添加',
isRegex: false,
disabled:false
}
})
this.setData(getApp().globalData['__HTTP_INJECTOR'])
},
onUnload() {
const { interceptors, isInjected } = this.data
getApp().globalData['__HTTP_INJECTOR'] = {interceptors,isInjected}
},
hooksRequestSuccessCallback(res) {
let { data } = res
this.data.interceptors.forEach(interceptor => {
const { isRegex, key, value } = interceptor
const replaceKey = isRegex ? new RegExp(key, 'g') : key
const isNotStringData = typeof data !== 'string'
if (isNotStringData) {
data = JSON.stringify(data)
}
data = data.replace(replaceKey,value)
if (isNotStringData) {
data = JSON.parse(data)
}
})
res.data = data
return res
},
hooksRequest() {
Object.defineProperty(wx, "request" , { writable: true });
const hooksRequestSuccessCallback = this.hooksRequestSuccessCallback
wx.request = function(options){
const originSuccessCallback = options.success
options.success = res => {
originSuccessCallback(hooksRequestSuccessCallback(res))
}
app.globalData.originRequest(options)
}
},
showAddPopup(){
this.setData({
isShowManage:false,
addPopupClass:'add-dialog-active',
addInfo:{
key: '',
value:'',
title:'添加',
disabled:false
}
})
},
closeAddPopup(){
this.closeAll()
},
closeAll(){
this.setData({
isShowManage:false,
isShowMask:false,
addPopupClass:''
})
},
openManageMenu(){
if (this.data.isInjected){
return
}
this.setData({
isShowManage:true,
isShowMask:true
})
},
clearAll(){
this.setData({
isShowManage:false
})
wx.showModal({
title: '提示',
content: '确定要清除所有吗？',
success:res => {
if (res.confirm) {
wx.clearStorageSync()
this.onLoad()
}
this.closeAll()
}
})
},
checkboxChange(event){
this.setData({checkedStorage:event.detail.value})
},
modifyItemValue(event) {
this.setData({
isShowMask:true,
addPopupClass:'add-dialog-active',
addInfo:{
key:event.currentTarget.dataset.key,
value:event.currentTarget.dataset.value,
title:'修改',
disabled:true
}
})
},
bingAddInfoKey(event){
this.setData({'addInfo.key': event.detail.value})
},
bingAddInfoValue(event){
this.setData({'addInfo.value': event.detail.value})
},
bingAddInfoIsRegex(event){
this.setData({'addInfo.isRegex': event.detail.value})
},
addStorage(){
const { key,value, isRegex } = this.data.addInfo
if(key && value){
this.setData({
interceptors: [...this.data.interceptors,{ key, value, isRegex }]
})
}
this.closeAll()
},
toggleInjectionState() {
this.setData({
isInjected: !this.data.isInjected
}, () => {
this.data.isInjected && this.hooksRequest()
})
}
});
miniapp/example/dist/httpInjector/httpInjector.json 0 → 100644
浏览文件 @ 7b7c27c6
{
"navigationBarTitleText": "查看storage",
"usingComponents": {}
}
\ No newline at end of file
miniapp/example/dist/httpInjector/httpInjector.wxml 0 → 100644
浏览文件 @ 7b7c27c6
<view class="injector-container">
<view class="mask" wx:if="{{isShowMask}}" bindtap="closeAll"></view>
<view class="header">
<view class="injection-toggle">
<text>注射器💉开关</text>
<switch color="#337CC4" checked="{{isInjected}}" bindchange="toggleInjectionState" />
</view>
<view class="injector-manage {{ isInjected ? 'disabled':'' }}" bindtap="openManageMenu">
<image class="" src="../assets/img/more-icon.png" />
</view>
<view wx:if="{{isShowManage}}" class="injector-manage-list">
<view class="arrow-top"></view>
<view class="manage-item" bindtap="showAddPopup"><image class="" src="../assets/img/add-icon.png" />新增</view>
<view class="manage-item" bindtap="clearAll"><image class="" src="../assets/img/clear-all-icon.png" />清除全部</view>
</view>
</view>
<view class="injector-main {{ isInjected ? 'disabled':'' }}">
<view class="table-title">
<view class="key-title">Origin value</view>
<view class="type-title">type</view>
<view class="value-title">New value</view>
</view>
<checkbox-group bindchange="checkboxChange" class="injector-content-box">
<view class="injector-item" wx:for="{{interceptors}}" wx:key="key">
<text class="injector-key">{{item.key}}</text>
<text class="injector-type">{{item.isRegex?'Regex':'PlainText'}}</text>
<text class="injector-value" title="{{item.value}}">{{item.value}}</text>
</view>
</checkbox-group>
</view>
<view class="add-dialog {{addPopupClass}}">
<view class="add-popup-header">
<text class="cancel" bindtap="closeAddPopup">取消</text>
<text class="main-title">{{addInfo.title}}</text>
<text class="add" bindtap="addStorage">确定</text>
</view>
<view class="add-key-input">
<view class="name">
原始值：Key
(
正则：<switch color="#337CC4" type="checkbox" checked="{{addInfo.isRegex}}" bindchange="bingAddInfoIsRegex"/>
)
</view>
<input value="{{addInfo.key}}" bindinput="bingAddInfoKey" maxlength="-1"></input>
</view>
<view class="add-value-input">
<view class="name">注射值：Value</view>
<input value="{{addInfo.value}}" bindinput="bingAddInfoValue" maxlength="-1"></input>
</view>
</view>
</view>
miniapp/example/dist/httpInjector/httpInjector.wxss 0 → 100644
浏览文件 @ 7b7c27c6
.injector-container {
padding: 32rpx;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
position: fixed
}
.injector-container .mask {
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,.8);
z-index: 10
}
.injector-container .injector-content-box {
overflow: auto;
height: 800rpx
}
.injector-container .add-dialog {
width: 100%;
height: 504rpx;
background: #fff;
padding: 0 20rpx;
box-sizing: border-box;
z-index: 99;
transform: translateY(504rpx);
transition: all .5s;
position: absolute;
bottom: 0;
left: 0
}
.injector-container .add-dialog-active {
transform: translateY(0)
}
.injector-container .title {
margin-right: 4.2rem
}
.injector-container .table-title {
overflow: hidden;
height: 68rpx;
display: -ms-flexbox;
display: flex;
text-align: center;
background: #337cc4;
line-height: 68rpx;
color: #fff;
border-radius: 8rpx
}
.injector-container .header {
position: relative;
height: 88rpx
}
.injector-container .injector-manage {
position: absolute;
right: 0;
top: 20rpx
}
.injector-container .disabled {
opacity: .3
}
.injector-manage-list .arrow-top {
width: 0;
height: 0;
border: 16rpx solid;
position: absolute;
right: 10rpx;
border-color: transparent transparent #fff;
top: -31rpx
}
.injector-container .injector-manage image {
width: 40rpx;
height: 40rpx
}
.injector-main .key-title,
.injector-main .value-title {
position: relative;
-ms-flex: 5;
flex: 5
}
.injector-main .type-title {
position: relative;
-ms-flex: 3;
flex: 3
}
.injector-main .key-title:after,
.injector-main .type-title:after {
content: ' ';
position: absolute;
right: 0;
top: 0;
width: 2rpx;
height: 100%;
background: #fff
}
.injector-container .head-title {
font-size: 28rpx
}
.injector-container .injector-item {
display: -ms-flexbox;
display: flex;
-ms-flex-flow: row nowrap;
flex-flow: row nowrap;
font-size: 24rpx;
height: 80rpx;
line-height: 80rpx
}
.injector-item .injector-key,
.injector-item .injector-value {
-ms-flex: 5;
flex: 5;
padding-left: 10rpx;
overflow: scroll
}
.injector-item .injector-type {
-ms-flex: 3;
flex: 3;
padding-left: 10rpx
}
.injector-item .add-some-flex {
-ms-flex: 3.2;
flex: 3.2
}
.injector-manage-list {
width: 243rpx;
font-size: 28rpx;
background: #fff;
padding-left: 32rpx;
padding-right: 24rpx;
box-sizing: border-box;
position: absolute;
right: 0;
top: 92rpx;
z-index: 99
}
.injector-manage-list .manage-item {
width: 100%;
height: 72rpx;
line-height: 72rpx;
border-bottom: 1rpx solid #efefef
}
.manage-item image {
height: 40rpx;
width: 40rpx;
vertical-align: -8rpx;
margin-right: 21rpx
}
.injector-container .clear-single-btn {
-ms-flex: .5;
flex: .5;
line-height: 80rpx;
text-align: center
}
.clear-single-btn image {
height: 24rpx;
width: 24rpx
}
.injector-container .operate-btn {
background: #fff;
color: #337cc4;
border: 1rpx solid #337cc4;
height: 100rpx;
width: 224rpx;
margin-right: 16rpx;
display: inline-block
}
.injector-container .operate-btn-delete {
background: #d8d8d8;
color: #fff;
height: 100rpx;
width: 450rpx;
box-sizing: border-box;
display: inline-block
}
.injector-container .delete-active {
background: #337cc4
}
.injector-container input {
display: inline-block;
border: 2rpx solid #555
}
.injector-main {
margin-top: 30rpx
}
.injector-footer {
position: absolute;
bottom: 30rpx;
left: 32rpx
}
.add-injectorkey-input {
width: 20%;
margin-right: 2rem
}
.add-injectorvalue-input {
width: 65%
}
.add-popup-header {
font-size: 28rpx;
height: 100rpx;
line-height: 100rpx
}
.add-popup-header .main-title {
padding: 0 250rpx;
text-align: center;
font-size: 36rpx
}
.add-popup-header .cancel {
color: #999
}
.add-popup-header .add {
color: #337cc4
}
.add-dialog .name {
font-size: 24rpx;
color: #666;
width: 100%;
margin-top: 40rpx;
margin-bottom: 24rpx
}
.add-dialog .name switch {
transform: scale(.8,.8)
}
.add-dialog input {
width: 100%;
border: 0;
border-bottom: 1rpx solid #eee;
padding-bottom: 16rpx
}
.injection-toggle text {
margin-right: 40rpx
}
\ No newline at end of file
miniapp/example/pages/index/index.js
浏览文件 @ 7b7c27c6
......@@ -15,6 +15,16 @@ Page({
url: '../logs/logs'
})
},
sendRequest: function() {
wx.request({
url: 'http://jsonplaceholder.typicode.com/users/2',
success: (res) => {
this.setData({
motto: JSON.stringify(res.data)
})
}
})
},
onLoad: function () {
if (app.globalData.userInfo) {
this.setData({
......
miniapp/example/pages/index/index.wxml
浏览文件 @ 7b7c27c6
......@@ -10,5 +10,6 @@
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
<button class="operate-btn" bindtap="sendRequest">发个请求</button>
<dokit></dokit>
</view>
miniapp/example/pages/index/index.wxss
浏览文件 @ 7b7c27c6
......@@ -17,5 +17,5 @@
}
.usermotto {
margin-top: 200px;
margin-top: 100px;
}
\ No newline at end of file
miniapp/src/debug/debug.js
浏览文件 @ 7b7c27c6
......@@ -37,6 +37,11 @@ Page({
"image": "../assets/img/h5door-icon.png",
"path": "../h5door/h5door"
},
{
"title": "请求注射",
"image": "../assets/img/injector.png",
"path": "../httpInjector/httpInjector"
},
{
"title": "更新版本",
"image": "../assets/img/update-version-icon.png",
......
miniapp/src/httpInjector/httpInjector.js 0 → 100644
浏览文件 @ 7b7c27c6
const app = getApp()
app.globalData.originRequest = wx.request
Page({
data: {
interceptors:[],
isInjected: false,
isShowManage:false,
addPopupClass:'',
isShowMask:false,
addInfo:{
key:'',
value:'',
title:'添加',
isRegex: false,
disabled:false
}
},
onLoad () {
this.setData({
addInfo:{
key:'',
value:'',
title:'添加',
isRegex: false,
disabled:false
}
})
this.setData(getApp().globalData['__HTTP_INJECTOR'])
},
onUnload() {
const { interceptors, isInjected } = this.data
getApp().globalData['__HTTP_INJECTOR'] = {interceptors,isInjected}
},
hooksRequestSuccessCallback(res) {
let { data } = res
this.data.interceptors.forEach(interceptor => {
const { isRegex, key, value } = interceptor
const replaceKey = isRegex ? new RegExp(key, 'g') : key
const isNotStringData = typeof data !== 'string'
if (isNotStringData) {
data = JSON.stringify(data)
}
data = data.replace(replaceKey,value)
if (isNotStringData) {
data = JSON.parse(data)
}
})
res.data = data
return res
},
hooksRequest() {
Object.defineProperty(wx, "request" , { writable: true });
const hooksRequestSuccessCallback = this.hooksRequestSuccessCallback
wx.request = function(options){
const originSuccessCallback = options.success
options.success = res => {
originSuccessCallback(hooksRequestSuccessCallback(res))
}
app.globalData.originRequest(options)
}
},
showAddPopup(){
this.setData({
isShowManage:false,
addPopupClass:'add-dialog-active',
addInfo:{
key: '',
value:'',
title:'添加',
disabled:false
}
})
},
closeAddPopup(){
this.closeAll()
},
closeAll(){
this.setData({
isShowManage:false,
isShowMask:false,
addPopupClass:''
})
},
openManageMenu(){
if (this.data.isInjected){
return
}
this.setData({
isShowManage:true,
isShowMask:true
})
},
clearAll(){
this.setData({
isShowManage:false
})
wx.showModal({
title: '提示',
content: '确定要清除所有吗？',
success:res => {
if (res.confirm) {
wx.clearStorageSync()
this.onLoad()
}
this.closeAll()
}
})
},
checkboxChange(event){
this.setData({checkedStorage:event.detail.value})
},
modifyItemValue(event) {
this.setData({
isShowMask:true,
addPopupClass:'add-dialog-active',
addInfo:{
key:event.currentTarget.dataset.key,
value:event.currentTarget.dataset.value,
title:'修改',
disabled:true
}
})
},
bingAddInfoKey(event){
this.setData({'addInfo.key': event.detail.value})
},
bingAddInfoValue(event){
this.setData({'addInfo.value': event.detail.value})
},
bingAddInfoIsRegex(event){
this.setData({'addInfo.isRegex': event.detail.value})
},
addStorage(){
const { key,value, isRegex } = this.data.addInfo
if(key && value){
this.setData({
interceptors: [...this.data.interceptors,{ key, value, isRegex }]
})
}
this.closeAll()
},
toggleInjectionState() {
this.setData({
isInjected: !this.data.isInjected
}, () => {
this.data.isInjected && this.hooksRequest()
})
}
});
miniapp/src/httpInjector/httpInjector.json 0 → 100644
浏览文件 @ 7b7c27c6
{
"navigationBarTitleText": "查看storage",
"usingComponents": {}
}
\ No newline at end of file
miniapp/src/httpInjector/httpInjector.wxml 0 → 100644
浏览文件 @ 7b7c27c6
<view class="injector-container">
<view class="mask" wx:if="{{isShowMask}}" bindtap="closeAll"></view>
<view class="header">
<view class="injection-toggle">
<text>注射器💉开关</text>
<switch color="#337CC4" checked="{{isInjected}}" bindchange="toggleInjectionState" />
</view>
<view class="injector-manage {{ isInjected ? 'disabled':'' }}" bindtap="openManageMenu">
<image class="" src="../assets/img/more-icon.png" />
</view>
<view wx:if="{{isShowManage}}" class="injector-manage-list">
<view class="arrow-top"></view>
<view class="manage-item" bindtap="showAddPopup"><image class="" src="../assets/img/add-icon.png" />新增</view>
<view class="manage-item" bindtap="clearAll"><image class="" src="../assets/img/clear-all-icon.png" />清除全部</view>
</view>
</view>
<view class="injector-main {{ isInjected ? 'disabled':'' }}">
<view class="table-title">
<view class="key-title">Origin value</view>
<view class="type-title">type</view>
<view class="value-title">New value</view>
</view>
<checkbox-group bindchange="checkboxChange" class="injector-content-box">
<view class="injector-item" wx:for="{{interceptors}}" wx:key="key">
<text class="injector-key">{{item.key}}</text>
<text class="injector-type">{{item.isRegex?'Regex':'PlainText'}}</text>
<text class="injector-value" title="{{item.value}}">{{item.value}}</text>
</view>
</checkbox-group>
</view>
<view class="add-dialog {{addPopupClass}}">
<view class="add-popup-header">
<text class="cancel" bindtap="closeAddPopup">取消</text>
<text class="main-title">{{addInfo.title}}</text>
<text class="add" bindtap="addStorage">确定</text>
</view>
<view class="add-key-input">
<view class="name">
原始值：Key
(
正则：<switch color="#337CC4" type="checkbox" checked="{{addInfo.isRegex}}" bindchange="bingAddInfoIsRegex"/>
)
</view>
<input value="{{addInfo.key}}" bindinput="bingAddInfoKey" maxlength="-1"></input>
</view>
<view class="add-value-input">
<view class="name">注射值：Value</view>
<input value="{{addInfo.value}}" bindinput="bingAddInfoValue" maxlength="-1"></input>
</view>
</view>
</view>
miniapp/src/httpInjector/httpInjector.wxss 0 → 100644
浏览文件 @ 7b7c27c6
.injector-container {
padding:32rpx;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow: hidden;
position: fixed;
}
.injector-container .mask{
position: fixed;
left: 0;
top: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
z-index:10;
}
.injector-container .injector-content-box{
overflow: auto;
height: 800rpx;
}
.injector-container .add-dialog{
width: 100%;
height: 504rpx;
background: #fff;
padding: 0 20rpx;
box-sizing: border-box;
z-index: 99;
transform: translateY(504rpx);
transition: all .5s;
position: absolute;
bottom:0;
left: 0;
}
.injector-container .add-dialog-active{
transform: translateY(0);
}
.injector-container .title {
margin-right:4.2rem;
}
.injector-container .table-title{
overflow: hidden;
height: 68rpx;
display: flex;
text-align: center;
background: #337CC4;
line-height: 68rpx;
color: #FFF;
border-radius: 8rpx;
}
.injector-container .header{
position: relative;
height: 88rpx;
}
.injector-container .injector-manage{
position: absolute;
right:0;
top: 20rpx;
}
.injector-container .disabled {
opacity: 0.3;
}
.injector-manage-list .arrow-top{
width:0;
height:0;
border:16rpx solid;
position:absolute;
right:10rpx;
border-color:transparent transparent #fff;
top:-31rpx;
}
.injector-container .injector-manage image{
width: 40rpx;
height: 40rpx;
}
.injector-main .key-title,
.injector-main .value-title{
position: relative;
flex: 5;
}
.injector-main .type-title{
position: relative;
flex: 3;
}
.injector-main .key-title:after,
.injector-main .type-title:after{
content: ' ';
position: absolute;
right: 0;
top: 0;
width: 2rpx;
height: 100%;
background: #FFF;
}
.injector-container .head-title{
font-size: 28rpx;
}
.injector-container .injector-item {
display:flex;
flex-flow:row nowrap;
font-size: 24rpx;
height:80rpx;
line-height: 80rpx;
}
.injector-item .injector-key,
.injector-item .injector-value{
flex: 5;
padding-left: 10rpx;
overflow: scroll;
}
.injector-item .injector-type{
flex: 3;
padding-left: 10rpx;
}
.injector-item .add-some-flex{
flex: 3.2
}
.injector-manage-list{
width: 243rpx;
font-size: 28rpx;
background: #fff;
padding-left: 32rpx;
padding-right: 24rpx;
box-sizing: border-box;
position:absolute;
right:0px;
top:46px;
z-index: 99;
}
.injector-manage-list .manage-item{
width: 100%;
height: 72rpx;
line-height: 72rpx;
border-bottom:1rpx solid #efefef;
}
.manage-item image{
height: 40rpx;
width: 40rpx;
vertical-align:-8rpx;
margin-right: 21rpx;
}
.injector-container .clear-single-btn{
flex:0.5;
line-height:80rpx;
text-align: center;
}
.clear-single-btn image{
height:24rpx;
width: 24rpx;
}
.injector-container .operate-btn{
background: #fff;
color: #337CC4;
border: 1rpx solid #337CC4;
height: 100rpx;
width: 224rpx;
margin-right: 16rpx;
display: inline-block;
}
.injector-container .operate-btn-delete{
background: #D8D8D8;
color: #fff;
height: 100rpx;
width: 450rpx;
box-sizing: border-box;
display: inline-block;
}
.injector-container .delete-active{
background: #337CC4;
}
.injector-container input{
display: inline-block;
border: 1px solid #555;
}
.injector-main {
margin-top: 30rpx;
}
.injector-footer {
position: absolute;
bottom: 30rpx;
left:32rpx;
}
.add-injectorkey-input{
width: 20%;
margin-right:2rem;
}
.add-injectorvalue-input{
width: 65%
}
.add-popup-header{
font-size: 28rpx;
height: 100rpx;
line-height: 100rpx;
}
.add-popup-header .main-title{
padding: 0 250rpx;
text-align: center;
font-size: 36rpx;
}
.add-popup-header .cancel{
color: #999999;
}
.add-popup-header .add{
color: #337CC4;
}
.add-dialog .name{
font-size: 24rpx;
color: #666666;
width: 100%;
margin-top: 40rpx;
margin-bottom: 24rpx;
}
.add-dialog .name switch{
transform: scale(0.8, 0.8);
}
.add-dialog input{
width: 100%;
border: 0;
border-bottom: 1rpx solid #EEEEEE;
padding-bottom: 16rpx;
}
.injection-toggle text{
margin-right: 20px;
}
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或