用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

浅谈 DoraemonKit 微信小程序 sdk

Rolan 2020-5-21 00:41

DoraemonKit 是什么 一款移动端工具包,可以查看移动端的运行环境和 mock 接口,具体可以查看官网, 这次主要谈谈微信小程序端 sdk 的实现。 小程序端主要支持了下面几个功能, 下面会逐一讲到。 App 信息 App 信息 ...

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 以及 怎么给微信小程序做工具库方便开发去诊断信息。

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: hkc452 来自: 掘金