微信小程序反编译之electron自动更新

月光魔力鸭

2020-07-08 09:46 阅读 1202 喜欢 0 electron autoupdate 微信小程序反编译

前段时间做了个微信小程序反编译的小东西，不过因为功能不全，没加分包处理，正好处理下加上，又考虑到后续可能的更新情况，准备上手增加下更新功能。

解密文章: 微信小程序解密反编译之node实现软件获取：https://shop.licran.com/index/detail/a5ec6165-7f4f-4b8e-bf39-51559ed48396.html

小东西

使用electron实现的微信小程序反编译的桌面软件，用来反编译从手机里面拿到的微信小程序的wxapkg 文件。实现的功能：

对主包进行反编译
对分包进行反编译
检查更新

功能表现

此处有个gif录制，展现功能

程序更新

目前没有增加自动更新功能，由于昨天才刚接触，只是增加了一个检查更新的主动触发功能。

检查更新

点击检查更新。

额，昨天更新了..我再重新安装个旧版本

更新日志..有点丑，没做美化

由于做的是本地更新，所以进度条没做..目前只做了个进度提醒，下载完成后会自动更新的。

程序更新思路

本来查了下electron的官方API，他有一个autoUpdater模块，结果搜了下文章，全是electron-updater的。这里就说下这个模块的。

首先，这个模块需要配合electron-builder打包来实现的。

electron-builder : https://www.electron.build/configuration/configuration
electron-builder nsis 配置：https://www.electron.build/configuration/nsis
electron-updater : https://www.electron.build/auto-update

大体思路：

引入electron-updater ，然后配置对应的url,我用的是自己的服务端，提供更新信息。
增加对应的electron-updater事件，比如：error checking-for-update update-available update-not-available download-progress update-download 等。
通过UI功能来触发检查更新。autoUpdater.checkForUpdates();
然后如果为检查到有更新的内容，则会触发update-not-available ,如果有的话，则会触发update-available ，然后可以获得可更新的内容。
前端提示确认更新后，后端调用autoUpdater.downloadUpdate() 开始下载。
开始下载后会触发download-progress进度条事件，提供前端展示下载进度.
等下载完毕后会触发update-downloaded ,然后开始更新。
调用autoUpdater.quitAndInstall();mainWindow.destroy() 开始更新。
更新后，会销毁当前的程序，然后重新调用安装功能，将下载的新版本重新安装，然后重启。

上代码

/***
 * 处理程序更新事项
 */
const { autoUpdater } = require("electron-updater");


module.exports = function (mainWindow, ipcMain) {

    // 检测更新，在你想要检查更新的时候执行，renderer事件触发后的操作自行编写
    let uploadUrl = 'http://localhost:8888/';
    console.log(uploadUrl);
    const message = {
        error: '检查更新出错',
        checking: '正在检查更新……',
        updateAva: '检测到新版本，正在下载……',
        updateNotAva: '现在使用的就是最新版本，不用更新'
    }
    autoUpdater.autoDownload = false
    autoUpdater.setFeedURL(uploadUrl);
    // https://github.com/electron-userland/electron-builder/issues/1254
    // if (process.env.NODE_ENV === 'development') {
    //   autoUpdater.updateConfigPath = path.join(__dirname, 'default-app-update.yml')
    // } else {
    //   autoUpdater.updateConfigPath = path.join(__dirname, '../../../app-update.yml')
    // }
    autoUpdater.on('error', function (error) {
        mainWindow.webContents.send('notify', message.error)
    });
    autoUpdater.on('checking-for-update', function () {
        mainWindow.webContents.send('notify', message.checking);
    });
    autoUpdater.on('update-available', function (info) {
        mainWindow.webContents.send('updateInfo', info)
    });
    autoUpdater.on('update-not-available', function (info) {
        console.log('not availanble');
        console.log(info);
        mainWindow.webContents.send('notify', message.updateNotAva);
    });
    autoUpdater.on('download-progress', function (progressObj) {
        console.log('开始下载数据-----')
        console.log(progressObj)
        mainWindow.webContents.send('downloadProgress', progressObj)
    });
    autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl, quitAndUpdate) {
        ipcMain.on('isUpdateNow', (e, arg) => {
            console.log('开始更新')
            autoUpdater.quitAndInstall()
            mainWindow.destroy()
            // callback()
        })
        mainWindow.webContents.send('isUpdateNow')
    })
    ipcMain.on('downloadUpdate', () => {
        // 下载
        console.log('开始下载')
        autoUpdater.downloadUpdate()
      })
    ipcMain.on('checkUpdate', (event, arg) => {
        autoUpdater.checkForUpdates();
    })
}

前端页面代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>微信小程序反编译工具</title>
    <link rel="stylesheet" href="plugins/index.css">
</head>

<body>
    <div class="header"></div>
    <div class="content">
        <span class="btn" id="btn">选择微信小程序wxpkg</span>
        <span class="btn" style="margin-top:30px;" id="btn2">选择微信小程序分包wxpkg</span>
        <input type="hidden" name="subpath" value="">
        <span class="update"><a href="javascript:;" id="btn3">检查更新</a></span>
    </div>
    <footer class="footer">
        <!-- <p>xxxxx.com</p> -->
    </footer>
</body>

</html>
<script src="plugins/jquery-1.9.1.min.js"></script>
<script src="plugins/layer/layer.js"></script>
<script>
    const { ipcRenderer, shell } = require('electron')
    ipcRenderer.on('notify',(event,arg)=>{
        layer.msg(arg);
    });
    ipcRenderer.on('updateInfo',(event,arg)=>{
        //进行提示是否更新
        layer.open({
            type : 1,
            title : '软件更新',
            btn : ['确认更新','取消'],
            content : arg.message.replace(/\\\\n/g,'<br />'),
            area : ['80%','80%'],
            yes : function(index){
                layer.closeAll();
                layer.load(1);
                layer.msg('准备下载')
                ipcRenderer.send('downloadUpdate')
            },
            cancel : function(){
            }
        });
    })
    ipcRenderer.on('downloadProgress',(event,arg)=>{
        console.log(arg);
        layer.msg(parseInt(arg.percent)+'%',{shade : 0.3,time:300000});
    })
    ipcRenderer.on('isUpdateNow',(event,arg)=>{
        console.log('下载完毕，准备更新')
        ipcRenderer.send('isUpdateNow');
    })
    ipcRenderer.on('anafail', (event, arg) => {
        layer.closeAll();
        layer.alert('未选择文件', { title: false });
    })
    ipcRenderer.on('openFileSuc',(event,arg)=>{
        console.log(arg);
        layer.load(2);
        ipcRenderer.send('anafile',{filePath : arg})
    })
    ipcRenderer.on('anafail2', (event, arg) => {
        layer.closeAll();
        layer.alert('未选择文件', { title: false });
    })
    ipcRenderer.on('openFileSuc2',(event,arg)=>{
        console.log(arg);
        layer.load(2);
        var folderPath = $('[name="subpath"]').val();
        ipcRenderer.send('anafile2',{filePath : arg,folderPath : folderPath})
    })
    ipcRenderer.on('anasuc', (e, a) => {
        $('input[name="subpath"]').val(a);//将此数据放在分包数据zhong
        layer.closeAll();
        layer.alert('解析完毕,请在原路径查看', { title: false }, function () {
            layer.closeAll();
            shell.showItemInFolder(a);
        });
    });
    ipcRenderer.on('anasuc2', (e, a) => {
        layer.closeAll();
        layer.alert('解析完毕,请在原路径查看', { title: false }, function () {
            layer.closeAll();
            shell.showItemInFolder(a);
        });
    });
    document.getElementById('btn').onclick = function () {
        ipcRenderer.send('openFile');
    }
    document.getElementById('btn2').onclick = function () {
        var subpath = $('[name="subpath"]').val();
        if(subpath == ''){
            layer.alert('请先选择主包后再选择分包');
            return;
        }
        ipcRenderer.send('openFile2');
    }
    document.getElementById('btn3').onclick = function(){
        ipcRenderer.send('checkUpdate');
    }
</script>

注意

在更新的时候会报错，我在项目中新建了一个文件dev-app-update.yml，内容如下：

provider: generic
url: 'http://127.0.0.1:8888/'

等全部调试完毕后，还需要将新版本提交到服务端，并永久提供一个可下载的服务.. 不过考虑到我服务器这小水管，要不要提交到oss呢？？不知道是否可行，有空验证下看看。

微信小程序反编译软件下载： https://shop.licran.com 可以下载...不过要花钱的哦ヾ(o◕∀◕)ﾉヾ

转载请注明出处: https://chrunlee.cn/article/electron-auto-update-of-wxapp.html

感谢支持!

赞赏支持

喜欢

评论信息 (请文明评论)

暂无评论，快来快来写想法...