知识大杂烩(uniapp)-阿里云开发者社区

首先声明：不敢保证都管用，这是我自己实践得来的。

box-shadow:

这段 CSS 样式代码用于创建一个阴影效果，它是通过 `box-shadow` 属性来实现的。让我解释一下这段代码的含义：

- `box-shadow`: 这是 CSS 的属性，用于添加阴影效果到一个元素上。

- `0`: 这是阴影的水平偏移量，表示阴影水平方向上不偏移（即阴影在元素的下方）。

- `14rpx`: 这是阴影的垂直偏移量，表示阴影垂直方向上偏移了 14 个 rpx 单位。rpx 是一种相对长度单位，常用于适配不同屏幕分辨率的移动应用开发。

- `18rpx`: 这是阴影的模糊半径，表示阴影的边缘会模糊化，模糊半径为 18 个 rpx 单位。

- `rgba(0, 0, 0, 0.1)`: 这是阴影的颜色和透明度。`rgba` 表示颜色由红、绿、蓝三个通道组成，每个通道的取值范围是 0 到 255，而最后一个参数表示透明度，取值范围是 0（完全透明）到 1（完全不透明）。在这里，阴影的颜色是黑色（红、绿、蓝都为 0），透明度为 0.1，即略带半透明的黑色阴影。

所以，这段代码的效果是在元素的下方（水平不偏移，垂直下移 14rpx），添加了一个半透明的黑色阴影，阴影的边缘有轻微的模糊效果。您可以根据需要调整偏移量、模糊半径和颜色来定制阴影效果。

box-shadow: 0 14rpx 18rpx rgba(0, 0, 0, 0.1);

rpx适用于小程序，px适用于pc端

uniapp的搜索功能：

链接：http://t.csdn.cn/wdUPg

utc时间转换成为本地时间uniapp版

链接：http://t.csdn.cn/XZryS

uniapp登录（微信小程序目前还能用的版本）

view部分

<button class="checkboxstr" @click="wxlogin" open-type="chooseAvatar" @chooseavatar="wxlogin">
                <image style="width: 50rpx;height: 50rpx;margin-top: 10rpx;" src="https://pic.imgdb.cn/item/64f71ef9661c6c8e54b5cc40.png" mode=""></image>
                <text style="margin-top: -10rpx;justify-content: center;display: flex;">微信授权登录</text> </button>

script部分

// 登录
      wxlogin() {
        // console.log(e.detail.avatarUrl,'image');
                        // if(e.detail.avatarUrl!=''){
                        //  this.sg = true
                        //  this.avatar=e.detail.avatarUrl
                        //  uni.setStorageSync("uming",e.detail.avatarUrl)
                        // }
        // let that = this;
        this.tanchu_sheng=false;
        //先获取用户的信息
        uni.getUserInfo({
          desc: '登录的数据',
          success(ures) {
            console.log(ures, '返回的用户信息');
            //这个地方的用户信息无论登录成功失败都可以拿到，只是拿到用户的信息
            //在成功的回调中去使用微信登录
            uni.login({
              provider: 'weixin', //使用微信登录
              success(lres) {
                console.log(lres, '获取到的code--------1');
                //我们要根据上面获取的code码去作为请求参数发送给后端
                let params = {
                  code: lres.code
                };
                console.log(lres.code,'查看code--------2');
                // 1
                uni.request({
                  url: '登录接口',//这里用自己的地址获取
                  method: 'POST',
                  data: {
                    code: lres.code
                  },
                  success: (res) => {
                    console.log(res,'测试是否成功？');
                    //获得token完成登录
                    uni.setStorageSync('token', res.data.data.token)
                    uni.setStorageSync('id', res.data.data.id)
                    console.log(res,'登录测试');
                    // 提示
                    uni.showToast({
                      title: `登陆成功`,
                      icon: 'none',
                      duration: 2000,
                      success: () => {
                        // console.log('轻提示显示成功');
                      },
                      fail: (error) => {
                        // console.error('轻提示显示失败', error);
                      }
                    });
                  }
                });
                // 2
              }
            });
          }
        });
      },

uniapp通过url跳转传参

在 PageA 中触发跳转，同时将参数附加到目标页面的 URL 中。

<template>
  <view>
    <!-- 触发跳转到 PageB -->
    <button @click="goToPageB">跳转到 PageB</button>
  </view>
</template>
<script>
export default {
  methods: {
    goToPageB() {
      // 使用 uni.navigateTo 方法跳转到 PageB，并传递参数
      uni.navigateTo({
        url: `/pages/PageB?param1=value1&param2=value2`,
      });
    },
  },
};
</script>

在 PageB 中获取 URL 参数并处理数据。

<template>
  <view>
    <!-- 在 PageB 中显示参数 -->
    <text>参数1：{{ param1 }}</text>
    <text>参数2：{{ param2 }}</text>
  </view>
</template>
<script>
export default {
  data() {
    return {
      param1: '',
      param2: '',
    };
  },
  onLoad(options) {
    // 在页面加载时获取 URL 参数
    this.param1 = options.param1 || '';
    this.param2 = options.param2 || '';
  },
};
</script>

3元表达式

下方是我写的一个小案例

{{shuju_dangan.nickname == null ? '暂无数据' : shuju_dangan.nickname == undefined ? '暂无数据' : shuju_dangan.nickname}}

如果 shuju_dangan.nickname 的值为 null，则显示 '暂无数据'。

否则，如果 shuju_dangan.nickname 的值为 undefined，同样显示 '暂无数据'。

如果 shuju_dangan.nickname 的值既不是 null 也不是 undefined，则显示 shuju_dangan.nickname 的值。

下方是一个进行简咯日期判断的三元表达式

{{item.end_time <= '2023-08-30' ? '数值1' : '数值2'}}

uniapp图片上传

view部分

<view class="">
      <view class="" style="padding: 30rpx;font-size: 30rpx;">
        上传图片
      </view>
      <view class="" style="margin-left: 2.5%;display: flex;">
        <!-- 图片上传 -->
        <image :src="shujus"  style="width:200rpx ;height: 200rpx;" mode=""></image>
        <u-upload :fileList="fileList1"   width="200rpx" height="200rpx"  @afterRead="afterRead" @delete="deletePic" name="1" multiple
          :maxCount="10"></u-upload>
      </view>
    </view>

script部分

fileList1: [],
        imageUrl: '', // 用于展示选择的图片
        shujus:'',

// 图片上传
      // 删除图片
      deletePic(event) {
        this[`fileList${event.name}`].splice(event.index, 1)
      },
      // 新增图片
      async afterRead(event) {
        // 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
        let lists = [].concat(event.file[0].url)
        uni.uploadFile({
          url: '接口', // 仅为示例，非真实的接口地址
          filePath: event.file[0].url,
          name: 'file',
          formData: {
            user: 'test'
          },
          success: (res) => {
            console.log(res.data);
            this.uploadImg = JSON.parse(res.data)
            console.log(this.uploadImg.url,123123);
            this.shujus = this.uploadImg.url;
            uni.showToast({
              title: `图片上传成功`,
              icon: 'none',
              duration: 2000,
              success: () => {
              },
              fail: (error) => {
              }})
            setTimeout(() => {
              resolve(res)
            }, 1000)
          }
        });
        return
        // 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) {
        console.log(url,'123123123');
        return
        // return new Promise((resolve, reject) => {
        //  let a =
        // })
      },

setTimeout

setTimeout(function() {
  // 这里放置您希望在延迟之后执行的代码
}, 10); // 10 毫秒的延迟

setTimeout 函数用于创建一个定时器，该定时器将在 10 毫秒后执行函数内的代码块。

background: linear-gradient();

background: linear-gradient(to bottom, #FFFFFF, #EDFEF6);

这段 CSS 代码用于创建一个线性渐变背景，从顶部到底部，由白色渐变到 #EDFEF6 这个颜色。让我解释一下这个代码的含义：

background：这是 CSS 属性，用于设置元素的背景样式。

linear-gradient：这是背景属性的值，表示要创建一个线性渐变背景。

to bottom：这是线性渐变的方向，表示颜色从上到下渐变。您还可以使用其他方向，例如 to top（从下到上）、to left（从右到左）等。

#FFFFFF 和 #EDFEF6：这是渐变的起始颜色和结束颜色。在这个例子中，渐变从白色 (#FFFFFF) 开始，到 #EDFEF6 结束。

这段代码的效果是将元素的背景设置为一个从顶部到底部的渐变，颜色逐渐从白色变为 #EDFEF6，这可以用来创建视觉上的渐变效果，使元素的背景看起来更丰富和吸引人。您可以根据需要调整颜色和渐变方向来满足您的设计要求。

split剪切自己想要的数据

下方只是一个简单的示例，在确保自己拿到数据的情况下循环数据中的某个自己想要修改的字段进行修改，切的时候可以是空格逗号也可以是某个字母

for (let i = 0; i < res.data.data.length; i++) {
res.data.data[i].end_time = res.data.data[i].end_time.split(' ')[0]
}

uniapp input

这样可以打印到自己的数值

<input type="text" v-model="inputValue" class="" style="width: 70%;margin-top: 40rpx;" @input="name" placeholder="请输入">
inputValue: '',
name(s) {
                console.log(s.detail.value);
            },

uniapp选项卡功能

使用uview组件来进行演示：

<template>
  <view>
    <u-tabs
      :list="list4"
      :activeIndex="activeIndex"
      @change="tabChange"
      lineWidth="30"
      lineColor="#f56c6c"
      :activeStyle="{
        color: '#303133',
        fontWeight: 'bold',
        transform: 'scale(1.05)'
      }"
      :inactiveStyle="{
        color: '#606266',
        transform: 'scale(1)'
      }"
      itemStyle="height: 60px;background-color:#ffffff;width:30%"
    ></u-tabs>
  </view>
</template>
<script>
export default {
  data() {
    return {
      list4: [
        { label: '选项卡1', value: 'tab1' },
        { label: '选项卡2', value: 'tab2' },
        { label: '选项卡3', value: 'tab3' },
      ],
      activeIndex: 0, // 当前激活的选项卡索引
    };
  },
  methods: {
    tabChange(index) {
      // 当选项卡切换时触发该方法，更新激活的选项卡索引
      this.activeIndex = index;
    },
  },
};
</script>

具体怎么使用还要看使用者

uniapp轻提示

uni.showToast({
              title: `图片上传成功`,
              icon: 'none',
              duration: 2000,
              success: () => {
              },
              fail: (error) => {
              }})

uni.showToast 是 UniApp 中用于显示轻量级提示消息的方法。

title 属性用于设置提示消息的内容，这里设置为 '图片上传成功'。

icon 属性用于设置提示消息的图标，这里设置为 'none' 表示不显示图标，如果需要显示图标，可以设置为 'success'、'loading' 等。

duration 属性用于设置提示消息的显示时间（以毫秒为单位），这里设置为 2000 表示消息将在 2 秒后自动消失。

success 和 fail 属性是回调函数，在成功或失败时执行相应的操作。在这个示例中，它们为空函数，没有特定的操作。

这段代码的目的是在图片上传成功后，显示一个包含 '图片上传成功' 文字的提示消息，该消息不包含图标，并在 2 秒后自动消失。

uniapp从当前页面切换到指定标签页

不带有返回标记的标签

uni.switchTab({
                         url:'/pages/页面/页面',
                         success: (res) => {
                          let page = getCurrentPages().pop();
                          if (page == undefined || page == null) return;
                          page.onLoad();
                         }
                      })

uni.switchTab 是 UniApp 中用于切换标签页的方法。

url 属性用于指定要切换到的标签页的页面路径，这里设置为 '/pages/ji_fen_shang_cheng/ji_fen_shang_cheng'，表示要切换到名为 'ji_fen_shang_cheng' 的标签页。

success 属性是一个回调函数，当切换成功时执行。在这个示例中，它的操作是重新加载当前页面，以确保在返回到当前页面时数据得到更新。

非常感谢观看

知识大杂烩(uniapp)