【微信版本：8.0.15_48】
常见问题1：半屏小程序自定义头部造成元素错位问题
在鸿蒙端微信小程序中，调用wx.getSystemInfoSync API以及wx.getWindowInfo API读取的statusBarHeight参数，在半屏情况下statusBarHeight及safeArea.top返回的是“状态栏的高度”不是0，而IOS和Android端会返回0，开发者在没有对鸿蒙进行适配时，会造成UI样式错乱。
图1. API返回值statusBarHeight不一致导致头部错位问题
建议开发时使用如下代码进行半屏适配：
const windowInfo = wx.getWindowInfo()
// 判断打开的是否是半屏小程序，如果是则手动设置statusBarHeight和top的值为0，官方文档地址:https://developers.weixin.qq.com/miniprogram/dev/api/base/app/life-cycle/wx.getEnterOptionsSync.html
if(wx.getEnterOptionsSync().apiCategory==='embedded') {
windowInfo.statusBarHeight = 0;
windowInfo.safeArea.top = 0;
}
this.setData({
windowInfo: windowInfo
})
常见问题2：微信小程序调用wx.openLocation API无法打开地图问题
微信官方示例要求wx.openLocation在调用时传入的经纬度值为Number类型，由于不同手机系统中的微信对字段类型的校验严谨程度不一致，导致在IOS和Android中调用时传入字符串类型仍然可以正常打开内置地图，而鸿蒙6.0系统，进行强类型的语法校验，因此如果传的经纬度是字符串类型，则不能够正常打开微信内置地图。建议在代码中通过Number()进行类型转换来保证在各个框架上表现一致。
图2. wx.openLocation打开内置地图问题
// index.js
Page({
data: {
latitude: 34.739471,
longitude: 117.158988,
addressName: '微山湖渔家水街景区咨询处(乘船处)',
},
clickCalloutFunc(e) {
let _this = this;
wx.openLocation({
latitude: Number(_this.data.latitude),
longitude: Number(_this.data.longitude),
name: _this.data.addressName
})
}
})
常见问题3：slot插槽内input组件不展示内容
在组件内，使用slot插槽，插槽的内容是input输入框，通过wx:if判断的最外层的组件显示和隐藏。初始化时wx:if的值为false组件不进行渲染，设置wx:if的值为true时，组件渲染，这时input输入框输入的内容能够正常回显；隐藏弹出框的组件，wx:if为false，之后再打开组件设置wx:if为true，input默认不展示已设置的值。可采用以下方案规避：
解决方案一：slot不用wx:if判断，用hidden来判断
// index.wxml
<popup show="{{show}}">
<input type="number" value="{{value}}"/>
</popup>
<button bind:tap="changeShow">弹出/关闭</button>
// index.js
data: {
show: false,
value: 1,
},
changeShow() {
this.setData({
show: !this.data.show
})
}
// popup.wxml
// 关键点：使用wx:if="{{showPopup}}"复现问题，改成用hidden="{{!showPopup}}"可规避问题
<view class="popup" hidden="{{!showPopup}}">
<slot></slot>
</view>
// popup.js
properties: {
show: {
type: Boolean,
value: false,
observer(val) {
this.setData({
showPopup: val
})
}
}
},
data: {
showPopup: false
}
解决方案二：给input组件同样加wx:if判断，使wx:if判断为true时，slot内部的input组件可以重新渲染
// index.wxml
<popup show="{{show}}">
// 关键点：input组件未添加wx:if="{{show}}"时复现问题，添加 wx:if="{{show}}"可规避问题
<input wx:if="{{show}}" type="number" value="{{value}}"/>
</popup>
<button bind:tap="changeShow">弹出/关闭</button>
// index.js
data: {
show: false,
value: 1,
},
changeShow() {
this.setData({
show: !this.data.show
})
}
// popup.wxml
<view class="popup" wx:if="{{showPopup}}">
<slot></slot>
</view>
// popup.js
properties: {
show: {
type: Boolean,
value: false,
observer(val) {
this.setData({
showPopup: val
})
}
}
},
data: {
showPopup: false
}
总结：微信小程序在鸿蒙端的适配，与微信版本及基础库更新深度绑定、双向联动。二者协同是解决组件与 API 兼容、提升适配效果的核心。微信的持续迭代，也为鸿蒙端适配提供了明确方向与技术支撑。我们将持续总结适配经验，分享技巧与方案，助力开发者提升效率、降低成本，共同推进小程序生态在鸿蒙平台的稳定落地。
10个月宝宝每天需要喝多少奶粉？