1. 什么是uniapp
uniapp是一款跨端开发框架，可以使用vue语法开发同时在多个平台上运行的应用，包括但不限于微信小程序、APP、H5等平台，使用它可以节省开发成本和时间。
uniapp支持开发者自定义样式，其中宽度也可以进行自定义。下面我们来介绍如何设置uniapp应用的宽度。
2. 设置uniapp应用的宽度
2.1 通过全局样式设置
通过在uniapp的全局样式中设置宽度，可以使得所有页面的宽度都被适配，通常用于uniapp应用整体风格调整。
首先打开uniapp项目目录下的 App.vue 文件，并在 <style> 标签下设置全局样式：
<style>
/* 设置整个uniapp应用的宽度 */
html, body, #app {
width: 750rpx;
}
</style>
上述代码中，我们通过设置 html、 body 和 #app 的宽度为 750rpx 来实现全局宽度设置。其中rpx是uniapp中的一个单位，表示设备宽度的 1/750，因此 750rpx 相当于设计稿中的750px。
2.2 通过页面样式设置
如果只需要对某一个页面进行宽度设置，可以在单独页面的样式中进行设置。
打开需要进行宽度设置的页面的 vue 文件，在 <style> 标签下添加以下代码：
<style>
/* 设置该页面的宽度 */
.page-container {
width: 750rpx;
}
</style>
上述代码中，我们通过设置一个类名为 page-container 的元素宽度为750rpx，来使该页面的宽度进行适配。
2.3 通过属性绑定设置
在uniapp中，我们也可以通过属性绑定来设置元素的宽度。这种方式通常使用在需要动态计算宽度的场景中，比如轮播图等组件中。
打开需要设置宽度的组件的 vue 文件，在相应元素上使用 :style 绑定属性进行宽度设置：
<template>
<swiper :style="`width: ${ width }rpx`">
...
</swiper>
</template>
<script>
export default {
data() {
return {
width: 750 // 使用data中的width控制宽度
}
}
}
</script>
上述代码中，我们使用 data 中的 width 控制了 Swiper 组件的宽度，并且使用动态绑定的方式在 <swiper> 上设置宽度。
2.4 通过js动态设置
最后一种方式是通过JS代码动态设置元素的宽度。这种方式通常使用在需要根据代码计算宽度的场景中，比如根据子元素数量计算宽度。
在需要设置宽度的页面中，使用 UniView 组件包裹需要设置宽度的元素，并在 mounted 钩子函数中动态设置宽度：
<template>
<div class="container">
<uni-view class="item" v-for="(value, index) in list" :key="index" @tap="handleClick(index)">
{{ value.name }}
</uni-view>
</div>
</template>
<script>
export default {
data() {
return {
list: [{
name: 'item1'
}, {
name: 'item2'
}, {
name: 'item3'
}]
}
},
mounted() {
const len = this.list.length
const width = len * 150 // 假设每个子项宽度为 150px
const itemElem = this.$refs['itemContainer'] // 获取容器元素引用
itemElem.style.width = `${width}px` // 动态设置容器宽度
},
methods: {
handleClick(index) {
...
}
}
}
</script>
上述代码中，我们使用 UniView 组件包裹了若干个子项，然后在 mounted 钩子函数中计算子项总宽度，并动态设置容器宽度。
3. 总结
uniapp的宽度设置有多种方式，根据需求选择不同方式进行适配。
通过全局样式设置适用于整体风格调整，通过页面样式设置适用于局部页面宽度调整，通过属性绑定设置适用于需要动态计算宽度的元素，通过js动态设置适用于需要根据代码计算宽度的场景。