总结分享uniapp开发小程序的开发规范

1. 前言

随着微信小程序的兴起，很多前端开发者开始学习和使用小程序开发技术。而uniapp则是一种基于Vue.js开发跨平台应用的框架，可以同时开发出微信小程序、H5、Android和iOS应用。在进行uniapp开发小程序时，遵循一定的规范可以提高代码质量和开发效率，本文将分享一些开发规范和注意事项。

2. 多端适配

uniapp可以跨多个平台开发应用，因此需要考虑不同端设备和分辨率的适配问题。可以使用H5的rem方案或者flex布局进行移动端适配，使用uniapp提供的一些工具函数进行不同平台的判断和适配。

2.1 H5 rem适配

在uniapp中，可以在App.vue文件中进行rem适配的初始化配置，设定设计稿的宽度pxSize（设计稿的宽度/10）。然后在样式文件中，使用rem作为单位进行布局。

以下代码为App.vue文件所示：

export default {
  onLaunch: function () {
    const pxSize = 750 / 10
    uni.getSystemInfo({
      success: function (res) {
        const clientWidth = res.windowWidth
        const ratio = 750 / clientWidth
        const px2rem = pxSize / ratio
 
        // 设置html元素的字体大小，即rem的大小
        document.documentElement.style.fontSize = px2rem + 'px'
      }
    })
  }
}

在样式文件中，可以直接使用rem进行布局。例如：

.example{
  font-size: 0.28rem;
  margin-left: 0.2rem;
  padding: 0.2rem;
}

2.2 多端自适应

uniapp提供了一些内置样式变量，可以直接对不同端做出适配。如下：

// 小程序内置样式变量
.uni-mp {
  /* 样式代码 */
}
// H5内置样式变量
.uni-h5 {
  /* 样式代码 */
}
// App内置样式变量
.uni-app {
  /* 样式代码 */
}
// Android内置样式变量
.uni-android {
  /* 样式代码 */
}
// iOS内置样式变量
.uni-ios {
  /* 样式代码 */
}

根据不同的平台，使用对应的样式进行适配。如下：

// 指定在小程序端设定样式
.uni-mp {
  line-height: 1.3;
}
// 指定在H5端设定样式
.uni-h5 {
  line-height: 1.4;
}
// 指定在App端设定样式
.uni-app {
  line-height: 1.5;
}
// 指定在Android端设定样式
.uni-android {
  line-height: 1.6;
}
// 指定在iOS端设定样式
.uni-ios {
  line-height: 1.7;
}

3. 组件化开发

在uniapp开发小程序时，使用组件化的思想可以提高代码复用性和可维护性。可以将页面中的每个功能模块提取成单独的组件进行开发和管理，使代码更加清晰简洁。

具体实现方式是，将每个组件的HTML模板、CSS样式和JS代码分别写在一个.vue文件中，然后在需要使用的页面引入组件即可。

例如，我们需要提取一个商品卡片组件，代码如下：

// PlushCard.vue
<template>
  <view class="plush-card">
    <view class="card-img">
      <!-- 商品图片 -->
      <image :src="img" mode="aspectFill"></image>
    </view>
    <view class="card-info">
      <!-- 商品标题 -->
      <view class="info-title">{{title}}</view>
      <!-- 商品价格 -->
      <view class="info-price">{{price}}</view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    img: String,
    title: String,
    price: String
  }
}
</script>
<style>
  .plush-card{
    background-color: #ffffff;
    box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.1);
    padding: 20rpx;
    display: flex;
    align-items: center;
  }
  .card-img{
    width: 280rpx;
    height: 280rpx;
    margin-right: 20rpx;
    overflow: hidden;
  }
  .card-img image{
    width: 100%;
    height: 100%;
    display: block;
  }
  .card-info{
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  .info-title{
    font-size: 32rpx;
    color: #333;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .info-price{
    font-size: 28rpx;
    color: #ff8400;
  }
</style>

然后在需要使用该组件的页面上，引入组件即可。

// index.vue
<template>
  <view>
    <!-- 商品卡片组件 -->
    <plush-card :img="item.img" :title="item.title" :price="item.price"></plush-card>
  </view>
</template>
<script>
import PlushCard from '@/components/PlushCard'
export default {
  components:{
    PlushCard
  },
  data() {
    return {
      item: {
        img: 'https://xxx.com/xxx.jpg',
        title: '这是一件商品',
        price: '￥88.00'
      }
    }
  }
}
</script>

4. 文件命名规范

在uniapp开发小程序时，文件的命名规范也比较重要。合理的文件命名可以提高代码的可读性和管理效率。

4.1 文件夹命名

在uniapp中，一般将小程序页面放置在pages文件夹下。此外，可以创建common文件夹用于存放公共组件、工具函数等，static文件夹用于存放静态资源。文件夹的命名规范应该符合驼峰命名法，使命名更加清晰易懂。

4.1.1 pages文件夹

在pages文件夹下，一般为每个页面创建一个文件夹，文件夹的名称一般为页面的名称，且符合驼峰命名法。

例如：

pages
├── index
│   ├── index.vue
│   ├── index.js
│   ├── index.json
│   └── index.css
├── category
│   ├── category.vue
│   ├── category.js
│   ├── category.json
│   └── category.css
├── cart
│   ├── cart.vue
│   ├── cart.js
│   ├── cart.json
│   └── cart.css
└── user
    ├── user.vue
    ├── user.js
    ├── user.json
    └── user.css

4.1.2 common文件夹

在common文件夹下，一般为每个公共组件创建一个文件夹，文件夹的名称一般为组件的名称，且符合驼峰命名法。

例如：

common
├── Navbar
│   ├── Navbar.vue
│   ├── Navbar.js
│   ├── Navbar.json
│   └── Navbar.css
├── Tabbar
│   ├── Tabbar.vue
│   ├── Tabbar.js
│   ├── Tabbar.json
│   └── Tabbar.css
├── Loading
│   ├── Loading.vue
│   ├── Loading.js
│   ├── Loading.json
│   └── Loading.css
└── Dialog
    ├── Dialog.vue
    ├── Dialog.js
    ├── Dialog.json
    └── Dialog.css

4.2 文件命名

在uniapp开发小程序时，每个页面的vue文件需要配套多个文件，包括js、json和css等文件。这些文件的命名也应该符合一定的规范，以方便代码的管理和维护。

4.2.1 vue文件

vue文件的名称应该与所在文件夹的名称相同，且以.vue为后缀。例如：

├── category
│   ├── category.vue
│   ├── category.js
│   ├── category.json
│   └── category.css

4.2.2 js文件

js文件的名称应该与所在文件夹的名称相同，且以.js为后缀。例如：

├── category
│   ├── category.vue
│   ├── category.js
│   ├── category.json
│   └── category.css

4.2.3 json文件

json文件的名称应该与所在文件夹的名称相同，且以.json为后缀。例如：

├── category
│   ├── category.vue
│   ├── category.js
│   ├── category.json
│   └── category.css

4.2.4 css文件

css文件的名称应该与所在文件夹的名称相同，且以.css为后缀。例如：

├── category
│   ├── category.vue
│   ├── category.js
│   ├── category.json
│   └── category.css

5. 代码编写规范

在uniapp开发小程序时，除了上述的多端适配、组件化开发和文件命名规范外，代码的编写规范也非常重要。下面介绍一些常见的代码编写规范。

5.1 代码缩进和换行

在代码编写过程中，保持适当的代码缩进和换行可以使代码更加清晰易读。

一般建议使用四个空格作为缩进，而不是使用制表符。同时，在长的代码行处进行换行也能增加代码的可读性。

5.2 注释规范

在代码编写时，合理的注释可以使代码更容易被理解和维护。

一般而言，可以在函数或大段代码的前面添加注释，解释该函数或代码段的作用和参数含义。另外，注释中也可以添加一些特殊的标签，如@param和@return等。

例如：

/**
 * 获取当前时间
 * @param {boolean} utc 是否为UTC时间
 * @return {string} 返回当前时间字符串
 */
function getCurrentTime(utc = false){
  const now = new Date()
  if(utc){
    return now.toISOString()
  }else{
    return now.toLocaleString()
  }
}

6. 总结

在uniapp开发小程序中，遵循一定的开发规范可以提高代码的可读性、可维护性和开发效率。本文介绍了一些比较常见的开发规范，包括多端适配、组件化开发、文件命名规范和代码编写规范等。当然，这只是基础的规范，实际开发中还需要结合具体的业务场景和开发需求制定更加详细的开发规范。