小程序知识点复盘——科技成果转换小程序（一）

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 1 天，点击查看活动详情

零、背景

本小程序原是工作室接的一个公司项目，目标用户是高校的专家和社会企业，为专家的科技成果落地转化与企业需求搭建一条桥梁，但由于某些原因，小程序没能上线，钱也没到手呜呜。

小程序是用hubilder3.3.13创建的vue2+uniapp小程序

本地运行环境：win10

一、swiper&&scroll-view

嵌套关系：swiper > scroll-view

<template>
  <view class="content">
    <view class="content-nav">
      <view
        v-for="(item, index) in navs"
        :key="index"
        :class="[
          selectedNavIndex == index
            ? 'content-nav-item-selected'
            : 'content-nav-item',
        ]"
        @click="changeNavIndex(index, 0)"
        >{{ item }}</view
      >
    </view>
    <view class="content-main">
      <swiper
        class="swiper"
        :indicator-dots="false"
        :autoplay="false"
        :current="selectedNavIndex"
        @change="changeNavIndex($event.detail.current, 1)"
      >
        <swiper-item v-for="(item, index) in navs" :key="index">
          <scroll-view :scroll-y="true" style="height: 100%">
            <view style="height: 200px; margin-bottom: 30px" v-for="i in 10" :key="i">{{
              selectedNavIndex +'-'+i
            }}</view>
          </scroll-view>
        </swiper-item>
      </swiper>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      navs: ["艺术", "科技"],
      selectedNavIndex: 0,
    };
  },
  methods: {
    changeNavIndex(e, type) {
      // 通过swiper改变navindex时触发函数一次，但通过按钮导航时触发函数两次，故加一个type在本函数有请求时作判断
      if(type){
        console.log('发送请求');
      }
      this.selectedNavIndex = e;
    },
  },
};
</script>
<style scoped lang='less'>
.content {
  height: 100%;
  width: 700rpx;
  margin: 0 auto;
  &-nav {
    height: 30px;
    display: flex;
    &-item {
      position: relative;
      padding: 0 10rpx;
      &::after {
        content: "";
        position: absolute;
        width: 0;
        left: 50%;
        height: 4px;
        bottom: 3px;
        transition: 1s;
      }
    }
    &-item-selected {
      position: relative;
      padding: 0 10rpx;
      &::after {
        content: "";
        position: absolute;
        width: 40%;
        left: 30%;
        height: 4px;
        background-color: #448cd5;
        border-radius: 2px;
        bottom: 3px;
        transition: 1s;
      }
    }
  }
  &-main {
    height: calc(100% - 30px);
    .swiper {
      height: 100%;
    }
  }
}
</style>

二、页面高度计算

系统信息的概念 | uni-app官网 (dcloud.net.cn)

页面可绘制区域(自定义导航栏时)

不需要自定义导航栏时高度用calc就能满足大部分场景了吧

import isIOS from "./isIOS"
export default function getContentHeight () {
    let menu = uni.getMenuButtonBoundingClientRect();
    let statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
    return (
        uni.getSystemInfoSync().screenHeight -
        menu.height -
        uni.getSystemInfoSync().statusBarHeight -
        (menu.top - statusBarHeight) * 2 -
        (isIOS() ? 75 : 65) +
        "px"
    );
}

原先用isios来区分苹果手机下边的横线，后边发现有些安卓手机也是有的，所以新解决方案中就利用安全区，判断是否有安全区的实现如下

export default function hasSafeArea(){
	let screenHeight =  uni.getSystemInfoSync().screenHeight
	let safeHeight =  uni.getSystemInfoSync().safeArea.bottom
	if(screenHeight !== safeHeight)return true
	else return false
}

页面NavagationBar导航栏高度

height = uni.getMenuButtonBoundingClientRect().height + 
         uni.getSystemInfoSync().statusBarHeight +
         (uni.getMenuButtonBoundingClientRect().top - statusBarHeight) * 2

三、UI引入

引入uni-ui

没什么特别之处，直接插件市场去导入就行 uni-ui - DCloud 插件市场

用法也很简单，不需要导入，直接写就行，具体属性还是参照官方文档

引入vant

引入vant也是参照别人的教程，我个人也是比较喜欢用页面引入的方式

但，引入后遇到下边这个问题，只需要把调试库版本降低就好啦

参考运行测试阶段没有问题，发行以后就出现：“routeDone with a webviewId 1 that is not the current page” - DCloud问答

四、图标引入

iconfont引入

从iconfont下载图标zip后，将这几个文件放进去

css文件前几个路径修改如下，不能用相对路径'./'

app.vue引入

单色图标就可以了

彩色图标引入

但如上使用的话无法用彩色图标，所以有了这个新工具

命令行运行npm install -g iconfont-tools

    <i class="t-icon t-[iconfont上点击图标的复制代码后的]"></i>
    iconfont用法    <i class="iconfont icon-a-progress-bright"></i>
    t-icon用法      <i class="t-icon t-icon-a-progress-bright"></i>

svg使用

svg好像没办法直接使用，所以我们当时是用一个在线网站把svg转base64进行使用

json形式

这是我突发奇想在小程序迭代过程中发现的，结合上边svg，写成json文件，不过缺点就是json文件要引入才能使用

这里边就是所有的图标在网站上转为base64的字符串

引入的时候可以这么引入，这样可以把所有图标引入

有时候我像下边这么引入，但会有warning，还不是很懂，有缘人可以提点解决方案