web项目实践问题记录

向后端传递formData 格式数据

export const delSupplyApi = (params, id) => http.put(
  `/gdv/agriculture/supply-products/self/enable/${id}`,
  params,
  {
    header: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  }
)

uview 阻止switch冒泡事件

在switch父元素标签中加 @tap.stop.prevent

获取函数默认回调参数

函数名($event，参数)
$event 即为函数默认值
clg($event,参数)

Vue（uniapp）添加工具方法及引入

在utils.js文件中创建方法

//手机号格式转换(184-2323-4343)
export function formatPhone(val) {
	if (val) {
		const matches = /^(\d{3})(\d{4})(\d{4})$/.exec(val);
		if (matches) {
			return matches[1] + "-" + matches[2] + "-" + matches[3];
		}
	}
	return val;
}

在main.js引入

import {formatPhone} from '@/utils.js'
Vue.prototype.$formatPhone = formatPhone

在页面中使用

:text="$formatPhone(item.phone)"

用户体验优化-加载页面

加载组件

u-loading-page (uview组件)

<u-loading-page :loading="pageLoading" />
 getOneJobFun(id) {
      this.pageLoading = true;
      getOneJobApi(id)
        .then((res) => {
          this.jobObj = res;
          this.pageLoading = false;
          if (isAccessed && res.type === 2) {
            this.isReset = true;
          }
        })
        .catch((err) => {
          this.pageLoading = false;
        });
    },

Vue逻辑复用-mixins

js文件

引入

递归条件查询树状列表

数据结构

方法

层级选择（uview）引入组件（待研究）

<template>
  <view class="locationPicker-content">
    <view class="input-con" @click="show">
      <u--input
        v-model="location"
        placeholder="请选择居住地址"
        readonly
        placeholderClass="placeholderClass"
        clearable
        :inputAlign="inputStyle.inputAlign"
        :border="inputStyle.border"
        :confirmType="inputStyle.confirmType"
      >
        <u-icon
          slot="suffix"
          name="arrow-right"
          color="#bbbbbb"
        />
      </u--input>
    </view>

    <u-popup :show="popupShow" round="10" closeable @close="popupShow = false">
      <view class="tree-content">
        <view class="title">
          <common-title title="选择地址" />
        </view>
        <!-- v-slot:default="{item}" -->
        <view class="inner-content">
          <luyj-tree
            :trees="locationTree"
            :props="treeProps"
            :search-if="false"
            :is-check="false"
            check-active-color="#2279ff"
            @clickItem="clickItem"
          >
            <!-- <view class="content-item">
              {{ item.divisionName }}
            </view> -->
          </luyj-tree>
        </view>
      </view>
    </u-popup>

  </view>
</template>

<script>
import { getLocationApi } from '@/api/villageBusiness/prove.js';
import commonTitle from '../commonTitle/commonTitle.vue';
export default {
  components: { commonTitle },
  model: {
    prop: 'value',
    event: 'input'
  },
  props: {
    value: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      location: this.value,
      popupShow: false,
      inputStyle: {
        inputAlign: 'right',
        border: 'none',
        confirmType: 'next'
      },
      locationTree: [],
      treeProps: {
        id: 'id',
        label: 'divisionName',
        children: 'children'
      },
      finalLocation: [],
      finalLocationId: []
    }
  },
  mounted() {
    this.getLocationFun()
  },
  methods: {
    show() {
      this.popupShow = true;
      uni.hideKeyboard()
      this.finalLocation = []
      this.finalLocationId = []
    },
    // 选择树状图中的某一级
    clickItem(data) {
      const { finalLocation } = this
      const { divisionName, id, children, pid } = data
      if(children) {
        if(finalLocation.length > 0){
          if(pid === 0){ // 第一级
            console.log('全部清空');
            this.finalLocation = []
            this.finalLocationId = []
          }else{ // 第二级
            this.finalLocation.splice(1, 1)
            this.finalLocationId.splice(1, 1)
          }
        }
        this.finalLocation.push(divisionName)
        this.finalLocationId.push(id)
      }else{ // 第三级
        this.finalLocation.push(divisionName)
        this.finalLocationId.push(id)

        this.location = this.finalLocation.join('-')
        this.$emit("input", this.finalLocation.join('-'));
        this.popupShow = false

      }
    },
    // =============== API ===============
    // 查询行政区划
    getLocationFun() {
      getLocationApi().then((res) => {
				console.log(res);
        this.locationTree = res
      }).catch(err => {
        console.log(err);
      })
    },
  }
}
</script>

<style lang="scss" scoped>
  .input-con{
    margin-left: 26rpx;
  }

  .tree-content{
    padding-top: 60rpx;
    height: 1000rpx;
    // padding: 30rpx;
    .title{
      margin: 20rpx;
    }
  }
  .inner-content{
    height: 1000rpx;
    overflow-y: auto;
  }
</style>

全屏npm包插件

https://www.npmjs.com/package/screenfull

动态设置class样式，根据条件设置

使用数组:class=“[]”

<text class="content-label" :class="[item.courseHostType==1?'active1':item.courseHostType==2?'active2':'active3']" v-if="item.courseHostType!=null">
            {{item.courseHostType==0?'中小学教育':item.courseHostType==1?'法制教育':"技能培训"}}
</text>

需要将数组对象的属性名进行修改，除了遍历的方法

将数组对象转化为JSON字符串，然后使用replace(/name/g)方法进行替换

      let newForm = JSON.parse(
        JSON.stringify(this.formData)
          .replace(/realName/g, "name")
          .replace(/phone/g, "tel")
      );

需要将data中定义的数组作为参数传递

可以将数组定义为arr1 arr2 之类 传递数组的序号 进拼接

  data() {
    return {
      list_file1: [],
      list_file2: [],
    };
  },
fileArr 为传递的序号
this[`list_file${fileArr}`] = res.records

    //回显调解文件[方法]
    getImgs(type, fileArr) {
      const params = {
        current: 1,
        size: 500,
        businessId: this.formData.id,
        type: type,
      };
      getImgsByIdApi(params)
        .then((res) => {
          this[`list_file${fileArr}`] = res.records
        })
        .catch((err) => {
          console.log(err);
        });
    },

项目中响应式(媒体查询)的使用(不是特别详细，待补充)

@media only screen and (min-width: 320px){
  html {
    font-size: 62.5% !important;
  }
}
@media only screen and (min-width: 640px){
  html {
    font-size: 125% !important;
  }
}
@media only screen and (min-width: 750px){
  html {
    font-size: 150% !important;
  }
}
@media only screen and (min-width: 1242px){
  html {
    font-size: 187.5% !important;
  }
}

单位使用rem

Vue渲染数据的坑

在获取后端得到的数据之后，一定检查数据的格式，判断是，数组对象还是对象，等等

min-width/max-width最小宽度的使用

在使用弹性布局的时候，有些时候元素宽度是不固定的，要保证布局的正常显示，就需要使用固定宽度
如下图，奖品描述部分的文本

实现多选，点击选中并改变样式，可取消

//前端代码
 <view
              class="bac_f8 lh80 dis_f jc fz28 radius6"
              style="width: 216rpx"
              v-for="(item, i) in nanny_list_s"
              :key="i"
              :class="{ active: c_nanny_list_s.indexOf(i) != -1 }"
              @click="nunnyClickS(i)"
              >{{ item.value }}</view
            >
//js代码
//点击选择下拉框筛选项
    nunnyClickS(i) {
      if (this.c_nanny_list_s.indexOf(i) == -1) {
        console.log(i); //打印下标
        this.c_nanny_list_s.push(i); //选中添加到数组里
      } else {
        this.c_nanny_list_s.splice(this.c_nanny_list_s.indexOf(i), 1); //取消
      }
    },

另一种思路，点击将的数据添加到数组，再次点击的其他数据的时候，把目前数组里面的元素全删了，重新将所有亮的元素添加。

实现滚动页面到具体位置的时候，元素固定到顶部

//html需要在需要固定的元素添加id
//js代码
  mounted() {
    console.log("页面挂在完毕");
    const query = uni.createSelectorQuery().in(this);
    query
      .select("#scrollView")
      .boundingClientRect((data) => {
        console.log("布局位置信息", JSON.stringify(data));
        console.log("节点离页面顶部的距离" + data.top);
        this.myScroll = data.top;
      })
      .exec();
  },
  onPageScroll: function (e) {
    if (e.scrollTop > this.myScroll) {
      this.istop = 1;
    } else {
      this.istop = 0;
    }
  },

需求描述：数组1存放数组2数据的下标，对应拿取

//存放在options中
      let option2 = [];
      this.c_nanny_list_s.forEach((v, i) => {
        option2.push(this.nanny_list_s[v].value);
      });

场景：需要在内联样式中使用变量控制元素

<view class="bac_f" id="scrollView" :class="{'fixed':istop}" :style="istop==1 ? `margin-top:${statusHeight}` :''">