用uniapp写小程序遇到的坑

本帖为经验记录

1.小程序里想生成海报的话可以直接使用下边这个插件

生成海报：

https://ext.dcloud.net.cn/plugin?id=471

生成手写板的
https://ext.dcloud.net.cn/plugin?id=471

2.地区选择组件

由于该项目能展示到社区的地址，字数较多大多数现成的组件无法展示全，antd mobile中有一款可以展示全的如下图

由于当时没有看到这个组件所以自己封装了一个
regionalComponents/regionalComponents.vue

<template>
  <view class="content">
    <view class="region-box-layer" />
    <view
      class="region-box"
      :style="'height:' + heightCot + '%'"
    >
      <view class="title-box">
        <text
          class="title-txt"
          @tap="cancel"
        >
          取消
        </text>
        <text
          class="title-txt"
          @tap="sure"
        >
          确定
        </text>
      </view>
      <view class="map-txt">
        <text
          :class="showIndex == 0 ? 'select' : ''"
          @tap="anewSelect(0)"
        >
          {{ district }}
        </text>
        <text v-if="district != ''">
          -
        </text>
        <text
          v-if="district != ''"
          :class="showIndex == 1 ? 'select' : ''"
          @tap="anewSelect(1)"
        >
          {{ street }}
        </text>
        <text v-if="street != ''">
          -
        </text>
        <text
          v-if="street != ''"
          :class="showIndex == 2 ? 'select' : ''"
          @tap="anewSelect(2)"
        >
          {{ community }}
        </text>
      </view>
      <view class="main-box">
        <view v-if="showIndex === 0">
          <view
            v-for="(item, index) in districtData" 
            :key="index"
            class="list-box"
            @tap="selectDistrict(index, item)"
          >
            <text>{{ item.name }}</text>
          </view>
        </view>
        <view v-if="showIndex === 1">
          <view
            v-for="(item, index) in streetData" 
            :key="index"
            class="list-box"
            @tap="selectStreet(index, item)"
          >
            <text>{{ item.name }}</text>
          </view>
        </view>
        <view
          v-if="showIndex === 2"
        > 
          <view
            v-for="(item, index) in communityData"
            :key="index"
            class="list-box"
            @tap="selectCommunity(index, item)"
          >
            <text>{{ item.name }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getCommunityByCode } from "@/api";
export default {
  props:{
    level: {
      type: String,
      default: '110100',
    },
  },
  data() {
    return {
      showIndex: 0, //地区显示0为区1为街道2为社区
      district: "",
      community: "",
      communityCode: "",
      street: "",
      heightCot: 40, //设置屏幕高度 0 ~ 100
      districtData: "", // 当前展示的行政区数据
      streetData: "", // 当前展示的街道数据
      communityData: "", //当前展示的社区数据
      streetsData: "",  
    };
  },
  mounted() {
    this.handleAllDistrict(this.level); //获取区级数据 
  },
  methods: {
    //组件高度自适应
    getScreen() {
      let that = this;
      uni.getSystemInfo({
        success: (res) => {
          that.heightCot = (res.safeArea.height * 2) / 2;
        },
      });
    },
    //取消
    cancel() {
      this.$emit("cancel");
    },
    //确定
    sure() {
      const district = this.district; //区
      const street = this.street; //街道
      const community = this.community; //社区
      const communityCode = this.communityCode; //社区id
      const data = [district, street, community].filter((item) => {
        return item && item.trim();
      });
      this.$emit("sure", data, communityCode);
    },
    //下拉选择
    anewSelect(num) {
      switch (num) {
      case 0:
        this.showIndex = 0;
        this.communityData = [];
        this.streetsData = [];
        this.street = "";
        this.community = "";
        this.street = "";
        break;
      case 1:
        this.showIndex = 1;
        this.communityData = [];
        this.streetsData = [];
        this.community = "";
        this.street = "";
        break;
      case 2:
        break;
      }
    },
    //获取地区信息
    getMap(code, type) {
      //name选择名称 type类型
      let that = this;
      if (type === "AREA") {
        getCommunityByCode(code).then((res) => {
          if (res.code === 200) {
            that.streetData = res.data;
          }
        });
      } else if (type === "STR") {
        getCommunityByCode(code).then((res) => {
          if (res.code === 200) {
            that.communityData = res.data;
          }
        });
      }
    },
    //选择当前区级
    selectDistrict(index, item) {
      this.getMap(item.code, "AREA");
      this.district = item.name;
      this.showIndex = 1;
    },
    //选择当前街道
    selectStreet(index, item) {
      this.getMap(item.code, "STR");
      this.street = item.name;
      this.showIndex = 2;
    },
    // 选择当前社区
    selectCommunity(index, item) {
      this.community = item.name;
      this.communityCode = item.code;
      this.showIndex = 3;
    },
    //获取区级数据的回调
    handleAllDistrict(code) {
      getCommunityByCode(code).then((res) => {
        if (res.code === 200) {
          this.districtData = res.data;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.region-box-layer {
  position: fixed;
  z-index: 1001;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.6);
}
.region-box {
  position: fixed;
  z-index: 1002;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  padding: 20rpx;
  border-top: 1rpx solid rgba(0, 0, 0, 0.2); 
  max-height: 50%; 
  padding-bottom: 100rpx;
  border-radius: 15rpx;
  .title-box {
    padding: 0 10rpx 30rpx 10rpx;
    display: flex;
    justify-content: space-between; 
    .title-txt {
      color: #343434;
      font-size: 30rpx;
      &:nth-child(2) {
        color: #3c9cff;
      }
    }
  }
  .map-txt {
    display: flex;
    justify-content: center;
    color: #4293f4;
    font-size: 30rpx;
    height: 100rpx;
    align-items: center;
    background: #f9fbff;
    text {
      margin: 0 2rpx;
      &:nth-child(even) {
        border: none;
      }
    }
    .select {
      color: #3c9cff;
      position: relative;
    }
  }
  .main-box {
    font-size: 30rpx;
    height: 100%;
    overflow: auto;
    padding-bottom: 200rpx;
    .list-box {
      display: flex;
      flex-direction: column;
      padding: 30rpx 0;
      border-bottom: 1rpx solid #e1e2e3;
    }
  }
}
</style>

页面使用

//第一步引入及注册
import regionalComponents from "../../components/regionalComponents/regionalComponents.vue";
export default {
  components: {
    regionalComponents,
  },
   data() {
    return { 
      regionaStatus: false,
      	}
      }
  }

第二步展示

<!-- 地址选择弹窗 -->
    <regionalComponents
      v-if="regionaStatus"
      ref="region" 
      @cancel="cancels"
      @sure="sures"
    />
//js中的点击确认的回调
// 点击确认的回调
    sures(data, communityCode) {
      if (data.length < 3) {
        return;
      } 
      this.address = data[0] + data[1] + data[2];
      this.form.organizeAreaName = this.address;
      this.form.organizeAreaId = communityCode; //街道的code 
    },