开始

最近有个需求，需要将微信小程序中一些页面和功能改成h5，这次功能开发的时间有点紧，而且重新写一套有点来不及。考虑到微信小程序与uni-app有着一些共通之处，所以打算直接转成uni-app。uni-app官网上也有从微信小程序项目转uni-app的教程：https://github.com/zhangdaren/miniprogram-to-uniapp ，
不过我这里直接用上了大佬开源的miniprogram-to-uniapp转换工具。
github: https://github.com/zhangdaren/miniprogram-to-uniapp
教程：https://ask.dcloud.net.cn/article/36037

使用MINIPROGRAM-TO-UNIAPP

直接全局安装

npm install miniprogram-to-uniapp - g

因为工具更新的比较频繁，所以安装后建议更新

npm update miniprogram-to-uniapp -g

转换微信小程序项目，顺带将wx.xx转为uni.xxx。具体可以查看文档

wtu -i 'E:\project\miniprogram-project' -r

转换成功后，会在项目同级目录下生成一个miniprogram-project_uni的目录

转换后的一些问题

小程序的bingtap会转成@tap，问题不大，不过最好改成@click。
组件上的动态props参数没有通过v-bind绑定
小程序的自定义组件，props是可以在子组件内修改的，但是转成uni-app是不能直接在子组件修改props。
子组件内，工具转换后的this.setData的兼容方法，更新值的时候不会触发watch，要把this.setData改回vue的this.xxx=xxx;
@catchtouchmove的防止触摸穿透，可以改成@touchmove.stop.prevent=“moveHandle”
hidden="hidden"改成v-show
图片的路径在转换中可能也会出错
本地调试时调用接口会出现跨域。可以在manifest.json文件源码视图，配置h5的devServer:

"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" : ""}}},}
}

uni-app也是webpack打包，实际跟vue是差不多的，具体配置可以查阅 webpack-dev-server

H5打包部署的问题

h5打包之前，需要在manifest.json文件的h5配置中配置相关规则：
点击工具栏发行—》h5手机版发行，填入网站标题和域名，接着等发布成功，会在unpackage中生成打包后的文件
因为我需要在微信浏览器打开，路径使用hash模式会带有#号，获取wx.config会失败，所以改成history的模式。
history模式，部署需要后台在nignx配置。另外，页面打开，进入二级页面，刷新的时候会404，需要后台在nignx中配置伪静态，例如：

location / {try_files $uri $uri/ /aecGuide/h5/index.html;
}

使用UNI-SIMPLE-ROUTER

在uni-app中，如果不想用uniapp的路由管理，可以使用这个工具：uni-simple-router，其保留了vue-router的路由风格，可以使用其的API，也可以改成完全使用vue-router的路由管理方式，具体可以查看文档，文档写的蛮详细的

分享就先到这里，可以会有些错误，欢迎指正。后续会继续更新在项目中遇到的问题，谢谢

本文原链接：https://blog.csdn.net/Leo_xian/article/details/107709941

UNI-APP之微信小程序转H5相关推荐

json 微信小程序筛选_GitHub - zhengyangkang/sl-filter: uni -app 一款使用简单的筛选组件，适配app、微信小程序、H5。...
sl-filter 筛选筛选组件,组件名:sl-filter dcloud插件市场地址 sl-filter 简介一款使用简单的筛选组件,适配app.微信小程序.H5. 感谢分享效果图并列菜单 ...
uni app 开发微信小程序及上线体验
uni app 开发微信小程序及上线体验项目创建及微信小程序AppId的申请本次开发的是电商类的微信小程序,这里用到的是HBuilderX这个编辑器.之前用的Visual Studio Code ...
记录uni.app开发微信小程序中地图的使用,以及项目中的解决办法
标题先讲一下需求:需要获取用户的地址信息以及经纬度,并在地图中展示时出来 uniapp官方也提供了api uni.getLocation(OBJECT) getLocation只能获取用户的经纬度,不 ...
app能不能跳转外部h5_轻羽微信小程序和H5的区别在哪里？主要有三点
随着移动互联网的发展,许多应用在不断的产生,要说现在更新快.开放功能多的应用,只能是微信小程序了.微信小程序开放了60多个流量入口,更新了各种新的功能,尤其是之前实现的页面跳转功能,给开发者带来了好消 ...
APP、微信小程序、网页H5
APP.微信小程序.网页H5之间区别 1.APP 使用条件:苹果要去app store搜索下载,安卓需要在各应用商店搜素下载更新条件:如需要修改内容,需要通过第三方审核应用场景:适用于有较大流量, ...
uni-app开发微信小程序，H5 关于压缩上传图片的问题
文章目录前言一.为什么要压缩图片二.图片压缩方式 1. 微信小程序 2. H5 总结前言关于微信小程序.H5兼容性问题,今天就压缩以及上传图片做一个可实现方法的简要阐述. 一. ...
微信小程序PHP文件建在哪里,微信小程序解析H5文件方法
经常有网友问怎么让微信小程序解析H5文件或者类似封装H5网页到APP里面?我一开始觉得这是不可能的,因为官方的解答是这样的: 每一个小程序页面是由同路径下同名的四个不同后缀文件的组成,如:index. ...
开发APP、微信小程序、网页,都需要什么？
开发APP,微信小程序,网页都需要什么? 准备工作前端开发后端开发技术整合打包上线结语在开始介绍之前,我先罗列一下APP,微信小程序,网页的大比较准备工作云服务器,域名(需备案),SS ...
uniapp一套代码开发app和微信小程序
为什么选择uniapp开发? 为什么选择uniapp进行开发? 1.uniapp对于独自开发是相当友好的,一套代码可以兼容app(安卓,ios),小程序,h5等,一定程度上降低了开发的成本,个人开发的 ...
微信小程序和H5网页之间有什么区别？
微信小程序和H5网页之间有什么区别本博主语录:小程序和H5网页的主要开发语言都是 JavaScript ,所以通常小程序的开发会被用来同普通的网页开发来做对比.两者有很大的相似性,对于前端开发者而言 ...

UNI-APP之微信小程序转H5

开始

使用MINIPROGRAM-TO-UNIAPP

转换后的一些问题

H5打包部署的问题

使用UNI-SIMPLE-ROUTER

UNI-APP之微信小程序转H5相关推荐

最新文章

热门文章