uniapp 网页打包成app(使用webview）

最新推荐文章于 2025-02-21 18:01:04 发布
最新推荐文章于 2025-02-21 18:01:04 发布
阅读量2.2k 收藏 3
点赞数
文章标签： uni-app javascript vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_58135258/article/details/130760777
版权
本文详细介绍了如何使用uniapp将一个网页游戏转换为APP，主要步骤包括创建新项目，修改page.json配置，替换index.vue的内容以加载游戏链接，以及最后的APP打包流程。项目结构遵循uniapp的标准结构，并提供了官方文档链接以供参考。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

项目要求把一个网页游戏，使用uniapp打包成APP（使用webview）
webview官方文档：https://uniapp.dcloud.net.cn/component/web-view.html#

1.uniapp中新建项目

2.打开page.json,并更改为图2 

（图1） 

（图2） 

3.打开index.vue，删除所有内容，改为下图，webview中src是你的链接地址

4.打包为APP

以上就是操作过程，下面记录一下项目结构及官方说明 

项目结构如下

 

 官方结构说明，官网地址https://uniapp.dcloud.net.cn/component/web-view.html#

 

 

使用uni-app把h5网页封装成app
刘杨造梦的博客
03-26 3073
hbuildx创建一个uniapp选择默认模版 直接上代码 修改 page/index/index.vue文件,把web-view 标签的src属性换成你的应用的访问路径 <template> <view class="content"> <web-view :webview-styles="webviewStyles" src=""></web-view> </view> </template> &l...
uniapp APP端内嵌webview，跨端通信-返回APP端
qq_41901130的博客
01-13 646
uniapp打包H5，如果没有使用index.html默认模板，每次打包都会重置index.html。三、在打包后的文件中引入（unpackage/dist/build/web/index.html）注意：返回指定页面用对应方法：navigateTo() 、 switchTab()像这次需要在页面中引入新的js文件，每次都需要打包后重新手动引入。每次打包H5，在index.html中就会默认有这些引入的文件了。uniapp在打包的时候提供了使用模板的方法，如下。一、下载H5端使用的webview文件。
uniapp使用webview内嵌网页、从内嵌网页回退到平台方法
weixin_43952634的博客
01-17 1594
使用官网案例 发现APP可用，h5本地代码也可以，但打包到服务器后会出现报错，同事猜测是跨域问题，于是h5端绑定新方法返回。
uniappAPP项目使用webview 嵌套整个uniappH5项目，H5项目获取app的登录验签，不用重复登录
g_mx123的博客
12-14 3096
本编文章 uniappAPP与uniappH5是两个独立的项目，都是可以单独登录访问，在app中嵌套H5项目，需要在H5项目中获取app项目的登录信息，可以直接获取登录人信息，进而可以直接访问。1、首先需要再H5项目下载webview.js文件，在main.js中引入（uni.webview.1.5.2.js）在请求拦截器里面添加获取用户登录验签的token，否则需要重新登陆H5项目获取当前项目的验签。此时就可以获取到app项目中登录人的信息，不需要重新登录。h5页面想app项目传参。
uniapp 将网页打包成app教程
热门推荐
04-13 1万+
洛弘科技 uniapp网页打包成app
web项目在uniapp打包成apk
soclear_的博客
09-04 674
-----------------------------------------------------可能遇到的问题------------------------------------------------------2.白屏解决后发现引入的音频打包后找不到文件路径，用vconsole在手机控制台查看是这样的。step2:将vue.config.js中的piblicPath的'./'改为‘././’在网上查找了一些方法发现需要修改web项目中的vue.config.js文件，将。
使用uni-app把h5网页封装成安卓app
qq_45517630的博客
10-08 409
使用uni-app把h5网页封装成安卓app
uniapp打包的安卓app中webview和vue的H5网页之间互相传参
weixin_44074543的博客
12-25 884
uniapp打包的安卓app中webview和vue的H5网页之间互相传参
网页打包app
wangshuxin2017的博客
06-21 588
首先讲安卓： 平台软件安装与系统配置（计算机＞属性＞高级系统设置＞环境变量） 【1】安装 node.js， 官网下载：https://nodejs.org/en/download/ 注意安装路径不要带空格：改为 C:\nodejs\ 安装完成后，环境变量是自动配置的，除非以下指令测试失败： node -v npm -v npm install -g smart-npm s
uniapp打包的app内嵌h5(uniapp开发)，如何实现app自动升级
一路走一路看，一边哭一边笑
01-08 800
使用uniapp开发的app和h5，然后将h5嵌入进app，实现app自动升级
网站打包APP，android原生APP封装网页,app封装.zip
01-03
老版本：将网站封装为安卓APP，修复新版本安卓只能使用https的情况，修复返回键退出APP情况，支持自定义错误页。 开发工具：android studio 注意：部分网站可能不兼容自行百度修改 当前版本：在原有基础上处理了网页部分按钮无法点击的情况，修复了无法播放网页提示音的情况，修复了无法使用上传图片的情况（之前点击上传无反应，当前版本会调用系统自带的图片选择工具）。
网站打包APP，android原生APP封装网页,app封装第三版可唤醒支付宝支付.zip
08-16
当前版：取消掉自定义错误页，修复网页内支付不能唤醒支付宝的问题。（旧版本的APP可以在我的资料里面找） 第一版：将网站封装为安卓APP，修复新版本安卓只能使用https的情况，修复返回键退出APP情况，支持自定义错误页。 开发工具：android studio 注意：部分网站可能不兼容自行百度修改 第二版：在原有基础上处理了网页部分按钮无法点击的情况，修复了无法播放网页提示音的情况，修复了无法使用上传图片的情况（之前点击上传无反应，当前版本会调用系统自带的图片选择工具）。
（uniapp框架）手动封装webview页面与App交互sdk
01-30
自己项目开发中使用的，需求是打通App和webview页面两者之间的数据交互 H5调用App的方法（反之App可以使用该页面的方法）
uniapp微信小程序使用webview嵌套uniappH5，并实现通信
m0_74824054的博客
12-10 1929
1.index引入uni.webview.js-- 引入微信小程序兼容文件，官网上还有其他平台的兼容文件，这里只用了微信小程序，所以就不判断环境了 -->-- 需要下载 uni.webview.1.5.5.js 并修改源码,前面笔者有提供修改文件 -->2.小程序使用webview访问H5并传参，定义回调//小程序向H5传参带在url后面webViewUrl.value = `你的H5页面具体访问路径/webview-upload?
【uniapp*vue3】app/h5 webview通讯方案
最新发布
imsopoor的博客
02-21 890
本文旨在解决vue3版本下uniapp h5项目向app项目中webview通讯问题问题产生于uniapp自定义打包模板。
uniapp打包--过程--app
ljlhah的博客
06-04 2565
可以通过修改 manifest.json 取消通讯录权限或进行实名认证处理，本文通过实名认证处理。1.打开 HBuilder X 找到 选择菜单项 “发行” -> “原生App-云打包”注：在电脑没有模拟器，可安装下载或把打包之后弹出的文件，在微信发给自己，可在自己手机看。这意味着你需要先安装 App 云打包插件才能进行后续的打包操作。安装完成后，你应该就可以正常打包你的 Uni 应用程序了。8.进去之后可看到自己打包的项目，点击项目。4.打包过程，可能会遇见一下几点。2.如果是Android。
uniapp 打包 H5 实现在 uniapp 打包 APP 的 webview 通信
Brod-Roy的博客
06-21 3218
本文解决 uniapp 打包的 APP 在 webview 内嵌入 uniapp 打包的 H5 页面的需求，并实现通信。
开发日记(03) - uni-app 打包为 app
SunSeekerX
03-22 1702
uni-app 打包为 app 📌 前置条件 新手向，但需要有一些开发基础。 Git 官网下载：https://git-scm.com/downloads 使用以下命令验证是否可用 git version # 示例输出 # git version 2.32.0 (Apple Git-132) NodeJS nodejs 使用 lts 长期支持版本就行。 官网下载：https://nodejs.org/zh-cn/download/ 使用以下命令验证是否可用 node -v # 示例输出
通过uni-app 把 h5 (vue.js) 转 App
chinaProgrammer8的博客
07-24 1156
通过uni-app 把 h5连接 直接打包生成 App
uniApp 打包成APP 修改启动动画
01-01
### 修改 uniApp 应用启动时的开屏动画或图片 #### 配置 manifest.json 文件 对于希望自定义启动图的情况，可以在 `manifest.json` 中配置 APP 启动页面设置中的自定义启动图选项[^2]。具体来说： - **Android 平台**推荐使用 `.9.png` 图片作为启动图素材。 ```json { "plus": { "distribute": {}, "splashscreen": { "autoclose": true, "duration": 3000, "background": "#ffffff", "image": "/static/splash.9.png" } } } ``` #### 编写 App.vue 的生命周期函数 在项目的入口文件 `App.vue` 中利用条件编译语法来处理不同平台下的逻辑差异[^3]。当应用启动完成之后关闭默认的闪屏界面并加载新的 webview 页面模拟启动动画效果。 ```javascript export default { onLaunch() { // #ifdef APP-PLUS plus.navigator.closeSplashscreen(); const webView = plus.webview.open( 'hybrid/html/index.html', '本地地址', { top: 0, bottom: 0, zindex: 99999999 }, 'none', 500 ); setTimeout(() => { plus.webview.close(webView); }, 4000); // #endif } }; ``` 通过上述方式能够实现较为复杂的启动页过渡效果，而不仅仅是静态图片展示。需要注意的是，实际开发中应根据业务需求调整时间间隔以及所打开 HTML 资源的具体路径等内容。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值