get-device-info.uvue

<template>
  <!-- #ifdef APP -->
  <scroll-view style="flex: 1">
    <!-- #endif -->
    <view>
      <page-head :title="title"></page-head>
      <view class="uni-common-mt">
        <view class="uni-list">
          <view class="uni-list">
            <view
              class="uni-list-cell"
              v-for="(item, _) in items"
              style="align-items: center"
            >
              <view class="uni-pd">
                <view class="uni-label" style="width: 180px">{{
                  item.label
                }}</view>
              </view>
              <view class="uni-list-cell-db">
                <textarea
                  :auto-height="true"
                  :disabled="true"
                  placeholder="未获取"
                  :value="item.value"
                />
              </view>
            </view>
          </view>
        </view>
        <view class="uni-padding-wrap">
          <view class="uni-btn-v">
            <button type="primary" @tap="getDeviceInfo">获取设备信息</button>
          </view>
        </view>
      </view>
    </view>
    <!-- #ifdef APP -->
  </scroll-view>
  <!-- #endif -->
</template>
<script>
type Item = {
	label : string,
	value : string,
}
export default {
	data() {
		return {
			title: 'getDeviceInfo',
			items: [] as Item[],
		}
	},
	onUnload:function(){
	},
	methods: {
		getDeviceInfo: function () {
			const res = uni.getDeviceInfo();
			//类型对象暂时不支持forin或Object.keys(), 临时通过字符串进行转化。
			const json = JSON.stringify(res);
			const result = JSON.parse<Map<string, any>>(json);
			this.items = [] as Item[];
			result.forEach((value, key) => {
				const item = {
					label: key,
					value: "" + value
				} as Item;
				this.items.push(item);
			})
		}
	}
}
</script>

<style>
.uni-pd {
  padding-left: 30rpx;
}
</style>