UniApp 开发小程序知识总结与面试题

├── src/│   ├── App.vue          # 根组件│   ├── main.ts          # 入口文件│   ├── pages.json       # 页面路由配置│   ├── manifest.json    # 应用配置│   ├── pages/           # 页面目录│   │   ├── index/│   │   │   └── index.vue│   └── components/      # 组件目录├── package.json└── vite.config.ts       # Vite 配置

export default {  onLaunch() {    // 应用启动时触发  },  onShow() {    // 应用显示时触发  },  onHide() {    // 应用隐藏时触发  }}

export default {  onLoad(options) {    // 页面加载时触发  },  onShow() {    // 页面显示时触发  },  onReady() {    // 页面初次渲染完成  },  onHide() {    // 页面隐藏时触发  },  onUnload() {    // 页面卸载时触发  },  onPullDownRefresh() {    // 下拉刷新触发  },  onReachBottom() {    // 上拉触底触发  }}

// uni.request 封装const request = (options: UniApp.RequestOptions) => {  return new Promise((resolve, reject) => {    uni.request({      ...options,      success: (res) => resolve(res),      fail: (err) => reject(err)    })  })}// 使用示例const data = await request({  url: 'https://api.example.com/data',  method: 'GET'})

// 存储uni.setStorageSync('user', { name: 'test' })// 读取const user = uni.getStorageSync('user')// 删除uni.removeStorageSync('user')

// 显示 Toastuni.showToast({  title: '成功',  icon: 'success'})// 显示加载框uni.showLoading({  title: '加载中...'})// 显示模态框uni.showModal({  title: '提示',  content: '确定删除？',  success: (res) => {    if (res.confirm) {      // 用户点击确定    }  }})

<!-- components/MyComponent.vue --><template>  <view class="my-component">    <text>{{ title }}</text>    <button @click="handleClick">点击</button>  </view></template><script setup lang="ts">import { defineProps, defineEmits } from 'vue'const props = defineProps<{  title: string}>()const emit = defineEmits<{  (e: 'click', value: string): void}>()const handleClick = () => {  emit('click', 'hello')}</script>

<template>  <MyComponent title="标题" @click="onClick" /></template><script setup lang="ts">import MyComponent from '@/components/MyComponent.vue'const onClick = (value: string) => {  console.log(value)}</script>

// #ifdef H5console.log('H5 平台')// #endif// #ifndef MP-WEIXINconsole.log('非微信小程序')// #endif

<!-- #ifdef H5 --><view>H5 专属内容</view><!-- #endif -->

{  "pages": [    { "path": "pages/index/index" }  ],  "subpackages": [    {      "root": "pages/subpackage",      "pages": ["page1", "page2"]    }  ]}

// 简化的标签转换逻辑const tagMap = {  'view': 'view',  'text': 'text',  'image': 'image',  'button': 'button'}function transformTag(tag) {  return tagMap[tag] || 'view'}// 属性转换const attrMap = {  ':class': 'class',  ':style': 'style',  '@click': 'bindtap',  '@input': 'bindinput'}

// 不好的写法：多次调用this.setData({ list: newList1 })this.setData({ count: newCount })// 好的写法：合并调用this.setData({  list: newList1,  count: newCount})

<!-- 子组件 --><script setup lang="ts">const emit = defineEmits<{  (e: 'update:modelValue', value: string): void  (e: 'change', value: string): void}>()const handleInput = (e: Event) => {  const value = (e.target as HTMLInputElement).value  emit('update:modelValue', value)  emit('change', value)}</script>

<!-- 父组件 --><template>  <CustomInput v-model="inputValue" @change="onChange" /></template><script setup lang="ts">import { ref } from 'vue'import CustomInput from '@/components/CustomInput.vue'const inputValue = ref('')const onChange = (value: string) => {  console.log('值改变:', value)}</script>

// #ifdef MP-WEIXINuni.setNavigationBarColor({  frontColor: '#ffffff',  backgroundColor: '#007aff'})// #endif// #ifdef H5document.querySelector('title')!.textContent = '新标题'// #endif

export const setTitle = (title: string) => {  // #ifdef MP-WEIXIN  uni.setNavigationBarTitle({ title })  // #endif    // #ifdef H5  document.title = title  // #endif}

const shareData = {  title: '分享标题',  path: '/pages/index/index'}if (uni.share) {  uni.share(shareData)} else {  uni.showToast({ title: '当前平台不支持分享', icon: 'none' })}

// stores/user.tsimport { defineStore } from 'pinia'import { ref, computed } from 'vue'export const useUserStore = defineStore('user', () => {  const userInfo = ref(null)  const token = ref('')    const isLoggedIn = computed(() => !!token.value)    const login = (data: { user: any; token: string }) => {    userInfo.value = data.user    token.value = data.token    uni.setStorageSync('token', data.token)  }    const logout = () => {    userInfo.value = null    token.value = ''    uni.removeStorageSync('token')  }    return { userInfo, token, isLoggedIn, login, logout }})

<script setup lang="ts">import { useUserStore } from '@/stores/user'const userStore = useUserStore()const handleLogin = () => {  userStore.login({ user: { name: 'test' }, token: 'xxx' })}</script>

// App.vueonLaunch() {  // #ifdef MP-WEIXIN  wx.cloud.init({    env: 'your-env-id',    traceUser: true  })  // #endif}

// 获取数据库实例const db = wx.cloud.database()// 查询数据const queryData = async () => {  const res = await db.collection('users')    .where({ status: 1 })    .orderBy('createTime', 'desc')    .limit(10)    .get()  return res.data}// 添加数据const addData = async (data: any) => {  const res = await db.collection('users').add({ data })  return res._id}// 更新数据const updateData = async (id: string, data: any) => {  await db.collection('users').doc(id).update({ data })}

// 调用云函数const callCloudFunction = async (name: string, data?: any) => {  const res = await wx.cloud.callFunction({ name, data })  return res.result}// 使用示例const login = async () => {  const res = await callCloudFunction('login', { code: 'xxx' })  return res}

// 使用 performance APIconst start = performance.now()// 执行代码await fetchData()const end = performance.now()console.log('数据加载耗时:', end - start)// 监控内存const memoryInfo = wx.getMemoryInfo?.()if (memoryInfo) {  console.log('内存占用:', memoryInfo.usedJSHeapSize)}

// 1. 预加载关键数据onLaunch() {  // 提前加载用户信息  this.preloadUserInfo()}// 2. 骨架屏<template>  <view v-if="loading" class="skeleton">    <view class="skeleton-item"></view>    <view class="skeleton-item"></view>  </view>  <view v-else>    <!-- 真实内容 -->  </view></template>// 3. 异步加载import { defineAsyncComponent } from 'vue'const HeavyComponent = defineAsyncComponent(() =>   import('./HeavyComponent.vue'))

onLoad() {  // #ifdef MP-WEIXIN  wx.showShareMenu({    withShareTicket: true,    menus: ['shareAppMessage', 'shareTimeline']  })    wx.onShareAppMessage(() => ({    title: '分享标题',    path: '/pages/index/index',    imageUrl: '/static/share.png'  }))  // #endif}