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

条件编译：

/* #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%"}}
},

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 接口调用结束的回调函数（调用成功、失败都会执行）