将h5内嵌入uniapp,直接发布成微信小程序

使用到的技术为uniappweb-view(web-view 是一个 web 浏览器组件,可以用来承载网页的容器,会自动铺满整个页面(nvue 使用需要手动指定宽高)。)

注意事项:h5必须是已发布的,并且域名是https开头的,且不能有 /api,正确格式https://www.baidu.com,其次,小程序必须是企业账号,不然不支持web-view

1.创建项目

使用HBuilder创建一个最简单的uniapp项目,vue版本,2,3都可以

2.项目中写入web-view

去启动页去写入web-view代码

src则是注意事项中h5发布的域名以及他访问的入口文件位置 

3.配置appid

登录微信公众平台,登录小程序账号,找到appid,配置到manifest.json中

 

4. 配置业务域名

(肯定是跟第二条src是一样的啦)

 

5.激活校验文件

下载上方最后一张图上的校验文件,重新打包h5,将校验文件放置至根目录(必须是根目录),然后发布至线上。(此校验只需一次即可)

6.调试

将小程序运行至开发者工具,编译过程中,如果报错,需要在微信开发者工具中开启一下服务端口。配置完成后,界面会在开发者工具中展示出来 。

7.发布

在开发者工具中,点击上传按钮,配置版本号等相关项目备注,点击右下方的上传即可,上传完成后,可以在微信公众平台中展示:【管理】-【版本管理】

8.提交审核

程序开发完成,无误后,可以直接点击提交审核,等待审核通过就好了。

 (后续如果需要传递参数,可以参考下方最后一条链接)

此篇文章参考链接:

将发布的h5页面转换成微信小程序,无需重新开发,操作超级简单!_h5打包成小程序_孤独半生的博客-CSDN博客

使用web-view实现小程序内嵌h5页面 h5跳转回小程序 详情步骤_web-view跳转回小程序指定页面_小木头。的博客-CSDN博客

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,能够编译到 iOS、Android、Web(包括微信小程序)以及各种 H5 应用等平台。当涉及到微信小程序时,uni-app 提供了丰富的API和组件,使得开发者能够方便地实现包括音频播放在内的各种功能。 微信小程序的音频样式主要是指如何通过小程序的界面和交互设计来展示音频播放的控制和信息。通常,音频样式包括以下几个方面: 1. 播放器的界面布局:这是用户接触的第一层面,通常包括播放/暂停按钮、进度条、声音大小控制、当前播放时间显示以及总时长显示等。开发者可以使用微信小程序提供的组件如 `<audio>` 来实现。 2. 自定义样式:开发者可以使用 CSS 对 `<audio>` 组件进行样式定制,包括颜色、大小、位置以及响应式布局等,以满足不同的设计需求。 3. 交互设计:合理的用户交互设计可以提升用户体验,比如点击封面图可以直接播放音频、长按播放按钮显示更多操作选项等。 微信小程序中,音频组件的使用示例代码如下: ```html <template> <view> <audio id="myAudio" src="your-audio-src.mp3" controls="true" controlsList="nodownload" autoplay="false" loop="false" initial-time="0" preload="auto" poster="your-poster-image.jpg" ></audio> </view> </template> ``` 在上述代码中,`<audio>` 组件用于嵌入音频内容,`src` 属性设置音频文件的 URL,`controls` 属性决定是否显示默认播放控件。`controlsList` 和 `preload` 等属性提供更细粒度的控件定制和播放行为设置。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值