微信小程序开发设计详细代码：一个小程序，包含有1个主页面和多个子页面，通过导航按钮可以进入到子页面和返回主页面，主要功能是获取手机系统信息、兼容性判断、网络状态、电量、WiFi、联系人和电话和剪切板这七种手机硬件设备信息并显示。

以下是一个简单的微信小程序开发设计示例，包含主页面和两个子页面，实现了获取手机系统信息、兼容性判断、网络状态、电量、WiFi、联系人和电话和剪切板这七种手机硬件设备信息并显示的功能。

主页面代码(index.wxml)：

<view class="container">
  <view class="title">手机硬件设备信息</view>
  <view class="btn" bindtap="toSystemInfo">获取系统信息</view>
  <view class="btn" bindtap="toNetworkStatus">获取网络状态</view>
  <view class="btn" bindtap="toBatteryInfo">获取电量</view>
  <view class="btn" bindtap="toWifiInfo">获取WiFi信息</view>
  <view class="btn" bindtap="toContact">获取联系人</view>
  <view class="btn" bindtap="toClipboard">剪切板</view>
</view>

主页面样式(index.wxss)：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
}

.btn {
  width: 200px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  margin-bottom: 10px;
  background-color: #4CAF50;
  color: #fff;
  border-radius: 4px;
  cursor: pointer;
}

主页面逻辑控制(index.js)：

Page({
  toSystemInfo: function() {
    wx.navigateTo({
      url: '/pages/systemInfo/systemInfo'
    })
  },
  toNetworkStatus: function() {
    wx.navigateTo({
      url: '/pages/networkStatus/networkStatus'
    })
  },
  toBatteryInfo: function() {
    wx.navigateTo({
      url: '/pages/batteryInfo/batteryInfo'
    })
  },
  toWifiInfo: function() {
    wx.navigateTo({
      url: '/pages/wifiInfo/wifiInfo'
    })
  },
  toContact: function() {
    wx.navigateTo({
      url: '/pages/contact/contact'
    })
  },
  toClipboard: function() {
    wx.navigateTo({
      url: '/pages/clipboard/clipboard'
    })
  }
})

子页面代码(systemInfo.wxml)：

<view class="container">
  <view class="title">系统信息</view>
  <view class="info">手机品牌：{{brand}}</view>
  <view class="info">手机型号：{{model}}</view>
  <view class="info">操作系统版本：{{system}}</view>
  <view class="info">屏幕分辨率：{{screenWidth}} x {{screenHeight}}</view>
</view>

子页面样式(systemInfo.wxss)：

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.title {
  font-size: 24px;
  margin-bottom: 20px;
}

.info {
  font-size: 16px;
  margin-bottom: 10px;
}

子页面逻辑控制(systemInfo.js)：

Page({
  data: {
    brand: '',
    model: '',
    system: '',
    screenWidth: '',
    screenHeight: ''
  },
  onLoad: function () {
    let that = this
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          brand: res.brand,
          model: res.model,
          system: res.system,
          screenWidth: res.screenWidth,
          screenHeight: res.screenHeight
        })
      }
    })
  }
})

另一个子页面(networkStatus)、电量(batteryInfo)、WiFi(wifiInfo)、联系人(contact)和剪切板(clipboard)的代码和样式类似，只需要修改相应的API和显示内容即可。