一、概述

随着移动互联网的发展，很多项目需要同时支持H5和微信小程序。本文将详细介绍从H5适配到微信小程序的整个流程，包括分包处理、公共文件适配、页面适配、语音兼容等关键技术点，帮助开发者快速完成多端适配。

二、项目结构与分包处理

1. 分包的必要性

微信小程序对主包大小有严格限制（2MB），为了提高加载性能和避免超出大小限制，必须进行分包处理。

2. 分包配置示例

// pages.json

{

	"pages": [

		"pages/index/index",

		"pages/my/my"

	],

	"subPackages": [

		{

			"root": "subpackage",

			"pages": [

				"appointment/appointment",

				"scanCode/scanCode"

			]

		},

		{

			"root": "subpackage2",

			"pages": [

				"pages/customer/customer"

			]

		}

	]

}

3. 分包原则

1. 主包：放置TabBar页面和高频使用页面

2. 分包：按功能模块划分，如预约功能、查询功能、聊天功能等

3. 独立分包：可独立运行的功能模块，如扫码功能

三、公共文件适配

1. App.vue适配

<script>

export default {

onLaunch: function(options) {

// 条件编译：微信小程序特定逻辑

// #ifdef MP-WEIXIN

this.fixLocaleLowerCaseBug()

// #endif

},

methods: {

// 微信小程序特定修复函数

// #ifdef MP-WEIXIN

fixLocaleLowerCaseBug() {

// 修复微信小程序String.prototype.toLowerCase()的bug

}

// #endif

}

}

</script>



<style lang="scss">

/* 微信小程序不建议直接引用本地字体文件 */

/* #ifdef H5 */

@font-face {

font-family: "PingFang SC";

src: url('./subpackage2/static/font/PingFangSC-Regular.woff2');

}

/* #endif */



page {

height: 100%;

background-color: #f5f5f5;

}

</style>

2. main.js适配

// 条件导入

// #ifdef MP-WEIXIN

import packageInfo from '@/package.json';

let process = packageInfo['uni-app'].scripts['test-weixin'];

// #endif



// 环境变量配置

let url = '';

// #ifdef H5

url = process.env.NODE_ENV === 'development' ? '/uniappProxy' : process.env.HTTPURL;

// #endif

// #ifdef MP-WEIXIN

url = process.env.HTTPURL;

// #endif



// 全局变量配置

// #ifndef VUE3

Vue.prototype.$globalData = params;

// #endif

// #ifdef VUE3

app1.config.globalProperties.$globalData = params;

// #endif

四、页面适配

1. 欢迎页-首页适配

<template>

<view class="index-wrap">

<WelcomeVue v-if="envType == 'test'"></WelcomeVue>

<GZWelcome v-else></GZWelcome>

</view>

</template>



<script>

export default {

data() {

return {

envType: ''

}

},

created() {

// #ifdef H5

this.envType = process.env.NAME;

uni.hideTabBar();

// #endif

},

onShow() {

// #ifdef MP-WEIXIN

this.envType = this.testWeixinEnv.ENV_TYPE || 'unknown';

uni.hideTabBar();

// #endif

}

}

</script>

2. 对话界面customer适配

2.1 滚动组件适配

<!-- #ifdef H5 -->

<view class="scroll-Y scroll-wrap" id="scroll" :scroll-top="scrollTop">

<view id="scrollInner">

<!-- #endif -->



<!-- #ifdef MP-WEIXIN -->

<scroll-view class="scroll-Y scroll-wrap" scroll-y="true" ref="scroll">

<view id="scroll-view-content">

<!-- #endif -->

<!-- 聊天内容 -->

<!-- #ifdef MP-WEIXIN -->

</view>

</scroll-view>

<!-- #endif -->



<!-- #ifdef H5 -->

</view>

</view>

<!-- #endif -->

2.2 富文本渲染适配

<!-- #ifdef H5 -->

<mp-html style="white-space: pre-wrap"

:content="marked(extractThinkContent(item.response).outsideContent)"

:class="[isCaring ? 'large-text' : '']" />

<!-- #endif -->



<!-- #ifdef MP-WEIXIN -->

<ua-markdown style="white-space: pre-wrap"

:source="processedMarkdown(item.response)"

:class="[isCaring ? 'large-text' : '',]" />

<!-- #endif -->

五、语音兼容处理

1. 录音功能适配

// H5录音处理

record() {

if (this.rec && this.rec.open && this.rec.start) {

this.rec.open(() => {

this.rec.start();

this.isVioce = 'inProgress';

});

}

},



// 微信小程序录音处理

startRecording(e) {

// #ifdef MP-WEIXIN

this.recorderManager = uni.getRecorderManager();

this.socketTask = uni.connectSocket({

url: this.$globalData.httpUrl + '/asr'

});

this.recorderManager.onStart(() => {

console.log('录音开始');

});

this.socketTask.onOpen(() => {

console.log('WebSocket连接已打开');

});

// #endif

}

2. 语音识别适配

// 录音数据处理

recProcess(buffer, powerLevel) {

// #ifdef H5

if (this.isRecording === true && Recorder && Recorder.SampleData) {

var data_48k = buffer[buffer.length - 1];

var array_48k = new Array(data_48k);

var data_16k = Recorder.SampleData(array_48k, bufferSampleRate, 16000).data;

// 发送到WebSocket

this.wsconnecter.wsSend(data_16k);

}

// #endif

}

六、H5与小程序语法差异

1. 条件编译指令

// 微信小程序特有代码

// #ifdef MP-WEIXIN

console.log('微信小程序环境');

// #endif



// H5特有代码

// #ifdef H5

console.log('H5环境');

// #endif



// 非微信小程序代码

// #ifndef MP-WEIXIN

console.log('非微信小程序环境');

// #endif

2. 组件使用差异

功能	H5	微信小程序
滚动容器	<div scroll>	<scroll-view>
富文本渲染	<mp-html>	<ua-markdown>
导航栏	<uni-nav-bar>	原生导航栏或自定义
页面跳转	vue-router	uni.navigateTo()

3. API差异

// H5获取DOM

// #ifdef H5

let head = document.getElementsByTagName('uni-page-head');

if (head[0]) {

head[0].style.display = 'none';

}

// #endif



// 微信小程序获取DOM

// #ifdef MP-WEIXIN

uni.createSelectorQuery().in(this).select('#scroll-view-content').boundingClientRect((res) => {

let top = res.height;

if (top > 0) {

this.scrollTop = top + 150;

}

}).exec()

// #endif

4. 事件处理差异

// H5触摸事件

// #ifdef H5

e.preventDefault();

e.stopPropagation();

this.touchStartX = e.touches[0].clientX;

// #endif



// 微信小程序触摸事件

// #ifdef MP-WEIXIN

this.startX = e.touches[0].pageX;

// #endif

七、部署到线上后的问题

1. 小程序审核问题

• 解决方案：确保所有权限申请都有合理说明，避免使用敏感API
• 注意事项：微信小程序不允许直接下载文件到本地，需要使用`wx.saveImageToPhotosAlbum`等API

2. 性能优化问题

• 分包优化：合理划分分包，减少主包大小
• 图片优化：使用CDN加速，压缩图片大小
• 代码优化：移除不必要的依赖，使用条件编译减少冗余代码

3. 兼容性问题

• 设备兼容性：测试不同机型和系统版本
• 网络兼容性：处理弱网环境下的加载和错误提示
• API兼容性：使用`uni.getSystemInfoSync()`获取设备信息，根据设备型号适配

八、总结

⚠️H5适配微信小程序需要注意以下几点：

1. 合理使用分包：减少主包大小，提高加载性能
2. 条件编译：根据不同平台编写特定代码
3. 组件适配：使用跨平台组件或条件渲染不同平台的组件
4. API适配：使用uni-app提供的跨平台API，避免直接使用平台特定API
5. 性能优化：注意小程序的性能限制，优化代码和资源
6. 测试验证：在真实环境下测试，确保功能正常

通过以上步骤，可以高效地完成H5到微信小程序的适配工作，实现一套代码多端运行的目标。

九、参考资源

1. uni-app官方文档https://uniapp.dcloud.io/
2. 微信小程序开发文档https://developers.weixin.qq.com/miniprogram/dev/framework/