uniapp 编程体验

2024-10-14 20:38:03

全局变量

方法一改App.vue

// App.vue
export default {
  globalData: {
    userInfo: null,
    token: ''
  },
  onLaunch: function () {
    // 初始化全局变量
    this.globalData.userInfo = { name: '张三', age: 30 };
  }
}

// 在其他页面或组件中访问
const app = getApp();
console.log(app.globalData.userInfo); // { name: '张三', age: 30 }

方法二定义globalData.js

在App.vue同级文件夹新建globalData.js

export default{
	imgBase:'http://localhost:8080',
}

使用时：

import globalData from '@/globalData.js';
console.log(globalData.imgBase);

参考：uniapp全局变量

图片路径

图片使用绝对路径，如：/static/images/a.jpg，或者，网络路径，如：http://localhost/a.jpg，小程序编程，由于空间限制，把图片放到oss上，或者文件服务器上。

uni-nav-bar的使用

uni-nav-bar的display:block，没有定位。

<uni-nav-bar :fixed="true" dark background-color="#007AFF" title="母胎咨询" class="nav" left-icon="left"
			@clickLeft="back" :statusBar="true" :border="false" />

statusBar 是否包括状态栏，为true时自动显示在statusBar下面
border 是否显示下面的一条线，false表示不显示
fixed 表示固定在顶部
title 表示显示的标题
left-icon 左边显示的图标
clickLeft 点击左边图标引发的事件

uv-navbar使用（比uni-nav-bar更容易）

uv-navvar的position:relative，后面的内容要重新定位。

<uv-navbar title="个人中心" @leftClick="leftClick" bgColor="blue" titleStyle="color:white;"
			leftIconColor="white"></uv-navbar>

顶部状态栏/uni-nav-bar高度

微信小程序：顶部状态栏高度：20px，uni-nav-bar高度：44px

条件编译(在style标签里使用）

/* #ifdef MP-WEIXIN */
height: calc(100% - 44px- 20px - 160rpx);
/* #endif */

/* #ifdef H5 */
height: calc(100% - 44px - 160rpx);
/* #endif*/

uv-button更改样式：

template:

<uv-button @click="consult" type="primary" :custom-style="customStyle">去咨询</uv-button>

script:

data() {
	return {
		customStyle: {
			"border-radius": "25px",
			"width": "90%",
			"font-size":"16px",
		}
	}
},

页面（Page)样式

<style>
	page {
		height: 100%;
		background-color: #f4f4f4;
	}
</style>

注意：如果使用style scoped 在微信小程序里不会生效

Position

定位包括：static，absolute，fixed，relative。
使用position:fixed或absolute时，把z-index也设好，比如设为：1000，否则可能浮动层不能操作

static（静态定位）

HTML 元素的默认值，即没有定位，遵循正常的文档流对象。表示块保留在原本应该在的位置，不会重新定位。不会受到 top, bottom, left, right影响。

fixed（固定定位）

元素的位置相对于浏览器窗口是固定位置。不会随着滚动条的拖动而改变位置，即使窗口是滚动的它也不会移动：
Fixed定位使元素的位置与文档流无关，因此不占据空间。
Fixed定位的元素和其他元素重叠。

relative（相对定位）

相对定位元素的定位是相对其正常位置（相对自己原先的位置）。
定位为relative的元素脱离正常的文档流中,但其在文档流中的原位置依然存在,后面的无定位元素仍然不会“挤上来”

absolute（绝对定位）

绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于浏览器

absolute 定位:完全脱离正常文档流，使元素的位置与文档流无关，因此不占据空间。后面的盒子会补上来
absolute 定位的元素和其他元素重叠。

display:flex

弹性盒子布局

display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: row;

justify-content属性定义了项目在主轴上的对齐方式。取值：

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

align-items属性定义项目在交叉轴上如何对齐。取值：

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

flex-direction取值：

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

CSS防止盒子撑大

加上一个属性：

box-sizing: border-box;

Scroll-View

Scroll-view显示内容不全，考虑增加：padding-bottom等属性

Toast

显示消息提示框。

//显示Toast
uni.showToast({
	title: '标题',
	duration: 2000
});

//关闭Toast
uni.hideToast();

title 提示的内容，长度与 icon 取值有关。
icon 图标，默认：success，取值：success，error，fail，exception，loading，none。
image 自定义图标的本地路径（app端暂不支持gif）
mask 是否显示透明蒙层，防止触摸穿透，默认：false
duration 提示的延迟时间，单位毫秒，默认：1500
position 纯文本轻提示显示位置，填写有效值后只有 title 属性生效，且不支持通过 uni.hideToast 隐藏。有效值详见下方说明。
success 接口调用成功的回调函数
fail 接口调用失败的回调函数
complete 接口调用结束的回调函数（调用成功、失败都会执行）

Loading

显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。

uni.showLoading({
	title: '加载中'
});

setTimeout(function () {
	uni.hideLoading();
}, 2000);

title 提示的文字内容，显示在loading的下方
mask 是否显示透明蒙层，防止触摸穿透，默认：false
success 接口调用成功的回调函数
fail 接口调用失败的回调函数
complete 接口调用结束的回调函数（调用成功、失败都会执行）

Modal对话框

显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm。

uni.showModal({
	title: '提示',
	content: '这是一个模态弹窗',
	success: function (res) {
		if (res.confirm) {
			console.log('用户点击确定');
		} else if (res.cancel) {
			console.log('用户点击取消');
		}
	}
});

title 提示的标题
content 提示的内容
showCancel 是否显示取消按钮，默认为 true
cancelText 取消按钮的文字，默认为"取消"
cancelColor 取消按钮的文字颜色，默认为"#000000"
confirmText 确定按钮的文字，默认为"确定"
confirmColor 确定按钮的文字颜色，H5平台默认为"#007aff"，微信小程序平台默认为"#576B95"，百度小程序平台默认为"#3c76ff"
success 接口调用成功的回调函数
fail 接口调用失败的回调函数
complete 接口调用结束的回调函数（调用成功、失败都会执行）

ActionSheet

从底部向上弹出操作菜单

uni.showActionSheet({
	itemList: ['A', 'B', 'C'],
	success: function (res) {
		console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
	},
	fail: function (res) {
		console.log(res.errMsg);
	}
});

title 菜单标题
alertText 警示文案（同菜单标题）
itemList 按钮的文字数组
itemColor 按钮的文字颜色，字符串格式，默认为"#000000"
popover 大屏设备弹出原生选择按钮框的指示区域，默认居中显示
success 接口调用成功的回调函数，详见返回参数说明
fail 接口调用失败的回调函数
complete 接口调用结束的回调函数（调用成功、失败都会执行）

拔打电话

 uni.makePhoneCall({
	  phoneNumber: phoneNumber, // 电话号码
	  success: function () {
	    console.log('拨打电话成功');
	  },
	  fail: function (err) {
	    console.log('拨打电话失败：', err);
	  }
});

request

发起网络请求。

uni.request({
    url: 'https://www.example.com/request', //仅为示例，并非真实接口地址。
    data: {
        text: 'uni.request'
    },
    header: {
        'custom-header': 'hello' //自定义请求头信息
    },
    success: (res) => {
        console.log(res.data);
        this.text = 'request success';
    }
});

url 开发者服务器接口地址
data 请求的参数
header 设置请求的 header，header 中不能设置 Referer
method 取值：GET（默认），POST，PUT，DELETE，CONNECT，HEAD，OPTIONS，TRACE
timeout 超时时间，单位 ms
dataType 如果设为 json，会对返回的数据进行一次 JSON.parse，非 json 不会进行 JSON.parse
responseType 设置响应的数据类型。合法值：text、arraybuffer
success 收到开发者服务器成功返回的回调函数
fail 接口调用失败的回调函数
complete 接口调用结束的回调函数（调用成功、失败都会执行）

码农公寓