浅谈 DoraemonKit 微信小程序 sdk

DoraemonKit 是什么

一款移动端工具包，可以查看移动端的运行环境和 mock 接口，具体可以查看官网，这次主要谈谈微信小程序端 sdk 的实现。

小程序端主要支持了下面几个功能，下面会逐一讲到。

App 信息

App 信息分为系统信息、账户信息、用户信息、授权信息

这里面只要用到了微信的几个api，包括getSystemInfo、getAccountInfoSync、getUserInfo 以及 getSetting，这个具体去看微信小程序api

位置模拟

这个有点 hack 意味，首先选择地理位置 wx.chooseLocation ，在成功的回调里面用 defineProperty 去 mock getLocation 的返回值

wx.chooseLocation({
    success: res => {
    this.setData({currentLatitude: res.latitude});
    this.setData({currentLongitude: res.longitude})
    Object.defineProperty(wx, 'getLocation', {
        get(val) {
            return function (obj) {
                obj.success({latitude: res.latitude, longitude: res.longitude})
            }
        }
    })
    }
})
复制代码

这样在后续我们调用 wx.getLocation 函数的时候，返回的都是我们之前选择地理位置的值，

wx.getLocation({
    type: 'gcj02',
    success:res=> {
        console.log(res.latitude, res.longitude)
        
    }
})
复制代码

至于要恢复原来的数据，直接拿app上面的数据

 Object.defineProperty(wx, 'getLocation',{
    get(val) {
        return app.globalData.getLocation
    }
});
复制代码

缓存管理

主要还是利用 wx.getStorageInfoSync 的api, 只不过把缓存中的 key 全部列举出来，提供可视化界面给开发人员去操作

let storageInfo = wx.getStorageInfoSync()
this.setData({limitSize:storageInfo.limitSize})
this.setData({currentSize:storageInfo.currentSize})
storageInfo.keys.forEach(key => {
    let result = wx.getStorageSync(key)
    let info = {
        key,
        value:result,
        isModify:false,
        ischecked:false
    }
    storageArr.push(info)
});
复制代码

h5 任意门

主要是提供我们内嵌 h5 快速输入 url 进行 h5 展示的入口，这个其实没什么好讲的，就是把提供了扫码和 url 输入两个途径，还有一个列表历史 url 展示

请求注射

这个主要是提供 http 返回数据的拦截，对于符合我们需要拦截的 key，返回我们设置的 value，拦截的数据存储在全局的 app 里面

getApp().globalData['__HTTP_INJECTOR']
复制代码

至于怎么去拦截的, 还是去 hack wx.request方法，首先把 wx.request 缓存起来，app.globalData.originRequest = wx.request ，然后在hooksRequestSuccessCallback 中去决定是否去拦截

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)
    }
},
复制代码

其中hooksRequestSuccessCallback 如下所示，遍历 this.data.interceptors.forEach 中的数据，查看 key 是否符合我们拦截的数据 key ，如果符合就替换数据

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
},
复制代码

小结

总的来说这款小程序工具 sdk 实现不算难，只要是看看怎么去运用微信给的 api 结合我们的需求去进行 hack 以及怎么给微信小程序做工具库方便开发去诊断信息

来源：oschina

链接：https://my.oschina.net/u/4419414/blog/4283797

标签

微信小程序

doraemonkit