uni-app（优医咨询）项目实战 - 第1天

# vue-cli 创建 uni-app 项目
vue create -p dcloudio/uni-preset-vue my-project

# 下载 git 仓库中的项目模板
npx degit dcloudio/uni-preset-vue#vite my-vue3-project

{
  "printWidth": 80,
  "tabWidth": 2,
  "useTabs": false,
  "semi": false,
  "singleQuote": true,
  "vueIndentScriptAndStyle": true,
}

/* uni.scss */
/* 在原有 sass 变量基础上添加新的变量 */

/* 统一项目背景颜色 */
$uni-bg-color: #f6f6f6;

/* 文字溢出 */
$line: 2;
@mixin text-overflow($line) {
  display: -webkit-box;
  -webkit-line-clamp: $line;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
}

<script>
  // 相当于小程序的 app.js
  export default {
    onLaunch: function () {
      console.log('App Launch')
    },
    onShow: function () {
      console.log('App Show')
    },
    onHide: function () {
      console.log('App Hide')
    },
  }
</script>

<!-- 组件模板需要被省略 -->
<template></template>
<!-- 组件模板需要被省略 -->

<style lang="scss">
  /* 相当于 app.wxss */
  page {
    background-color: $uni-bg-color;
  }
</style>

{
    "pages": [
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "学习uni-app"
            }
        }
    ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "uniIdRouter": {}
}

{
  "pages": [
    {
      "path": "pages/index/index",
      "style": {
        "navigationBarTitleText": "学习uni-app",
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/wiki/index",
      "style": {
        "navigationBarTitleText": "健康百科",
        "enablePullDownRefresh": false
      }
    },
    {
      "path": "pages/my/index",
      "style": {
        "navigationBarTitleText": "消息通知",
        "enablePullDownRefresh": false
      }
    },
    {
      "path": "pages/notify/index",
      "style": {
        "navigationBarTitleText": "我的",
        "enablePullDownRefresh": false
      }
    }
  ],
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    },
    "uniIdRouter": {}
}

{
    "pages": [],
    "globalStyle": {},
  "tabBar": {
    "color": "#6F6F6F",
    "selectedColor": "#6F6F6F",
    "borderStyle": "white",
    "list": [{
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "static/tabbar/home-default.png",
        "selectedIconPath": "static/tabbar/home-active.png"
      },
      {
        "text": "健康百科",
        "pagePath": "pages/wiki/index",
        "iconPath": "static/tabbar/wiki-default.png",
        "selectedIconPath": "static/tabbar/wiki-active.png"
      },
      {
        "text": "消息通知",
        "pagePath": "pages/notify/index",
        "iconPath": "static/tabbar/notify-default.png",
        "selectedIconPath": "static/tabbar/notify-active.png"
      },
      {
        "text": "我的",
        "pagePath": "pages/my/index",
        "iconPath": "static/tabbar/my-default.png",
        "selectedIconPath": "static/tabbar/my-active.png"
      }
    ]
  },
    "uniIdRouter": {}
}

{
    "pages": [],
    "globalStyle": {},
  "tabBar": {},
  "subPackages": [{
    "root": "subpkg_consult",
    "pages": [{
      "path": "room/index",
      "style": {
        "navigationBarTitleText": "问诊室"
      }
    }]
  }],
    "uniIdRouter": {}
}

<view class="message">hello uni-app!</view>
<image src="" mode="" />
<swiper autoplay>
  <swiper-item>
    <image src="" />
  </swiper-item>
  <swiper-item>
    <image src="" />
  </swiper-item>
<swiper>

<script setup>
  import { onLoad } from '@dcloudio/uni-app'

  // 页面加载后获取接口数据
  onLoad(() => {
    // 原来的 wx.request 换成 uni.request
    uni.request({
      url: '',
      success(result) {
        console.log(result)
      }
    })
  })
</script>

// 回调方式，不返回 Promise
uni.request({
  url: 'https://your.api.com/xxx',
  success: (result) => {
    console.log(result)
  }
})

// 如果在调用 API 时传入了 success fail complete 那么不会返回 Promise

// Promise 方式
const result = uni.request({
  url: 'https://your.api.com/xxx'
})
// Promise 对象
console.log(result)

<script setup>
  // #ifdef H5
  console.log('这段代码只在 H5 端才会运行')
  // #endif
</script>
<template>
  <!-- #ifdef H5 -->
  <view class="iconfont icon-search"></view>
  <!-- #endif -->

  <!-- #ifndef H5 -->
  <view class="iconfont icon-scan"></view>
  <!-- #endif -->
</template>
<style lang="scss" scoped>
  .iconfont {
    color: #666;
    font-size: 30rpx;
    /* #ifdef H5 */
    font-size: 28rpx;
    /* #endif */
  }
</style>

<view class="index-page">  

  <!-- 自定义导航 -->
  <view class="page-navbar">优医</view>
    <!-- 搜索栏 -->
  <view class="search-bar">
    <input
      placeholder-class="input-placeholder"
      placeholder="搜一搜: 疾病/症状/医生/健康知识"
      class="input"
      type="text"
    />
    <view class="icon-search">
      <uni-icons size="22" color="#C3C3C5" type="search" />
    </view>
  </view>
</view>

.index-page {
  min-height: 400rpx;
  background-size: contain;
  background-image: url(https://consult-patient.oss-cn-hangzhou.aliyuncs.com/static/images/index-page-header-bg.png);
  background-repeat: no-repeat;
}

.page-navbar {
  height: 88rpx;
  line-height: 88rpx;
  padding: 0 30rpx;
  font-size: 34rpx;
  color: #fff;
}

.search-bar {
  height: 80rpx;
  padding: 0 30rpx;
  margin-top: 10rpx;
  position: relative;

  .input {
    height: 100%;
    padding-left: 80rpx;
    padding-right: 40rpx;
    border-radius: 80rpx;
    background-color: #fff;
    font-size: 26rpx;
    color: #3c3e42;
    box-shadow: 0px 10rpx 22rpx rgba(0, 0, 0, 0.1);
  }

  .input-placeholder {
    color: #979797;
  }

  .icon-search {
    position: absolute;
    top: 50%;
    transform: translate(24rpx, -50%);
    margin-top: 2rpx;
  }
}