最近做了一个小程序，是用uniapp写的，踩了很多坑，把我都搞绝望了。我是用HBuilder直接创建的项目。然后搭建基本的目录，分包，从掘金上搜了几篇请求封装的代码放进去了。也是源于自己菜吧，所以在做的过程中出现了很多问题，明明就是几个小小的不多的页面，楞是把我和后端两个人整得心力交瘁。

框架使用

uview
我是直接在uniapp插件市场安装的
主要功能用到了upload
上传文件格式着实弄了很久，百度上答案太多，最终是搜到了一个能用的
header: { "Content-Type": "multipart/form-data",},重点圈起来！
接口

图片.png

<u-form-item label="相关照片(最多可添加3张)" prop="img" ref="item1" class="img">       <u-upload
    :fileList="fileList"
    @afterRead="afterRead"
    @delete="deletePic"
    multiple
    :maxCount="maxCount"
    :previewFullImage="true"
  ></u-upload>
  </u-form-item>
  
<script>
 return {
      maxCount: 3,
      fileList: [],
      saveFileList: [],
      getRulesInfo: {
        img: [],
      },
      rules: {
        img: {
          type: "array",
          min: 1,
          max: 3,
          required: true,
          message: "请上传图片",
          trigger: ["change"],
          validator: (rule, value, callback) => {
            if (this.fileList.length === 0) {
              callback(new Error("请添加图片"));
            } else {
              callback();
            }
          },
        },
      },
    }
    methods:
        // 删除图片
    async deletePic(event) {
      if (!this.showTijiao) {
        return false;
      }
      console.log("点击删除图片", event);
      let params = {
        obj: {
          id: undefined,
        },
      };
      if (event.file.id) {
        params.obj.id = event.file.id; //后端返回的点击删除
      } else {
        let urlId = JSON.parse(event.file.url);
        params.obj.id = urlId.data.files[0].id; //自己上传点击删除
      }
      // console.log("urlId", urlId.data.files[0].id);
      try {
        const res = await this.$api.deleteApi(params);
        if (res.message && res.message === "删除文件成功") {
          this.fileList.splice(event.index, 1);
        }
      } catch (e) {
        console.warn(e);
      }
    },
    // 新增图片
    async afterRead(event) {
      if (!this.showTijiao) {
        return false;
      }
      console.log("event", event);
      console.log(this.fileList, "上传后的fileList");
      let lists = [].concat(event.file);
      let fileListLen = this[`fileList${event.name}`].length;
      lists.map((item) => {
        this[`fileList${event.name}`].push({
          ...item,
          status: "uploading",
          message: "上传中",
        });
      });
      for (let i = 0; i < lists.length; i++) {
        const result = await this.uploadFilePromise(lists[i].url);
        let item = this[`fileList${event.name}`][fileListLen];
        this[`fileList${event.name}`].splice(
          fileListLen,
          1,
          Object.assign(item, {
            status: "success",
            message: "",
            url: result,
          })
        );
        fileListLen++;
      }
    },
    uploadFilePromise(url) {
      if (!this.showTijiao) {
        return false;
      }
      return new Promise((resolve, reject) => {
        console.log(this.fileList[0], "上传的文件内容");
        const uploadUrl = operate.api() + "app/oss/jqupload";
        console.log(uploadUrl, "请求地址");
        uni.uploadFile({
          url: uploadUrl,
          name: "files[]",//接口文档中的那个files对应
          filePath: url,
          header: {
            "Content-Type": "multipart/form-data",
          },
          formData: {
            files: [this.fileList[0]],
          },
          success: (res) => {
            resolve(res.data);
            // 保存上传成功后返回的ID
            var changeData = JSON.parse(res.data);
            this.saveFileList.push(changeData.data.files[0].id);
            console.log(JSON.parse(res.data), "上传结果展示");
            console.log(this.saveFileList, "saveFileList");
          },
        });
      });
    },
    </script>

根据后端返回的数字信息判断展示不同文字样式

接口文档示例

图片.png

HTML代码

    <view
      class="list"
      v-for="(item, index) in list"
      :key="index"
      @click="gotoDetail(item, index)"
    >
      <image class="bq" :src="item.img" v-if="item.img !== ''"></image>
      <view v-else class="bq1">待审核</view>
      <view class="title">{{ item.titleText }}</view>
      <view class="time">自查时间: {{ item.timeText }}</view>
      <view class="msg">房源信息: {{ item.unitName }}</view>
    </view>

请求接口赋值

    async getList() {
      const imgMap = new Map([
        [1, ""],
        [2, "../../static/pass.png"],
        [3, "../../static/nopass.png"],
      ]);
      const typeMap = new Map([
        [1, "日常"],
        [2, "每周"],
        [3, "半月"],
        [4, "每月"],
      ]);
      try {
        const res = await this.$api.getSelfInspectionList({
          obj: this.query,
        });
        console.log(res);
        this.list = [...res.data].map((item) => {
          item.titleText = "出租房屋" + typeMap.get(item.type) + "检查";
          item.img = imgMap.get(item.status);
          item.timeText = this.trans2Str(item.createDate);
          return item;
        });
        console.log(this.list);
      } catch (e) {
        console.warn(e);
      }
    },

原型要求

图片.png

页面跳转方式

小程序跳转页面是有一个页面堆栈限制的，建议熟读文档，不然像我一样踩坑，大半夜痛哭流涕怀疑人生。 uniapp跳转方式
在网上搜索到了一个封装跳转方式的代码原文链接，我自己是把所有页面的跳转方式都改成了uni.redirectTo，跳转路径也改成绝对路径的形式：uni.redirectTo({url: '/houseBoss/index/index',});
网上其他参考链接1，网上其他参考链接2

// 封装navigateTo 避免wx.navigateTo堆栈到十层不跳转问题
function navigateTo(url) {
  console.log("当前页面栈个数================>", getCurrentPages().length)
  if (getCurrentPages().length >= 10) {
    wx.redirectTo({
      url: url,
      success: function (res) { },
      fail: function (res) { },
      complete: function (res) { },
    })
  } else {
    wx.navigateTo({
      url: url,
    })
  }
}

uniapp数据缓存

文档对应链接这个帮助我解决了页面跳来跳去，点击传值的值丢失导致接口请求缺少参数的问题。

总结

前方的路任重而道远，一路走来自己是有进步的，只不过进步的有点慢。时常怀疑自己，抱头痛哭，懊悔不已选择了这个专业，不过先做着吧，慢慢努力，好好加油！再就是做东西的时候不要着急，一步一步梳理好思路，在产品会议的时候，认真听理好思路很重要。再就是不要怕，大家都是来打工的，不要怕别人，不然别人觉得你好欺负，更加欺负你。总之还是要提升自己，不光是技术，还有心理素质，不要脸的态度。加油！

uniapp写微信小程序的一些总结

框架使用

根据后端返回的数字信息判断展示不同文字样式

页面跳转方式

uniapp数据缓存

总结