使用uniapp打包H5时使用微信SDK

起因

原本的一个需求是开发微信小程序，但是因为产品变更需求，需要重新改为H5，为了重构页面和前端逻辑不做太大改动，所以决定先把小程序改为uniapp，在用uniapp打包为H5
因为uniapp里的方法和小程序类似，所以代码复用率高。
有了思路之后就开始着手进行。

第一步：将微信小程序转为uniapp

这里使用的是官方出的一款插件miniprogram-to-uniapp

安装

使用命令行进行全局安装

windows:

npm install miniprogram-to-uniapp -g

mac & Linux:

sudo npm install miniprogram-to-uniapp -g

验证

使用命令wtu -V验证是否安装成功，返回版本号说明安装成功

转换

使用命令wtu -i 小程序根目录路径进行转换
小程序根目录路径可以是绝对路径，也可以是命令行打开的相对路径

转换成功后在小程序目录同级目录下会生成一个文件名_uni的文件夹

这里存放的就是转换后的uniapp，你可以是用Hbuilder打开，或者使用官方脚手架然后用vscode打开，笔者使用的后者。

第二步引入微信SDK

由于我们小程序内获取的登录态是小程序的，如果改成微信内登录的H5，需要将登录态转换为微信H5的登录态。
这里就需要用到微信的SDK。
由于笔者使用的uniapp脚手架，所以需要修改public目录下的index.html文件，即H5的模版文件。（Hbuilder打开的话需要在配置文件中配置模版文件）

引入微信SDK

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

然后在你需要调用的组建里配置微信SDK

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，企业号的唯一标识，此处填写企业号corpid
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见附录1
    jsApiList: [] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});

这个时候问题就来了！
执行会发现wx对象中没有config方法,但是wx对象是存在的？

原因

原来是因为uniapp中已经向window中声明了一个wx变量，这个wx变量是小程序的wx对象而不是微信SDK的。
因为uniapp在打包时将app.js打包在了</body>之前，所以我们引入的微信SDK的变量被uniapp的覆盖了。

解决

找到原因就好办了，直接将SDK在</body>之后</html>之前引入。

再跑一下，完美解决！

总结

这里找问题原因花了很长时间，因为引入js方式，登录态检测这些我都简化叙述了，还用到了各种抓包，本地代理线上文件。但是思路就是遇到问题可以想想多种解决方案，多打断点，多console。