UNI-APP之微信小程序转H5

宝珠發表於 2021-12-27 10:04:00

<div class="markdown_views prism-atom-one-dark">
<h1>开始</h1>
最近有个需求，需要将微信小程序中一些页面和功能改成h5，这次功能开发的时间有点紧，而且重新写一套有点来不及。考虑到微信小程序与uni-app有着一些共通之处，所以打算直接转成uni-app。uni-app官网上也有从微信小程序项目转uni-app的教程：https://github.com/zhangdaren/miniprogram-to-uniapp ， 不过我这里直接用上了大佬开源的<code>miniprogram-to-uniapp</code>转换工具。 github: https://github.com/zhangdaren/miniprogram-to-uniapp 教程：https://ask.dcloud.net.cn/article/36037
<h2>使用MINIPROGRAM-TO-UNIAPP</h2>
<ol>
<li>直接全局安装</li>

</ol>
<div class="cnblogs_code">
<pre>npm install miniprogram-to-uniapp - g</pre>
</div>
<ol start="2">
<li>因为工具更新的比较频繁，所以安装后建议更新</li>
</ol>
<div class="cnblogs_code">
<pre>npm update miniprogram-to-uniapp -g</pre>
</div>
<ol start="3">
<li>转换微信小程序项目，顺带将wx.xx转为uni.xxx。具体可以查看文档</li>
</ol>
<div class="cnblogs_code">
<pre>wtu -i 'E:\project\miniprogram-project' -r</pre>
</div>
<ol start="4">
<li>转换成功后，会在项目同级目录下生成一个miniprogram-project_uni的目录</li>
</ol>
<h2>转换后的一些问题</h2>
<ol>
<li>小程序的bingtap会转成@tap，问题不大，不过最好改成@click。</li>
<li>组件上的动态props参数没有通过v-bind绑定</li>
<li>小程序的自定义组件，props是可以在子组件内修改的，但是转成uni-app是不能直接在子组件修改props。</li>
<li>子组件内，工具转换后的this.setData的兼容方法，更新值的时候不会触发watch，要把this.setData改回vue的this.xxx=xxx;</li>
<li>@catchtouchmove的防止触摸穿透，可以改成@touchmove.stop.prevent=“moveHandle”</li>
<li>hidden="hidden"改成v-show</li>
<li>图片的路径在转换中可能也会出错</li>
<li>本地调试时调用接口会出现跨域。可以在manifest.json文件源码视图，配置h5的devServer:</li>
</ol>
<div class="cnblogs_code">
<pre>"h5": {
"devServer": {
 "port" : 80,
 "disableHostCheck" : true, // 跳过host检查
 "proxy" : {
 "/api" : {
 "target" : "https://abc.com",// 目标域名
 "changeOrigin" : true, // 允许跨域
 "secure" : false,// 设置支持https协议的代理
 "ws" : false,//没有该配置将出现：WebSocket connection to ws 错误提示
 "pathRewrite" : {//如果不希望传递/api，则需要重写路径
 "^/api" : ""
 }
 }
 },
}
}</pre>
</div>
uni-app也是webpack打包，实际跟vue是差不多的，具体配置可以查阅 webpack-dev-server
<h2>H5打包部署的问题</h2>
<ol>
<li>
h5打包之前，需要在manifest.json文件的h5配置中配置相关规则： <img src="https://www.freesion.com/images/823/2caf1bb23dc9176d97cda6cf996f69a7.png" alt="在这里插入图片描述">

</li>
<li>
点击工具栏发行—》h5手机版发行，填入网站标题和域名，接着等发布成功，会在unpackage中生成打包后的文件 <img src="https://www.freesion.com/images/48/c432b9dd6cbe0a2ab8bbe6ba10aa64d0.png" alt="在这里插入图片描述">

</li>
<li>
因为我需要在微信浏览器打开，路径使用hash模式会带有#号，获取wx.config会失败，所以改成history的模式。

</li>
<li>
history模式，部署需要后台在nignx配置。另外，页面打开，进入二级页面，刷新的时候会404，需要后台在nignx中配置伪静态，例如：

</li>

</ol>
<div class="cnblogs_code">
<pre>location / {
try_files $uri $uri/ /aecGuide/h5/index.html;
}</pre>
</div>
<h2>使用UNI-SIMPLE-ROUTER</h2>
在uni-app中，如果不想用uniapp的路由管理，可以使用这个工具：uni-simple-router，其保留了vue-router的路由风格，可以使用其的API，也可以改成完全使用vue-router的路由管理方式，具体可以查看文档，文档写的蛮详细的
分享就先到这里，可以会有些错误，欢迎指正。后续会继续更新在项目中遇到的问题，谢谢
 
</div>
<div>
<div class="article-copyright">
<div class="article-source-link2222">本文原链接：https://blog.csdn.net/Leo_xian/article/details/107709941</div>
</div>
</div>

</div>
<div id="MySignature" role="contentinfo">
如果真的不知道将来要做什么，索性就先做好眼前的事情。只要今天比昨天过得好，就是进步。长此以往，时间自然会还你一个意想不到的未来。 

生活像一个杯子。一开始，里面是空的，之后，要看你怎么对待它。如果你只往不如意的方面想，那么你最终辉得到一杯苦水。如果你往好的方面想，那么你最终会得到一杯清泉。 

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。 
来源：https://www.cnblogs.com/lipengze/p/15735135.html

頁: [1]

琼殿技术论坛's Archiver

UNI-APP之微信小程序转H5