【uniapp】多端（H5和微信小程序）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【uniapp】多端（H5和微信小程序）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、运行H5页面

二、去除H5顶部导航栏

三、区分H5页面和微信小程序的样式

四、H5页面下载视频、PDF

五、H5页面适配

一、运行H5页面

【uniapp】多端（H5和微信小程序）

打开网页后复制网页地址

然后打开微信开发者工具，点击公众号网页版，输入地址即可看到H5页面

【uniapp】多端（H5和微信小程序）

二、去除H5顶部导航栏

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"app-plus": {
			"bounce": "none" //可选: 是否禁止iOS回弹和Android触顶触底的弧形阴影, 默认允许 (可配在 'globalStyle')
		},
		"mp-alipay": {
			"allowsBounceVertical": "NO"
		}, //可选: 取消支付宝和钉钉小程序的iOS回弹 (可配在 'globalStyle')
		"h5": {
			"titleNView": false // H5的顶部导航
		}
	}

三、区分H5页面和微信小程序的样式

无论是页面还是js还是css，都是一样的使用，样式如下：

APP：APP端
 
            /*#ifdef APP-PLUS*/
            top:0;
            /*#endif*/


            /*#ifdef APP-PLUS*/
            console.log('APP端')
            /*#endif*/
       

            <!-- #ifdef APP-PLUS -->
            <view> APP端 </view>
            <!-- #endif -->
 
H5：H5端
            /*#ifdef H5*/
            top:88rpx;
            /*#endif*/


            /*#ifdef H5*/
            console.log('H5端')
            /*#endif*/


            <!-- #ifdef H5 -->
            <view> H5端 </view>
            <!-- #endif -->
 
MP：小程序
            /*#ifdef MP*/
            top:0;
            /*#endif*/

            /*#ifdef MP*/
            console.log('微信小程序端')
            /*#endif*/

            <!-- #ifdef MP -->
            <view> 小程序端 </view>
            <!-- #endif -->

四、H5页面下载视频、PDF

视频：

methods：{
   //下载方法
   saveFile(url, success) {
				const dA = document.createElement("a");
				dA.download = ''; // 设置下载的文件名，默认是'下载'
				dA.href = url;
				document.body.appendChild(dA);
				dA.click();
				dA.remove(); // 下载之后把创建的元素删除
				success(); //运行回调
    },
    //点击下载按钮
    downloadMP4() {
				let that = this
				this.saveFile(that.word.fileurl_EN, () => {
					// 保存下载记录
					that.api.DownloadFile({
						FileId: that.word.Id
					}).then(res => {
						console.log(res)
					})
				});
   },
}

PDF：

methods：{   
           // 下载
			async download() {
				let that = this
				// 文件
				await uni.showLoading({
					title: '加载中'
				})
				uni.openDocument({
					filePath: that.word.fileurl_EN,
					showMenu: true, //预览文件的时候右上角有三点
					success: function(res) {
						uni.hideLoading()
					},
					fail(error) {
						uni.hideLoading()
						uni.showToast({
							title: '打开失败，请刷新后稍后重新下载',
							icon: 'none'
						})
					}
				})
			},
}

五、H5页面适配

手机端、iPad、pc端

第一步：pages.json

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"app-plus": {
			"bounce": "none" //可选: 是否禁止iOS回弹和Android触顶触底的弧形阴影, 默认允许 (可配在 'globalStyle')
		},
		"mp-alipay": {
			"allowsBounceVertical": "NO"
		}, //可选: 取消支付宝和钉钉小程序的iOS回弹 (可配在 'globalStyle')
		"h5": {
			"titleNView": false, // 去掉APP、H5的顶部导航
			"devServer": {
				"disableHostCheck": true
			// "navigationStyle": "custom"
		},
		"rpxCalcMaxDeviceWidth": 1024 // rpx 计算所支持的最大设备宽度，单位 px，默认值为 960
		// "rpxCalcBaseDeviceWidth": 750, // rpx 计算使用的基准设备宽度，设备实际宽度超出 rpx 计算所支持的最大设备宽度时将按基准宽度计算，单位 px，默认值为 375
		// "rpxCalcIncludeWidth": 1280 // rpx 计算特殊处理的值，始终按实际的设备宽度计算，单位 rpx，默认值为 750
	}

第二步：页面使用媒体查询

<style lang="scss">
    // 设置了rpxCalcMaxDeviceWidth：1024px,所以1024px以内都可以使用rpx，超出则使用px
	@media screen and (min-width:1024px) {}
</style>

如果手机端和pc端的顶部不一样，切换的时候可以使用display: none;文章来源地址https://www.toymoban.com/news/detail-499949.html

<template>
	<view class="TopContainer">
		<!-- 没有超过屏幕宽度768，则显示 -->
        <view class="screen1"></view>

		<!-- 超过屏幕宽度768，则显示 -->
		<view class="screen"></view>
	</view>
</template>

<style lang="scss">
	.screen1 {
		display: block;
	}

	.screen {
		display: none;
	}

	@media screen and (min-width:1024px) {

		.screen1 {
			display: none;
		}

		.screen {
			display: block;
		}
	}
</style>

到了这里，关于【uniapp】多端（H5和微信小程序）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！