uni-app快速上手

1
┌─uniCloud              云空间目录，支付宝小程序云为uniCloud-alipay，阿里云为uniCloud-aliyun，腾讯云为uniCloud-tcb
2
│─components            符合vue组件规范的uni-app组件目录
3
│  └─comp-a.vue         可复用的a组件
4
├─utssdk                存放uts文件（已废弃）
5
├─pages                 业务页面文件存放的目录
6
│  ├─index
7
│  │  └─index.vue       index页面
8
│  └─list
9
│     └─list.vue        list页面
10
├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源都应存放于此目录
11
├─uni_modules           存放uni_module
12
├─platforms             存放各平台专用页面的目录
13
├─nativeplugins         App原生语言插件
14
├─nativeResources       App端原生资源目录
15
│  ├─android            Android原生资源目录
16
|  └─ios                iOS原生资源目录
17
├─hybrid                App端存放本地html文件的目录
18
├─wxcomponents          存放微信小程序、QQ小程序组件的目录
19
├─mycomponents          存放支付宝小程序组件的目录
20
├─swancomponents        存放百度小程序组件的目录
21
├─ttcomponents          存放抖音小程序、飞书小程序组件的目录
22
├─kscomponents          存放快手小程序组件的目录
23
├─jdcomponents          存放京东小程序组件的目录
24
├─unpackage             非工程代码，一般存放运行或发行的编译结果
25
├─main.js               Vue初始化入口文件
26
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
27
├─pages.json            配置页面路由、导航条、选项卡等页面类信息
28
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
29
├─AndroidManifest.xml   Android原生应用清单文件
30
├─Info.plist            iOS原生应用配置文件
31
└─uni.scss              内置的常用样式变量

1
<!-- 负责定义组件的 HTML 结构 和 UI 模板 -->
2
<template>
3

4
</template>
5

6
<!-- 定义组件的 逻辑和数据 -->
7
<script setup>
8

9
</script>
10

11
<!-- 定义组件的 样式 -->
12
<style lang="scss">
13

14
</style>

1
<template>
2
  <view>
3
    <scroll-view scroll-x>
4
      <view class="box" style=" background-color: #f00;">1</view>
5
      <view class="box" style=" background-color: #0f0;">2</view>
6
      <view class="box" style=" background-color: #00f;">3</view>
7
      <view class="box" style=" background-color: #f0f;">4</view>
8
      <view class="box" style=" background-color: #ff0;">5</view>
9
      <view class="box" style=" background-color: #f00;">6</view>
10
      <view class="box" style=" background-color: #0f0;">7</view>
11
      <view class="box" style=" background-color: #00f;">8</view>
12
      <view class="box" style=" background-color: #f0f;">9</view>
13
      <view class="box" style=" background-color: #ff0;">10</view>
14
    </scroll-view>
15
  </view>
16
</template>
17

18
<style>
19
  scroll-view {
20
    width: 300px;
21
    height: 50px;
22
        /* 确保内容不换行 */
23
    white-space: nowrap;
24

25
    .box {
26
            /* 使得这些元素以行内块的形式显示 */
27
      display: inline-block;
28
    }
29
  }
30
</style>

1
<template>
2
  <view>
3
    <swiper indicator-dots="" autoplay="" interval="3000">
4
      <swiper-item>
5
        <image src="../../../static/p1.jpg" mode="aspectFit"></image>
6
      </swiper-item>
7
      <swiper-item>
8
        <image src="../../../static/p2.jpg" mode="aspectFit"></image>
9
      </swiper-item>
10
      <swiper-item>
11
        <image src="../../../static/p3.jpg" mode="aspectFit"></image>
12
      </swiper-item>
13
      <swiper-item>
14
        <image src="../../../static/p4.jpg" mode="aspectFit"></image>
15
      </swiper-item>
16
    </swiper>
17
  </view>
18
</template>

1
<template>
2
  <view>
3
    <div>Checked names: {{ checkedNames }}</div>
4

5
    <checkbox-group @change="onChange">
6
      <checkbox value="Jack" /><text> Jack </text>
7
      <checkbox value="Mike" /><text> Mike </text>
8
      <checkbox value="John" /><text> John </text>
9
    </checkbox-group>
10
  </view>
11
</template>
12

13
<script setup>
14
  import {ref} from "vue"
15

16
  const checkedNames = ref([])
17

18
  const onChange = (e) => {
19
    checkedNames.value = e.detail.value;
20
  }
21
</script>

1
<template>
2
  <view>
3
    {{name}}
4
  </view>
5
</template>
6

7
<script setup>
8
const name = "张三"
9
</script>
10

11
<style>
12

13
</style>

1
<div v-bind:id="dynamicId"></div>

1
<div :id="dynamicId"></div>

1
<template>
2
  <view>
3
    <image :src = "url"></image>
4
  </view>
5
</template>
6
<script setup>
7
  let url = "https://img.yzcdn.cn/vant/cat.jpeg"
8
</script>

1
<template>
2
  <view>
3
    <text>{{name}}今年 {{age}} 岁了</text>
4
    <text>\n{{user.name}}今年 {{user.age}} 岁了</text>
5
  </view>
6
</template>
7

8
<script setup>
9
  import {
10
    ref
11
  } from "vue"
12

13
  const name = "张三"
14
  const age = ref(18)
15

16
  let user = ref({
17
    name: "李四",
18
    age: 20
19
  })
20

21
  setInterval(() => {
22
    age.value++
23
    user.value.age += 10
24
  }, 1000)
25
</script>
26

27
<style>
28

29
</style>

1
const isActive = ref(true)
2
const hasError = ref(false)

1
<div
2
  class="static"
3
  :class="{ active: isActive, 'text-danger': hasError }"
4
></div>

1
<div class="static active"></div>

1
<script>
2
    const activeColor = ref('red')
3
    const fontSize = ref(30)
4
</script>
5

6
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

1
<div :style="{ 'font-size': fontSize + 'px' }"></div>

1
<script>
2
    const styleObject = reactive({
3
      color: 'red',
4
      fontSize: '30px'
5
    })
6
</script>
7

8
<div :style="styleObject"></div>

1
<template>
2
  <view>
3
    <switch @change="isChange"/>
4
    <button type=" primary" :loading="isLoading" :disabled="isLoading"> 按钮 </button>
5
  </view>
6
</template>
7

8
<script setup>
9
  import {
10
    ref
11
  } from "vue"
12

13
  const isLoading = ref(false)
14

15
  function isChange(e) {
16
    isLoading.value = e.detail.value
17
  }
18
</script>

1
<div v-if="type === 'A'">
2
  A
3
</div>
4
<div v-else-if="type === 'B'">
5
  B
6
</div>
7
<div v-else-if="type === 'C'">
8
  C
9
</div>
10
<div v-else>
11
  Not A/B/C
12
</div>

1
<template v-if="ok">
2
  <h1>Title</h1>
3
  <p>Paragraph 1</p>
4
  <p>Paragraph 2</p>
5
</template>

1
<h1 v-show="ok">Hello!</h1>

1
<template>
2
  <view class="">
3
    <text v-for="(item, index) in peoples" :key="item.id">
4
      {{ item.id }}: {{ item.name }} 今年 {{ item.age }} \n
5
    </text>
6
  </view>
7
</template>
8

9
<script setup>
10
  import {
11
    ref
12
  } from "vue";
13

14
  const peoples = ref([{
15
      id: 1,
16
      name: "张三",
17
      age: 18
18
    },
19
    {
20
      id: 2,
21
      name: "李四",
22
      age: 20
23
    },
24
    {
25
      id: 3,
26
      name: "王五",
27
      age: 22
28
    }
29
  ])
30
</script>
31

32
<style lang="scss" scoped>
33

34
</style>

1
<input
2
  :value="text"
3
  @input="event => text = event.target.value">

1
<input v-model="text">

1
<template>
2
    <div>Checked names: {{ checkedNames }}</div>
3

4
    <input type="checkbox" id="jack" value="Jack" v-model="checkedNames" />
5
    <label for="jack">Jack</label>
6

7
    <input type="checkbox" id="john" value="John" v-model="checkedNames" />
8
    <label for="john">John</label>
9

10
    <input type="checkbox" id="mike" value="Mike" v-model="checkedNames" />
11
    <label for="mike">Mike</label>
12
</template>
13

14
<script>
15
    const checkedNames = ref([])
16
</script>

1
<template>
2
    <p>Has published books:</p>
3
    <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
4
</template>
5

6
<script>
7
    const author = reactive({
8
      name: 'John Doe',
9
      books: [
10
        'Vue 2 - Advanced Guide',
11
        'Vue 3 - Basic Guide',
12
        'Vue 4 - The Mystery'
13
      ]
14
    })
15
</script>

1
<script setup>
2
import { reactive, computed } from 'vue'
3

4
const author = reactive({
5
  name: 'John Doe',
6
  books: [
7
    'Vue 2 - Advanced Guide',
8
    'Vue 3 - Basic Guide',
9
    'Vue 4 - The Mystery'
10
  ]
11
})
12

13
// 一个计算属性 ref
14
const publishedBooksMessage = computed(() => {
15
  return author.books.length > 0 ? 'Yes' : 'No'
16
})
17
</script>
18

19
<template>
20
  <p>Has published books:</p>
21
  <span>{{ publishedBooksMessage }}</span>
22
</template>

1
const x = ref(0)
2
const y = ref(0)
3

4
// 单个 ref
5
watch(x, (newX) => {
6
  console.log(`x is ${newX}`)
7
})
8

9
// getter 函数
10
watch(
11
  () => x.value + y.value,
12
  (sum) => {
13
    console.log(`sum of x + y is: ${sum}`)
14
  }
15
)
16

17
// 多个来源组成的数组
18
watch([x, () => y.value], ([newX, newY]) => {
19
  console.log(`x is ${newX} and y is ${newY}`)
20
})

1
const obj = reactive({ count: 0 })
2

3
watch(obj, (newValue, oldValue) => {
4
  // 在嵌套的属性变更时触发
5
  // 注意：`newValue` 此处和 `oldValue` 是相等的
6
  // 因为它们是同一个对象！
7
})
8

9
obj.count++

1
watch(
2
  () => state.someObject,
3
  (newValue, oldValue) => {
4
    // 注意：`newValue` 此处和 `oldValue` 是相等的
5
    // *除非* state.someObject 被整个替换了
6
  },
7
  { deep: true }
8
)

1
  │─components              符合vue组件规范的uni-app组件目录
2
  │  └─componentA           符合‘components/组件名称/组件名称.vue’目录结构，easycom方式可直接使用组件
3
  │      └─componentA.vue    可复用的componentA组件
4
  │  └─component-a.vue      可复用的component-a组件

1
  import App from './App'
2
  import {createSSRApp} from 'vue'
3
  //引入组件
4
  import myComponent from './components/my-component/my-component.vue'
5
  export function createApp() {
6
    const app = createSSRApp(App)
7
    //调用app.component方法全局注册组件
8
    app.component('my-component', myComponent)
9
    return {
10
      app
11
    }
12
  }

1
  <template>
2
    <view>
3
      <my-component></my-component>
4
    </view>
5
  </template>

1
  <!-- 在index.vue引入 uni-badge 组件-->
2
  <template>
3
    <view>
4
      <uni-badge text="1"></uni-badge><!-- 3.使用组件 -->
5
    </view>
6
  </template>
7
  <script>
8
    import uniBadge from '@/components/uni-badge/uni-badge.vue';//1.导入组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
9
    export default {
10
      components:{uniBadge }//2.注册组件（这步属于传统vue规范，但在uni-app的easycom下可以省略这步）
11
    }
12
  </script>

1
  <!-- 在index.vue引入 uni-badge 组件-->
2
  <template>
3
    <view>
4
      <uni-badge text="1"></uni-badge><!-- 3.使用组件 -->
5
    </view>
6
  </template>
7
  <script>
8
    // 这里不用import引入，也不需要在components内注册uni-badge组件。template里就可以直接用
9
    export default {
10
      data() {
11
        return {
12
        }
13
      }
14
    }
15
  </script>

1
<template>
2
  <view class="user-info">
3
    <image :src="user.avatar" mode="aspectFill"></image>
4
    <text> 用户名：{{user.name}} </text>
5
  </view>
6
</template>
7

8
<script setup>
9
  defineProps({
10
    user: {
11
      type: Object,
12
      default () {
13
        return {
14
          name: "游客",
15
          avatar: "../../../static/avatar.jpg"
16
        }
17
      }
18
    }
19

20
  });
21
</script>
22

23
<style lang="scss" scoped>
24
  .user-info {
25
    display: flex;
26
    align-items: center;
27
    flex-direction: column;
28
    padding: 10px;
29
    background-color: #eee;
30
    border-bottom: 1px solid #f0f0f0;
31
    margin: 10px;
32
  }
33

34
  .user-info image {
35
    width: 100px;
36
    height: 100px;
37
    margin: 10px 0;
38

39
    border-radius: 50%;
40
  }
41

42
  .user-info text {
43
    font-size: 16px;
44
  }
45
</style>

1
  <todo-button>
2
    Add todo
3
  </todo-button>

1
  <!-- todo-button 组件模板 -->
2
  <button class="btn-primary">
3
    <slot></slot>
4
  </button>

1
  <!-- 渲染 HTML -->
2
  <button class="btn-primary">
3
    Add todo
4
  </button>

1
  <button type="submit">
2
    <slot>Submit</slot>
3
  </button>

1
    <button type="submit">
2
        Submit
3
    </button>

1
  <submit-button>
2
    Save
3
  </submit-button>

1
  <button type="submit">
2
    Save
3
  </button>

1
<view class="container">
2
  <header>
3
    <slot name="header"></slot>
4
  </header>
5
  <main>
6
    <slot></slot>
7
  </main>
8
  <footer>
9
    <slot name="footer"></slot>
10
  </footer>
11
</view>

1
<template>
2
  <view>
3
  <!-- 父组件使用子组件`<base-layout>`，节点上使用v-slot特性： -->
4
    <base-layout>
5
      <template v-slot:header>
6
        <view>Here might be a page title</view>
7
      </template>
8
      <template v-slot:default>
9
        <view>A paragraph for the main content.</view>
10
        <view>And another one.</view>
11
      </template>
12
      <template v-slot:footer>
13
        <view>Here's some contact info</view>
14
      </template>
15
    </base-layout>
16
  </view>
17
</template>

1
<base-layout>
2
  <template #header>
3
    <view>Here might be a page title</view>
4
  </template>
5

6
  <template #default>
7
    <view>A paragraph for the main content.</view>
8
    <view>And another one.</view>
9
  </template>
10

11
  <template #footer>
12
    <view>Here's some contact info</view>
13
  </template>
14
</base-layout>

1
<template>
2
  <button @click="handleClick">点击我</button>
3
</template>
4

5
<script setup>
6
const emit = defineEmits(['customEvent']); // 定义事件
7

8
const handleClick = () => {
9
  emit('customEvent', 'Hello from child!'); // 触发事件，并传递数据
10
};
11
</script>

1
<template>
2
  <ChildComponent @customEvent="handleEvent" />
3
</template>
4

5
<script setup>
6
import ChildComponent from './ChildComponent.vue';
7

8
const handleEvent = (message) => {
9
  console.log('父组件接收到消息:', message);
10
};
11
</script>

1
<template>
2
  <button @click="increment">点击增加</button>
3
</template>
4

5
<script setup>
6
import { ref } from 'vue';
7

8
const count = ref(0);
9

10
const increment = () => {
11
  count.value++;
12
};
13

14
// 显式暴露 count 和 increment 给父组件
15
defineExpose({
16
  count,
17
  increment,
18
});
19
</script>

1
<template>
2
  <ChildComponent ref="childRef" />
3
  <button @click="logCount">获取子组件计数</button>
4
</template>
5

6
<script setup>
7
import { ref } from 'vue';
8
import ChildComponent from './ChildComponent.vue';
9

10
const childRef = ref(null);
11

12
const logCount = () => {
13
  console.log('子组件计数值:', childRef.value.count); // 访问子组件的 count
14
  childRef.value.increment(); // 调用子组件的方法
15
};
16
</script>

1
<template>
2
  <div>
3
    <p>计数：{{ count }}</p>
4
    <button @click="increment">增加</button>
5
  </div>
6
</template>
7

8
<script setup>
9
import { ref, onMounted, onUpdated, onUnmounted } from 'vue';
10

11
const count = ref(0);
12

13
const increment = () => {
14
  count.value++;
15
};
16

17
// 在组件挂载时执行
18
onMounted(() => {
19
  console.log('组件已挂载');
20
});
21

22
// 在组件更新时执行
23
onUpdated(() => {
24
  console.log('组件已更新，当前计数：', count.value);
25
});
26

27
// 在组件销毁时执行
28
onUnmounted(() => {
29
  console.log('组件已销毁');
30
});
31
</script>

1
─common
2
  └─css    存储css文件
3
  └─scss    存储scss文件
4
  └─js      存储js文件

1
<style lang="scss">
2
@import  "@/common/css/my.css";
3
</style>

1
@import "@/common/scss/my.scss";

1
<template>
2
    <view class="">
3
    <button @click="onClick()">弹出提示框</button>
4
    </view>
5
</template>
6

7
<script setup>
8
  function onClick() {
9
    uni.showToast({
10
      title: 'Hello World',
11
      icon: 'success'
12
    })
13
  }
14
</script>

1
<template>
2
  <view class="">
3
    <button @click="onClick()">弹出提示框</button>
4
  </view>
5
</template>
6

7
<script setup>
8
  function onClick() {
9
    uni.showLoading({
10
      title: '加载中'
11
    })
12
  }
13
</script>

1
<template>
2
  <view class="">
3
    <button @click="onClick()">弹出提示框</button>
4
  </view>
5
</template>
6

7
<script setup>
8
  function onClick() {
9
    uni.showModal({
10
      title: '提示',
11
      content: '这是一个模态弹窗',
12
      showCancel: true,
13
      cancelText: '取消',
14
      confirmText: '确定',
15
      success: function(res) {
16
        if (res.confirm) {
17
          console.log('用户点击确定');
18
        } else if (res.cancel) {
19
          console.log('用户点击取消');
20
        }
21
      }
22
    })
23
  }
24
</script>

1
<template>
2
  <view class="">
3
    <button @click="onClick()">弹出提示框</button>
4
    <text>您选择了：{{selected}}</text>
5
  </view>
6
</template>
7

8
<script setup>
9
  let list = ["学士", "硕士", "博士"]
10
  let selected = ref("")
11
  function onClick() {
12
    uni.showActionSheet({
13
      itemList: list,
14
      success: function(res) {
15
        console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
16
        console.log(list[res.tapIndex]);
17
        selected.value = list[res.tapIndex]
18
      }
19
    });
20
  }
21
</script>

1
uni.setNavigationBarTitle({
2
  title: '新的标题'
3
});

1
uni.setTabBarBadge({
2
  index: 0,
3
  text: '1'
4
})