当前位置：首页 > uni-app

uniapp学习代码

2026-02-06 01:04:45uni-app

uniapp基础项目结构

uniapp项目通常包含以下核心目录和文件：

pages：存放页面文件，每个页面是一个文件夹
static：存放静态资源如图片
App.vue：应用入口文件
main.js：应用主逻辑文件
manifest.json：应用配置信息
pages.json：页面路由配置

创建简单页面示例

在pages/index目录下创建index.vue：

<template>
  <view class="container">
    <text>{{ message }}</text>
    <button @click="changeMessage">点击修改</button>
  </view>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello uniapp'
    }
  },
  methods: {
    changeMessage() {
      this.message = '内容已更新'
    }
  }
}
</script>

<style>
.container {
  padding: 20px;
}
button {
  margin-top: 10px;
}
</style>

常用API调用示例

调用设备功能如获取位置：

uni.getLocation({
  type: 'wgs84',
  success: function (res) {
    console.log('当前位置：', res.latitude, res.longitude)
  }
})

发起网络请求：

uniapp学习代码

uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: (res) => {
    console.log('请求结果：', res.data)
  }
})

跨平台条件编译

针对不同平台编写特定代码：

// #ifdef H5
console.log('这段代码只在H5平台执行')
// #endif

// #ifdef MP-WEIXIN
console.log('这段代码只在微信小程序执行')
// #endif

组件使用示例

使用uniapp提供的UI组件：

uniapp学习代码

<template>
  <view>
    <swiper :indicator-dots="true">
      <swiper-item v-for="(item, index) in images" :key="index">
        <image :src="item" mode="aspectFill"></image>
      </swiper-item>
    </swiper>
  </view>
</template>

<script>
export default {
  data() {
    return {
      images: [
        '/static/1.jpg',
        '/static/2.jpg',
        '/static/3.jpg'
      ]
    }
  }
}
</script>

路由跳转方法

页面间导航示例：

// 保留当前页面跳转
uni.navigateTo({
  url: '/pages/detail/detail?id=1'
})

// 关闭当前页面跳转
uni.redirectTo({
  url: '/pages/login/login'
})

// 返回上一页
uni.navigateBack()

状态管理示例

使用Vuex进行状态管理：

// store/index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++
    }
  }
})

在组件中使用：

<script>
import { mapState, mapMutations } from 'vuex'

export default {
  computed: {
    ...mapState(['count'])
  },
  methods: {
    ...mapMutations(['increment'])
  }
}
</script>