关于真机调试的问题，请老师帮忙解答下疑问

问题描述：

老师，为什么安卓手机和苹果手机调试时显示的内容不一样啊？难道不是统一的吗？

相关截图：

这是安卓手机显示的，标题在右边，导航小图标也不显示，搜索框点击placeholder的文字就缩小了

这是苹果手机显示的，基本上都正常，但是搜索框光标是靠右的，但输入文字又是居中的

龙同學 2021-06-11

源自：慕课小程序实战开发 2-1 Tab切换菜单的制作

收起

3回答

好帮手慕言 2021-06-11 18:15:52

同学你好，解答如下：

1、这边没有荣耀和三星的手机，没有办法测试，我们的图片设置了防盗链，有可能是因为这个原因导致的，建议：可以不用这几个图片，使用同学自己本地的其他图片试试。

2、老师这边测试，在iphone下，搜索小图标位置都是可以的，比较美观，如果放到ipad下，可能不太合适，一般情况下，会做两套方案来适配手机和ipad。

另外：不同的系统之间肯定会有差别，这个就需要根据不同的情况来考虑了，建议同学先把基础知识掌握好，再想着真机测试的问题。

祝学习愉快~

收起回答

提问者龙同學 #1

嗯，好的。导航图标加载不出是因为使用设计稿的图片名字的带有中文，改成英文就好了

2021-06-11 18:26:29

好帮手慕言 2021-06-11 15:38:08

同学你好，解答如下：

1、是的，下方说的是对的

代码参考（1是一个默认值，同学设置为其他的也是可以的）：

2、代码中的.custom是固定定位，脱离文档流，在此元素后面的内容会往上显示一点，样式就不美观了，这时候就可以使用一个占位元素，把位置占上，下方的内容就不会再往上显示了。

3、目前老师这边只有这一个解决方式了。

祝学习愉快~

收起回答

提问者龙同學 #1

老师，我用真机测试导航栏图标就是显示不出来，只有苹果手机显示出来了，我用荣耀和三星手机测试了都没显示出来；还有就是放大镜图标如果是按照iPhone5的机型来做的，切换到其他机型位置就变了，感觉很多都弄不明白了

2021-06-11 16:31:40

好帮手慕言 2021-06-11 14:07:03

同学你好，解答如下：

1、标题显示的位置和手机系统有关，Android系统上标题居左显示，IOS系统上标题是居中显示的。自定义导航栏可以解决这个问题，如下：

index.wxml

  <view class="custom flex_center" style="padding-top:{{statusBarHeight}}px">
   <p>慕课</p>
  </view>
  <view class="empty_custom" style="padding-top:{{statusBarHeight}}px">
 </view>
<view class="header">
  <input type="text" class="header-input" placeholder="AngularJS·MySQL·Java" placeholder-class="header-input-placeholder" bindinput="handleInputChange" />
  <icon type="search" class="header-input-icon" size="13" wx:if="{{showIcon}}" />
</view>

index.wxss

.custom{
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  height: 45px;
  z-index: 999;
  text-align: center;
  color:#000;
}
.custom p{
  width: 100%;
  display: block;
  line-height: 45px;
  color: #000;
  font-size: 35rpx;
  font-weight: 500;
  max-width: 280rpx;
  position: relative;
  top: 25px;
  left:30%;
}
/* 占位符 */
.empty_custom{
  height: 50px;
  width: 100%;
}

index.json

{
  "usingComponents": {},
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTextStyle": "black"
}

app.json

"window": {
    "navigationStyle": "custom"
},

app.js

App({
    globalData:{
    // 头部的自定义高度
    statusBarHeight: wx.getSystemInfoSync()['statusBarHeight'],
  }
})

2、老师这边在Android系统测试，图标是可以显示出来的。搜索框的提示文字不影响整体效果，可以忽略。

祝学习愉快~

收起回答

提问者龙同學 #1

老师，占位符是干嘛的？

2021-06-11 14:40:42
提问者龙同學 #2

记起来了，突然记不起了

2021-06-11 15:15:51
提问者龙同學 #3

老师，是不是还应该还要在index.js文件里实例化App，然后再提取 statusBarHeight 保存到一个变量，最后在放进data里？

2021-06-11 15:20:17