阅读 188

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

更新版本

其实有点像 app 里面的 检查更新,只不过对于的小程序的检查更新

const updateManager = wx.getUpdateManager();

updateManager.onCheckForUpdate(function (res) {
    if(!res) {
        // 请求完新版本信息的回调
        wx.showModal({
            title: '更新提示',
            content: '当前已经是最新版本'
        })
    }
});

updateManager.onUpdateReady(function () {
    wx.showModal({
        title: '更新提示',
        content: '新版本已经准备好,是否重启应用?',
        success(res) {
            if (res.confirm) {
                // 新的版本已经下载好,调用 applyUpdate 应用新版本并重启
                updateManager.applyUpdate()
            }
        }
    })
});

updateManager.onUpdateFailed(function () {
    // 新版本下载失败
})

复制代码

小结

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

关注下面的标签,发现更多相似文章
评论