HBuilder打包uniapp小项目 - H5 web-微信小程序-安卓apk-应用发行

最新推荐文章于 2024-03-21 13:12:43 发布
VIP文章 最新推荐文章于 2024-03-21 13:12:43 发布
阅读量455 收藏 2
点赞数
分类专栏： uniapp 文章标签： 微信小程序 前端 uni-app
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/dandanmei0513/article/details/129379372
版权

一、H5页面项目打包发行

第一步 打开mainfest.json配置文件

请添加图片描述
在这里插入图片描述
请添加图片描述

点击保存 Ctrl S

第二步 发行

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

打包成功

build-H5-index.html 即可打开H

最低0.47元/天 解锁文章
小刺猬_985
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用HBuilder打包web项目
qq1158533498的博客
07-27 8766
百度没找到一篇成功的打包流程 弄了两天 走了不少弯路 主要是没搞过安卓 多亏一个安卓开发的朋友帮忙才搞定 好多人都骂HBuilder文档不好 其实他也很冤 应该怪安卓配置太复杂 1.下载软件 即: 从HBuilder官网下的SDK; as; HBuilder; Android SDK; jdk 其中第一个和第三个最好和我下的一样 否则不能保证成功 2.安装 jdk -> Andr...
微信小程序web-view H5分享功能源码
07-11
微信小程序web-view H5分享功能源码 小程序web-view页面分享出去后，并且把分享的参数传递给小程序，别人打开仍然显示你分享时候的页面，而不是首页或者打不开，并且显示分享页面title和简介。 只需要文件里的域名，并在网站H5页面引入js就可以了
在HBuilder里面把一个web项目打包成apk文件
weixin_43782914的博客
11-30 4442
在HBuilder里面把一个web项目打包成apk文件的步骤 1.创建一个移动App项目，点击左上角的"文件"——>“新建”——“移动App”； 2.随便找一个已经写好的web项目复制到新创建的App项目里面； 3.点击上面的"发行"——>“云打包-打原生安装包”，如图： 4.然后会出现以下页面： 如果是苹果系统选择"iOS",如果是Android系统则选择"Android";这里...
使用Hbuilder打包h5网页的详细流程以及解决Uncaught SyntaxError: Unexpected token ‘＜‘问题
最新发布
DK848的博客
03-21 730
http://XXXXXXX.com这种情况下就不用去在history下面去填写任何东西，如果后面跟着其他路径的话就需要在。需要注意提前配置manifest.json文件，一般情况下只需要选择history模式就可以了。类似的这种问题，那就是访问的权限没给够，需要在面板或者服务器上进行其他的配置。如果需要特殊配置的话就将其余字符串按照示例给到运行的基础文件就可以了。，其实并不是而是打包的配置上出现了问题，例如线上的端口是。点击完发行之后等待一会就通知你的打包成功的包在哪里了。直接找到这个包去部署就可以了。
利用HBuilder打包Vue开发的webapp为app
weixin_36317322的博客
06-08 213
众所周知，前端开发完成的webapp只能运行在浏览器上，对运行环境有一定的限制，也就是除了浏览器其他的环境下不支持；那么现在如果有个需求是这样的呢？需要一套代码三端运行呢？三端运行（黑人脸？？）是的，三端运行即web端，安卓端和IOS端 ；先别急着说实现不了和不可能，利用HBulder来试试； HBuilder是DCloud（数字天堂）推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。它基于Eclip...
使用HBuilder将web项目打包成app
huaweichenai的博客
01-06 2785
一：下载HBuilder 访问HBuilder官网下载HBuilder：https://www.dcloud.io/ 这里我下载的是windows版的app开发版 将HBuilder下载下来后直接解压即可，他是一个免安装软件 二：使用HBuilder打包web项目 1：打开HBuilder编辑器并进行注册登录 2：创建项目，点击左上角文件-》新建-》项目 3：这里我是已经有一个现成的项目，你们可以更加自己的实际情况选择对应的项目类型，这里我选择的是Wap2App，然后填写一些相关信
一个基于 uniapp 开发的微信小程序商城项目源码.zip
05-26
一个基于 uniapp 开发的微信小程序商城项目源码.zip
Hbuilder打包
shannon灬的博客
06-21 1984
自己做前端的一些朋友，可能会有时候想自己弄个app玩玩或者测试。目前比较简单的Hbuilder可以达到预估效果最后配置完成在发行菜单里面有打包发行，找到云打包点击进去可以直接默认打包这里简单介绍Hbuilder打包app流程，仅供参考。
使用HbuilderX将web项目打包成安卓安装包
dhp1994的博客
10-31 1336
创建app项目 在 HbuilderX 依次选择：文件 》新建 》 项目，类型选择 5+APP；模板选择 默认模板；填写项目名称和项目路径，项目名称最好写英文，项目路径最好不要有中文，点击 创建。找到 发行 》原生 》App-云打包，打开打包窗口，按图示配置，点击 打包，等待几分钟（此处可能会提示要下载APP在线运行插件，等待下载完成就行）即可打包完成。图标配置：上传正方形的.png图片作为app的图标，注意格式必须是.png。按照控制台打印的路径，找到对应的.apk安装包，传输到手机上即可安装使用。
用HBuilderX打包webapp（套壳h5）
博客简介
03-10 848
用HBuilderX打包webapp,把网址打包到app里面
将发布的h5页面转换成微信小程序，无需重新开发，操作超级简单！
qq1507171150的博客
06-21 3003
登录微信公众平台，登录小程序账号，在【设置】下的【基本配置】中找到账号信息，复制AppID。在程序目录中，找到manifest.json文件，将appid放置到【微信小程序配置】中。官网地址：https://www.dcloud.io/hbuilderx.html。在开发者工具中，点击上传按钮，配置版本号等相关项目备注，点击右下方的上传即可。程序开发完成，无误后，可以直接点击上方图片中的提交审核，等待审核通过就好了。选择微信开发者工具，配置好路径。【管理】-【版本管理】
音乐类听歌小程序 uni-app 微信小程序
04-24
使用uni-app开发的音乐类听歌小程序，适配android/ios全名屏，刘海屏，异形屏等，目前仅支持h5端及微信小程序端。 安装项目依赖：npm install 前端启动命令： H5：npm run dev:h5 微信小程序：npm run dev:mp-...
uni-app微信小程序登录授权的实现
10-15
主要介绍了uni-app微信小程序登录授权的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
答题-答卷系统-小程序-uniapp-项目源码
06-11
这是一个uniapp项目【答题】答卷-答题...使用HBuilderX开发工具选择uniapp项目导入即可打开，可编译APP或小程序，正常运行，请放心下载， 可参考配套的相关文章https://blog.csdn.net/zs1028/article/details/131140125
uni-app小程序完整项目源码，可二次开发，发布
12-20
MVC架构，包含展示数据缓存，TOKEN，配置，图片延迟加载，分享，音频播放等等，可直接运行预览，带接口数据展示。
利用HBuilderX将web项目打包成app
慧子
03-16 8004
HBuilderX下载网址：https://www.dcloud.io/hbuilderx.html HBuilderX：可直接将网页打包成手机端app，可以掠过安卓，真的很开心哈哈哈哈 具体的如何构建文件可见教程： 这里只介绍最后的配置打包方法～ 主要步骤 ----- 配置manifest.json文件 在基础配置中输入你的web网址 报错：选上面的重新获取AppID 图标配置...
uni-app使用HBuilderX打包Web项目
weixin_45067120的博客
01-19 980
一、找到manifest.json配置Web配置。打包成功，点击地址获取文件。
HBuilderX uni-app 打包发行 H5 配置
热门推荐
lhz_333的博客
12-05 1万+
本文主要记录下 uni-app 使用 HbuilderX 打包并发行 H5 的配置。
HBuilder X + uni-app 打包 App、小程序等操作
iiiiiiiice的博客
03-19 1944
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
微信小程序开发，web-view h5页面实现调用微信小程序封装的方法
06-02
好的，针对你的问题，我可以给你一些思路和实现方式。 在微信小程序中，我们可以使用自定义组件来封装一些常用的UI组件或者业务逻辑组件，具体可以参考微信小程序官方文档中的自定义组件部分。而在H5页面中，我们可以使用微信小程序的web-view组件嵌入小程序页面，从而实现小程序组件在H5页面中的调用。 接下来，我们需要在小程序中定义一个自定义组件，并将其封装为一个可以在web-view中调用的方法。具体实现步骤如下： 1. 在小程序中定义自定义组件，并实现相应的业务逻辑。 2. 在自定义组件中添加一个事件监听器，用来接收来自web-view的消息。 3. 在web-view中使用postMessage()方法发送消息给小程序，消息内容为需要调用的方法名及相应的参数。 4. 在自定义组件中根据接收到的消息内容，调用相应的方法并返回结果给web-view。 下面是一个简单的示例代码： 小程序端代码： ```javascript // 定义自定义组件 Component({ methods: { // 自定义方法 add: function(a, b) { return a + b; }, // 监听web-view发送的消息 onMessage: function(e) { // 解析消息内容 var data = JSON.parse(e.detail.data); // 调用相应的方法并返回结果 if (data.method == 'add') { var result = this.add(data.a, data.b); wx.webViewPostMessage({ data: JSON.stringify({ method: 'add', result: result }) }); } } } }) ``` H5页面端代码： ```javascript // 获取web-view组件 var webview = document.getElementById('webview'); // 发送消息给小程序 webview.contentWindow.postMessage(JSON.stringify({ method: 'add', a: 1, b: 2 }), '*'); // 监听小程序返回的消息 window.addEventListener('message', function(e) { // 解析消息内容 var data = JSON.parse(e.data); // 处理返回结果 if (data.method == 'add') { console.log('1 + 2 = ' + data.result); } }); ``` 通过以上代码实现，我们就可以在H5页面中调用小程序中封装的方法了。需要注意的是，为了保证安全性，我们在发送消息时需要指定目标源，所以在postMessage()方法中需要指定'*'或者目标web-view的src属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值