12.29 uniapp

2503_92841156

1065人浏览 · 2025-12-29 14:43:03

2503_92841156 · 2025-12-29 14:43:03 发布

uniapp的特点

一次开发，多端应用
使用微信小程序的组件标签和API，使用vue的模板语法和js语法

创建新页面

小程序：在app.json中配置pages,即会在pages文件夹中创建相应的文件
uniapp: 在pages文件夹上右键，新建页面，会同步的在pages.json中自动生成对应的配置

pages.json中pages的配置相当于路由，所有页面都需要在此注册

tabBar的配置

在pages.json中配置

本地静态资源，比如图片，图标文件一定要放在static文件夹中，引用地址的方式参考下方代码

"tabBar": {
  "color": "#567788",
  "selectedColor": "#f96677",
  "list": [
    {
      "pagePath": "pages/index/index",
      "text": "首页",
      "iconPath": "/static/images/icon0.png",
      "selectedIconPath": "/static/images/icon1.png"
    },
    {
      "pagePath": "pages/category/category",
      "text": "分类",
      "iconPath": "/static/images/icon2.png",
      "selectedIconPath": "/static/images/icon3.png"
    }
  ]
}

页面导航栏标题文本，背景颜色，下拉刷新等相关配置

小程序：在app.json中全局配置，在每个页面的json文件中给当前页面配置

uniapp: 全局和每个页面的配置都在pages.json中实现

如何运行在微信开发者工具

运行-> 运行到小程序模拟器 -> 微信开发者工具
在弹窗中要定位开发者工具的安装路径：常规安装位置 c:/Program Files/Tencent/微信web开发者工具
在微信开发者工具管理项目的界面 -> 设置 -> 安全 -> 开启服务端口如果没有开启服务端口，在Hbuiler编译界面会报错：Error: read EBADF
在manifest.json中填写微信小程序的appid 如果没有填写，在微信开发者工具中会报错：TypeError: Cannot read property ‘forceUpdate’ of undefined

3）在微信开发者工具管理项目的界面

window版本

![[1280X1280 (65).PNG]]

点击设置

![[18905c30-ac42-4af2-bc2c-f8469c5d852c.png]]

mac版本

![[95bfa254-ed37-485b-b51e-cd2096dfcf73.png]]

![[0be8f4c7-d52d-440b-96db-0fbde5a096e2.png]]

使用vuex状态管理工具

和vue唯一的不同是不需要安装vuex包

创建store文件夹，和index.js，及相关的state,actions,mutations…

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    city: '郑州'
  },
  actions: {
    getData(ctx,city){
      setTimeout(()=>{
        let newCity = city
        ctx.commit("changeData",newCity)
      },5000)
    }
  },
  mutations: {
    changeData(state,data){
      state.city = data;
    }
  }
})

在main.js中引入store并注册
在页面中使用时和vue相同

在项目中使用sass

在 *.vue文件中添加lang=“scss”

<style lang="scss">
</style>

如果没有安装sass,在编译时会报错（此时HBuilder会自动安装sass预编译器）
项目初始化时创建的uni.scss文件不用导入，定义的变量可直接在任一页面中使用
在App.vue的style中可以设置每个页面公共css
引入scss和css文件的语法

<style lang="scss">
  @import  "./var.scss";
  @import "./header.css";
</style>

注意：不要写成 @import url()

条件编译

条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

template, script,style都可以添加条件编译

// #ifdef H5
alert("只有h5平台才有alert方法")
// #endif

判断平台
编译期判断编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码。

在 *.vue文件中，template,script,style中都可以添加条件编译，注意在不同区块中注释的写法是不同的

<!-- #ifdef H5 -->
<view>当前城市： {{$store.state.city}}</view>
<!-- #endif  -->
<!-- #ifdef MP-WEIXIN -->
<view>当前温度： 18度</view>
<!-- #endif  -->
<!-- #ifdef APP-PLUS -->
<view>当前温度： 18度</view>
<!-- #endif  -->

<template>
  <view class="content">
    <!-- #ifdef H5 -->
    <view class="box1">
      H5---{{title}}
    </view>
    <!-- #endif -->

    <!-- #ifdef MP-WEIXIN -->
    <view class="box1">
      微信小程序--{{title}}
    </view>
    <!-- #endif -->

  </view>
</template>
<script>
  export default {
    data() {
      return {
        // #ifdef H5
        title: 'Hello-h5',
        // #endif

        // #ifdef MP-WEIXIN
        title: 'Hello-mp',
        // #endif
      }
    },
    onLoad() {
    },
    methods: {
    }
  }
</script>
<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .box1 {
    font-size: 60rpx;
    /* #ifdef H5 */
    border: 2rpx solid #f00;
    /*#endif */
    /* #ifdef MP-WEIXIN */
    border: 2rpx solid #458833;
    /*#endif */
    width: 700rpx;
    height: 200rpx;
  }
  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }
  .text-area {
    display: flex;
    justify-content: center;
  }
  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>

运行期判断运行期判断是指代码已经打入包中，仍然需要在运行期判断平台

只能区别机型（ios,Android）

switch(uni.getSystemInfoSync().platform){
  case 'android':
    console.log('运行Android上')
    break;
  case 'ios':
    console.log('运行iOS上')
    break;
  default:
    console.log('运行在开发者工具上')
    break;
}

CSS变量

–status-bar-height 系统状态栏高度
–window-top 内容区域距离顶部的距离
–window-bottom 内容区域距离底部的距离

比如：自定义导航栏时，要空出状态栏的位置，可添加一个空的view进行占位

<view>
  <view class="header"></view>
  <view>list文本内容</view>
</view>
<style>
  .header {
    height: var(--status-bar-height);
    width: 100%;
    border: 1px solid #007AFF ;
  }
</style>

解决：uniapp状态栏高度和刘海屏适配问题

<template>
    <view class="head" :style="{paddingTop:statusBarHeight+'px'}"></view>
</template>
<script>
export default {
    data() {
        return {
                statusBarHeight: 0
        }
    },
    onLoad() {
        let statusBarObj = this.getPhoneInfo()
        this.statusBarHeight = statusBarObj.statusBarHeight
    },
    methods: {
        getPhoneInfo() {
            const phoneInfo = uni.getSystemInfoSync(); // 获取手机系统信息
            console.log(phoneInfo);
            let statusBarObj = {
                    statusBarHeight: 0
            }
            if(phoneInfo.hostName == "WeChat"){
                    // 微信
                    // 设置状态栏高度（H5顶部无状态栏小程序有状态栏需要撑起高度）
                    statusBarObj.statusBarHeight = phoneInfo.statusBarHeight + 40;
            }else{
                    statusBarObj.statusBarHeight = phoneInfo.statusBarHeight;
            }
            return statusBarObj;
        }
    }
}
</script>

css单位

rpx

在模板中vue和小程序的区别

动态属性

//数据 url="/images/1.jpg"
//uniapp中的vue
<image :src="'http://m.mi.com' + url"></image>
<image :src="http://m.mi.com${url}"></image>
//小程序: 动态属性绝对不加: ,""内部为字符串，需要绑定数据时加{{}}
<image src="http://m.mi.com{{url}}"></image>

标签内容显示相同

//数据：msg="hello"
<view>{{msg}}</view>

循环遍历

// vue
<view v-for="(item,index) in list"></view>
//小程序
<view wx:for="{{list}}"></view>

条件渲染

// vue
<view v-if="true"></view>
//小程序
<view wx:if="{{true}}"></view>

用navigator组件进行跳转

<view class="container">
  <navigator class="item" v-for="(item,index) in list" :key="index" :url="/pages/detail/detail?id=${item.id}">
    <view>id: {{item.id}}</view>
    <view>goodsName: {{item.goods_name}}</view>
  </navigator>
</view>

也可以用uni.navigateTo跳转传参，在下一个页面中，通过onLoad(options)接收参数

模板向js逻辑传参

uniapp传参

<view @click="getData(3)"></view>
...
getData(params){
  console.log(params)  //3
}

小程序传参

<view bindtap="getData" data-index="3"></view>
...
getData(e){
console.log(e.currentTarget.dataset.index)  //3
}

父子组件传参

网络请求

封装request.js文件


const baseUrl = "http://localhost:6645";
const header = {
  'content-type': 'application/x-www-form-urlencoded'
}
const request = (url='',data={},method='GET')=>{
  return new Promise((resolve,reject)=>{
    uni.request({
      url:baseUrl+url,
      header:header,
      data:data,
      method:method,
      success:(res)=>{
        resolve(res)
      },
      fail:(err)=>{
        reject(err)
      }
    })
  })
}
export default request

在main.js中全局注册


import request from "api/request.js"
Vue.prototype.$request = request

在页面中调用

this.$request('/recruit/getAll', {
  // 传参参数名：参数值,如果没有，就不需要传
}).then(res => {
  // 打印调用成功回调
  console.log(res)
}).catch(err=>{
  // 打印调用失败回调
  console.log(err)
})

参考文章：https://blog.csdn.net/MrWangisgoodboy/article/details/125805829

在uniapp中引入dcloud中的组件

实现效果，在uniapp中引入日历插件

下载插件的时候，需要登录dcloud账号

![[f3279f68-7a7c-4328-abf3-5862a2a6bc39.png]]

日历插件地址：https://ext.dcloud.net.cn/plugin?id=1651

使用hBuilder导入插件

导入插件的时候，必须要有hBuilder或者dcloud的账号，需要注册账号

![[c9268c4b-655a-44db-8caa-64017b24dda2.png]]

使用hBuilder打开

![[550a15cb-372c-457e-85c4-f570453607dc.png]]

选择你要导入的项目名称

目前我的桌面只有一个uni-app的项目，所以直接选择第一个

![[4315528f-193c-4ad0-8009-4457b5cd16cf.png]]

安装成功

安装成功之后，右下角会显示提示框

![[ef9fa610-60e3-4b82-b26b-b353f3c7022b.png]]

引入并使用插件

直接从官网中粘贴代码

![[b20fd9ae-ec12-4e50-9036-dfd490cd0e88.png]]

import lxCalendar from '../../components/lx-calendar/lx-calendar.vue'
export default {
  data() {
    return {
      title: '云和数据'
    }
  },
  methods: {
    change(e){
      console.log(e);
    }
  },
  components:{
    lxCalendar
  }
}

刷新页面浏览效果

![[bb076e17-74aa-45d5-b13f-7d536079c86b.png]]

其他插件

城市索引组件：https://ext.dcloud.net.cn/plugin?id=2093

![[e0302a61-7db0-4e07-a415-efafd9e238fc.png]]

发行

发行h5页面

发行 -> 网站 H5手机版 ------>把项目编译打包在unpackage/dist/build/h5 把该文件夹传给后端即可（注意： h5页面必须在服务器下才能正常运行）

发行微信小程序

发行—>小程序微信 -----把项目编译打包在/unpackage/dist/build/mp-weixin 可以在微信开发者工具中直接上传该版本

发行为原生APP

发行—>原生App 本地打包

注意：打包的时候，需要登录Hbuilder账号

![[a38914d0-d950-4adb-a396-aad28f0512ed.png]]

![[1d61d5c4-e17d-4c52-9967-1036e7b0bb19.png]]

AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

GitHub今日热榜 | 2026-08-06

今日榜单呈现大换血，10个项目中7个为新晋项目。Cloudflare的Agent虚拟环境项目computer空降榜首，提供隔离文件系统和多执行后端支持。腾讯的TencentDB-Agent-Memory虽排名下滑至第3，但日增Star上涨70%。其他亮点包括： loopx为AI Agent团队提供看板管理系统经典面试指南system-design-primer回归榜单 DeepSeek-Reas