uniapp 编程体验
全局变量
方法一 改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 :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-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%"
}
}
},
页面（Page)样式
<style>
page {
height: 100%;
background-color: #f4f4f4;
}
</style>
注意：如果使用style scoped 在微信小程序里不会生效
Position
定位包括：static/absolute/fixed/relative,相对定位是指相对于position不是static的父或前面兄弟元素进行相对位置定位，可使用：left，top等属性
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 接口调用结束的回调函数（调用成功、失败都会执行）
原文地址：https://blog.csdn.net/m0_37570176/article/details/142769967
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！