uni-app的官方文档，功能简要查询查找

标语：即使深陷泥潭，也不要忘记仰望星空

文档阅读注意

本文档为博主使用uni-app总结的一些常用功能的使用方法，不喜勿喷，仅供快速查找常用的功能。

uni-app中部分有的平台可能不兼容，请查询官方文档

本文档只显示基础功能，具体属性请查询官方文档

微信小程序的版本问题众多，本文档在2.14.1版本中可正常运行，如果不能正常运行，请切换版本，如依然无效，请查官方文档或者百度

1、加载动画

自带api功能

https://uniapp.dcloud.io/api/ui/prompt?id=showloading

uni.showLoading({       //开启动画title: '加载中'      //动画提示文字
});setTimeout( () =>{uni.hideLoading();    //动画关闭
}, 2000);

2、宫格布局

组件宫格布局

https://uniapp.dcloud.io/component/uniui/uni-grid

修改shadow内的item即可修改宫格每一项的样式

.uni-grid-item {   //修改该样式的高度可设置宫格内部的样式height: 80px !important;}

3、页面下拉加载和上拉刷新

来自页面周期函数

用户上拉到顶部以上，执行周期函数，进行刷新操作
需要在 pages.json 里，找到的需要下拉刷新页面的pages节点，并在 style 选项中开启 enablePullDownRefreshstyle中添加
"enablePullDownRefresh":true
在页面中添加周期函数onPullDownRefresh(){代码块}---------------------------------------------------------------------------------------------------------------用户下拉到底部，执行周期函数，加载操作
在页面中添加周期函数onReachBottom(){代码块}

4、点击弹出模态确认框

来自uni.showModal方法

https://uniapp.dcloud.io/api/ui/prompt?id=showmodal

方法一：

直接在点击事件中添加

uni.showModal({
title: ‘是否确认清空所有收藏’, //模态框标题
content: ‘清空收藏后无法恢复’, //提示文字
success: (res) => {
if (res.confirm) {
console.log(‘用户点击确认’);
} else if (res.cancel) {
console.log(‘用户点击取消’);
}
}
});

方法二：

来自uni-popup弹出层组件,需要下载插件

https://uniapp.dcloud.io/component/uniui/uni-popup

//在html中添加标签，自带弹出输入框，可设置  文本格式框 mode='base'（提示对话框）/  输入框   mode='input'（可输入对话框）

//在js中添加标签

close() {
// TODO 做一些其他的事情，before-close 为true的情况下，手动执行 close 才会关闭对话框
// …
this.KaTeX parse error: Expected 'EOF', got '}' at position 46: …周期函数 }̲, confirm(va…refs.popup.close()
}

5、小程序下方导航栏

框架组件tabBar

https://uniapp.dcloud.io/collocation/pages?id=tabbar

//在pages.json中添加    至少为2个项，不然会发送报错"tabBar": {"color": "#7A7E83",    //文字颜色"selectedColor": "#3cc51f",      //选中文字颜色"borderStyle": "black",   //边框颜色"backgroundColor": "#ffffff",   //背景颜色"list": [{"pagePath": "pages/component/index",    //跳转页面的路径"iconPath": "static/image/icon_component.png",    //默认图片"selectedIconPath": "static/image/icon_component_HL.png",    //激活切换的图片"text": "组件"    //跳转页面标题}, {"pagePath": "pages/API/index","iconPath": "static/image/icon_API.png","selectedIconPath": "static/image/icon_API_HL.png","text": "接口"}]
}

6、轮播图/走马灯/swiper

https://uniapp.dcloud.io/component/swiper?id=swiper

 html中<view class="uni-padding-wrap"><view class="page-section swiper"><view class="page-section-spacing"><swiper class="swiper" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration"><swiper-item><view class="swiper-item uni-bg-red">A</view></swiper-item><swiper-item><view class="swiper-item uni-bg-green">B</view></swiper-item><swiper-item><view class="swiper-item uni-bg-blue">C</view></swiper-item></swiper></view></view></view>data中添加background: ['color1', 'color2', 'color3'],indicatorDots: true,autoplay: true,interval: 2000,duration: 500

7、拨打电话

https://uniapp.dcloud.io/api/system/phone?id=makephonecall

直接在js中添加电话
uni.makePhoneCall({phoneNumber: '114' //拨打电话号码功能
});

8、扫码功能

来自uni.scanCode功能
https://uniapp.dcloud.io/api/system/barcode?id=scancode

//添加到js中
// 允许从相机和相册扫码
uni.scanCode({success:  (res) =>{console.log('条码类型：' + res.scanType);console.log('条码内容：' + res.result);}
});// 只允许通过相机扫码
uni.scanCode({onlyFromCamera: true,success: (res)=> {console.log('条码类型：' + res.scanType);console.log('条码内容：' + res.result);}
});// 调起条码扫描
uni.scanCode({scanType: ['barCode'],success:  (res) =>{console.log('条码类型：' + res.scanType);console.log('条码内容：' + res.result);}
});

9、按钮

https://uniapp.dcloud.io/component/button?id=button

uni-app封装了button type的值有3个 primary(绿色)/default(白色)/warn(红色)

  <navigator url="/pages/about/about"><button type="default">通过navigator组件跳转到about页面</button></navigator>

1、button获取授权登陆信息

 <button type="primary" open-type="getUserInfo"  @getuserinfo="info" >授权登陆</button>//参数的e获取登陆权限获得的信息info(e) {console.log(e.detail.userInfo.nickName)   //获取用户名}

10、路由跳转

1、uni.navigateTo( )

保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。

https://uniapp.dcloud.io/api/router?id=navigateto

//在起始页面跳转到test.vue页面并传递参数
uni.navigateTo({url: 'test?id=1&name=uniapp'
});
// 在test.vue页面接受参数
export default {onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数console.log(option.id); //打印出上个页面传递的参数。console.log(option.name); //打印出上个页面传递的参数。}
}

2、uni.redirectTo()

关闭当前页面，跳转到应用内的某个页面

https://uniapp.dcloud.io/api/router?id=redirectto

uni.redirectTo({url: 'test?id=1'
});

3、uni.switchTab()

跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

注意： 如果调用了 uni.preloadPage(OBJECT) 不会关闭，仅触发生命周期 onHide

https://uniapp.dcloud.io/api/router?id=switchtab

uni.switchTab({url: '/pages/index/index'
});

4、uni.navigateBack()

https://uniapp.dcloud.io/api/router?id=navigateback

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码// 此处是A页面
uni.navigateTo({url: 'B?id=1'
});// 此处是B页面
uni.navigateTo({url: 'C?id=1'
});// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({delta: 2
});

5、标签跳转

在标签外面嵌套

作用类似于a标签 url表示跳转的地址

https://uniapp.dcloud.io/component/navigator?id=navigator

<navigator url="/pages/about/about">   //url表示跳转地址，注意地址前面比pages.json中多一个”/“内容
</navigator >

11、本地存储

1、数据储存到本地

注意1：异步存取和读取不会阻断代码执行，可能会导致页面白屏

注意2：同步存取和读取会阻断代码执行，不会导致白屏，但是可能会导致后面的代码无法执行

一、存数据

1、uni.setStorage()

https://uniapp.dcloud.io/api/storage/storage?id=setstorage

将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。

uni.setStorage({key: 'storage_key',data: 'hello',success: function () {console.log('success');}
});

2、uni.setStorageSync()

https://uniapp.dcloud.io/api/storage/storage?id=setstoragesync

将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。

try {uni.setStorageSync('storage_key', 'hello');
} catch (e) {// error
}

二、取数据

1、uni.getStorage()

https://uniapp.dcloud.io/api/storage/storage?id=getstorage

从本地缓存中异步获取指定 key 对应的内容。

uni.getStorage({key: 'storage_key',success: function (res) {console.log(res.data);}
});

2、uni.getStorageSync()

https://uniapp.dcloud.io/api/storage/storage?id=getstoragesync

从本地缓存中同步获取指定 key 对应的内容。

try {const value = uni.getStorageSync('storage_key');//获取数据if (value) {console.log(value);}
} catch (e) {// error
}

三、删除数据

1、uni.removeStorage()

https://uniapp.dcloud.io/api/storage/storage?id=removestorage

从本地缓存中异步移除指定 key。

uni.removeStorage({key: 'storage_key', success: function (res) {console.log('success');}
});

2、uni.removeStorageSync()

https://uniapp.dcloud.io/api/storage/storage?id=removestoragesync

从本地缓存中同步移除指定 key。

try {uni.removeStorageSync('storage_key');
} catch (e) {// error
}

四、清空数据

https://uniapp.dcloud.io/api/storage/storage?id=clearstorage

异步清除本地缓存

1、uni.clearStorage()

uni.clearStorage();

2、uni.clearStorageSync()

try {uni.clearStorageSync();
} catch (e) {// error
}

12、自定义分享

自带api方法

小程序中用户点击分享后，在 js 中定义 onShareAppMessage 处理函数（和 onLoad 等生命周期函数同级），设置该页面的分享信息。

注意：不能在app.vue中配置，只能在当前页面配置

onShareAppMessage()

https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage

 onShareAppMessage(res) {if (res.from === 'button') {// 如果页面中有分享按钮   配置该项    来自页面内分享按钮console.log(res.target)}return {title: '自定义分享标题',   //分享页面的标题path: '/pages/test/test?id=123'    //完整的pages.json的地址    /+地址   参数按需传递}}

13、上传图片

uni.chooseImage 上传图片
上传图片思路

微信小程序会把图片编译成微信小程序的临时地址

然后将图片上传到服务器上去，服务器会返回服务器处理过后的图片地址

https://uniapp.dcloud.io/api/media/image?id=chooseimage


uni.chooseImage({count: 6, //默认9，最多上传的数量sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有sourceType: ['album'], //从相册选择 success: function (res) {               //注意箭头函数console.log(JSON.stringify(res.tempFilePaths));      //res.tempFilePaths   该参数为图片的微信虚拟路径数组uni.uploadFile({url: 'https://www.example.com/upload', //图片上传服务器地址filePath: tempFilePaths[0],  //上传的图片路径name: 'file',success: (uploadFileRes) => {console.log(uploadFileRes.data);  //返回的数据}});}
});

14、表单控件

https://uniapp.dcloud.io/component/button

此处请参考官方文档

15、下载功能

下载文件，需要后端提供接口

https://uniapp.dcloud.io/api/request/network-file?id=downloadfile

uni.downloadFile({url: 'https://www.example.com/file/test', //仅为示例，并非真实的资源success: (res) => {if (res.statusCode === 200) {console.log('下载成功');}}
});

16、微信支付

https://uniapp.dcloud.io/api/plugins/payment?id=requestpayment

实现逻辑：

前端+后端+微信官方

前端做的事：前端向微信官方获取用户的信息==》获得用户信息传输给后端 ==》拿到后端返回的用户唯一标识id，发送商品信息和唯一标识id给后端 ==》

拿到后端返回的订单信息 ==》发送请求给后端拿到订单处理信息

//一般在授权登陆时做这个操作！！！ 记得勾选uni-app中的Payment功能   //获取用户的codeID
uni.login({succes:function(loginRes){console.log(loginRes.code)      //获取用户的codeID//调后台接口，将codeID传递过去，后端会返回一个openIDuni.request({url: 'https://www.example.com/request',     //获取openID的地址data: {code: 'uni.request'},success: (res) => {const openid=res.data.openidconsole.log(res.data.openid);        //拿到数据中的openIDuni.setStorage({           //将openID存在本地存储中key: 'openid',data: openid,success: function () {uni.switchTab({     //跳转到首页url: '/pages/index/index'})}});}});}
})//在需要请求支付的页面的代码uni.request({url: 'https://www.example.com/request', //后端商品接口地址data: {数据                      //后端接口需要传递的数据，参考后端文档},success: (res) => {//一般返回的res中包含timeStamp:时间戳,nonceStr:随机字符串,package:'prepay_id='+预支付id,signType:签名算法paySign:签名uni.requestPayment({   //传入5个关键参数timeStamp:时间戳,nonceStr:随机字符串,package:'prepay_id='+预支付id,signType:签名算法,paySign:签名,success:(res)=>{  //返回支付成功后的结果和提示console.log(res)},fail:(err)=>{   //返回支付失败的结果和提示console.log(err)}})}
});

17、实现二级联动

scroll-view

https://uniapp.dcloud.io/component/scroll-view

详细配置查询官方文档

来自官方的注意点

APP-vue和小程序中，请勿在 scroll-view 中使用 map、video 等原生组件。小程序中 scroll-view 中也不要使用 canvas、textarea 原生组件。更新：微信基础库2.4.4起支持了原生组件在 scroll-view、swiper、movable-view 中的使用。app-nvue无此限制。
scroll-view 不适合放长列表，有性能问题。长列表滚动和下拉刷新，应该使用原生导航栏搭配页面级的滚动和下拉刷新实现。包括在app-nvue页面，长列表应该使用list而不是scroll-view。
scroll-into-view 的优先级高于 scroll-top。
scroll-view是区域滚动，不会触发页面滚动，无法触发pages.json配置的下拉刷新、页面触底onReachBottomDistance、titleNView的transparent透明渐变。
若要使用下拉刷新，建议使用页面的滚动，而不是 scroll-view 。插件市场有前端模拟的基于scroll-view的下拉刷新，但性能不佳。如必需使用前端下拉刷新，推荐使用基于wxs的下拉刷新，性能会比基于js监听方式更高。
如果遇到scroll-top、scroll-left、refresher-triggered属性设置不生效的问题参考：组件属性设置不生效解决办法
scroll-view的滚动条设置，可通过css的-webkit-scrollbar自定义，包括隐藏滚动条。（app-nvue无此css）

//原生uni-app不支持左右联动//仅 发送请求修改数据列表和渲染的数据就可实现效果，格式请自行编写<template><view class="list_box"><!-- 菜单左边 --><view class="left"><scroll-view scroll-y="true" :style="{ 'height':scrollHeight }"><view class="item" v-for="(item,index) in leftArray" :key="index" :class="{ 'active':index==leftIndex }":data-index="index" @tap="leftTap">{{item.id}}</view></scroll-view></view><view class="main"><scroll-view scroll-y="true" :style="{ 'height':scrollHeight }" @scroll="mainScroll" :scroll-into-view="scrollInto"scroll-with-animation="true" @touchstart="mainTouch" id="scroll-el"><block v-for="(item,index) in mainArray" :key="index"><view class="item" :id="'item-'+index"><view class="title"><view>{{item.title}}</view></view><view class="goods" v-for="(item2,index2) in item.list" :key="index2"><image src="/static/logo.png" mode=""></image><view><view>第{{index2+1}}个商品标题</view><view class="describe">第{{index2+1}}个商品的描述内容</view><view class="money">第{{index2+1}}个商品的价格</view></view></view></view></block></scroll-view></view></view>
</template><script>export default {data() {return {scrollHeight: '500px',leftArray: [{id: 1},{id: 2},{id: 3},{id: 4},{id: 5},{id: 6},{id: 7},{id: 8}],mainArray: [],topArr: [],leftIndex: 0,isMainScroll: false,scrollInto: '',tipsTop: '0px'}},onLoad() {uni.getSystemInfo({success: (res) => {/* 设置当前滚动容器的高，若非窗口的告诉，请自行修改 */this.scrollHeight = `${res.windowHeight}px`;console.log('gaodu', res.windowHeight)}});},computed: {},mounted() {this.getListData();},methods: {/* 获取列表数据 */getListData() {/* 因无真实数据，当前方法模拟数据 */let [left, main] = [[],[]];for (let i = 0; i < 8; i++) {left.push(`${i+1}类商品`);let list = [];for (let j = 0; j < (i + 1); j++) {list.push(j);}main.push({title: `第${i+1}类商品标题`,list})}this.mainArray = main;this.$nextTick(() => {this.getElementTop();});},//获取距离顶部的高度getScrollTop(selector) {return new Promise((resolve, reject) => {let query = uni.createSelectorQuery().in(this);query.select(selector + '').boundingClientRect(data => {resolve(data.top)}).exec();})},/* 获取元素顶部信息 */async getElementTop() {/* Promise 对象数组 */let p_arr = [];/* 遍历数据，创建相应的 Promise 数组数据 */for (let i = 0; i < this.mainArray.length; i++) {const resu = await this.getScrollTop(`#item-${i}`)p_arr.push(resu)}// console.log('p_arr', p_arr)/* 主区域滚动容器的顶部距离 */this.getScrollTop("#scroll-el").then((res) => {let top = res;// #ifdef H5top += 43; //因固定提示块的需求，H5的默认标题栏是44px// #endif/* 所有节点信息返回后调用该方法 */Promise.all(p_arr).then((data) => {console.log('滚动', data)this.tipsTop = `${data}px`;this.topArr = data;});})},/* 主区域滚动监听 */mainScroll(e) {if (!this.isMainScroll) {return;}let top = e.detail.scrollTop;let index = -1;if (top >= this.topArr[this.topArr.length - 1]) {index = this.topArr.length - 1;} else {index = this.topArr.findIndex((item, index) => {return this.topArr[index + 1] >= top;});}this.leftIndex = (index < 0 ? 0 : index);},/* 主区域触摸 */mainTouch() {this.isMainScroll = true;},/* 左侧导航点击 */leftTap(e) {let index = e.currentTarget.dataset.index;this.isMainScroll = false;this.leftIndex = Number(index);this.scrollInto = `item-${index}`;}}}
</script><style lang="scss">.list_box {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;align-items: flex-start;align-content: flex-start;font-size: 28rpx;.left {width: 200rpx;background-color: #f6f6f6;line-height: 80rpx;box-sizing: border-box;font-size: 32rpx;.item {padding-left: 20rpx;position: relative;&:not(:first-child) {margin-top: 1px;&::after {content: '';display: block;height: 0;border-top: #d6d6d6 solid 1px;width: 620upx;position: absolute;top: -1px;right: 0;transform: scaleY(0.5);/* 1px像素 */}}&.active,&:active {color: #42b983;background-color: #fff;}}}.main {background-color: #fff;padding-left: 20rpx;width: 0;flex-grow: 1;box-sizing: border-box;.tips {line-height: 64rpx;font-size: 24rpx;font-weight: bold;color: #666;height: 64rpx;position: fixed;top: 44px;right: 0;width: 530rpx;z-index: 10;background-color: #fff;padding-left: 10rpx;}.title {line-height: 64rpx;position: relative;font-size: 24rpx;font-weight: bold;color: #666;height: 64rpx;}.item {margin-bottom: 20rpx;}.goods {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: flex-start;align-items: center;align-content: center;margin-bottom: 10rpx;&>image {width: 120rpx;height: 120rpx;margin-right: 16rpx;}.describe {font-size: 24rpx;color: #999;}.money {font-size: 24rpx;color: #efba21;}}}}
</style>主要属性
//scroll-into-view   <String>  :    值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
//scroll-with-animation  <Boolean> :  在设置滚动条位置时使用动画过渡

18、获取节点

//在函数中封装方法const query = uni.createSelectorQuery().in(this);query.select('#id').boundingClientRect(data => {  //选择一个标签，类似于document.queryselector()方法console.log("得到布局位置信息" + JSON.stringify(data));console.log("节点离页面顶部的距离为" + data.top);
}).exec();
query.selectAll('.')

尾声、测试上传小程序

一、上传到微信小程序官方

点击微信开发者工具右上角的上传按钮或者直接使用HBuilder X 点击发行 =》小程序微信=》配置名字和上传

二、小程序官方平台网址：

https://mp.weixin.qq.com/wxamp/wacodepage/getcodepage?token=1181193733&lang=zh_CN

三、前往小程序官方平台提交审核

uni-app的常用功能查询，uni-app入门级使用指南。相关推荐

jquery实现app开发闹钟功能_商城app开发价格及功能列表
商城app开发需要多少钱?如何快速开发商城的app呢?现在随着移动互联网开发技术的进步,不需要找专业的app开发公司,不需要等专业开发技术,使用应用公园app在线制作平台,自己能快速制作商城app的. ...
android选择头像弹窗,Android App开发常用功能之用户头像选择-Go语言中文社区
前言现在的APP基本都有个人资料的填写,基本的都有头像的选择,支持拍照和从本地相册选择,剪切圆形头像的功能,现在用个小demo实现以下. 下面看一下效果图上代码: 主界面代码 package co ...
Android手机App测试常用功能测试点
归纳和总结了Android APP在测试过程中经常出现Bug的关键节点,希望对大家有所帮助! 启动: 1. 启动入口:桌面正常启动,最近运行启动,所有程序列表中启动,锁屏快捷启动 2. 其他入口:从其 ...
Android App开发常用功能之用户头像选择
前言现在的APP基本都有个人资料的填写,基本的都有头像的选择,支持拍照和从本地相册选择,剪切圆形头像的功能,现在用个小demo实现以下. 下面看一下效果图上代码: 主界面代码 package co ...
HOJ 系统常用功能介绍部署快速入门 c++ python java编程语言在线自动评测信息奥赛一本通 USACO GESP 洛谷蓝桥 CSP NOIP题库
技术支持微 makytony 服务器配置需求腾讯云 2H4G 5M 60GB 轻量应用服务器承载大约 200~400人使用,经过压力测试,评测并发速度可满足130人左右的在线比赛. 系统镜像选 ...
Android app开发常用图标网站
Android app开发常用图标网站 Android app开发小白的开发android app时需要使用各种图标,下面介绍一些常用的Android app图标的网站,可免费下载图标使用,希望对大家 ...
uni app实现WIFI功能(只支持安卓APP)
uni app实现WIFI功能一.前言二.使用 uni-WIFI 三.使用h5+ api 一.前言最近需要在uniapp上实现WiFi功能,将个人的研究结果记录如下(都只支持安卓APP) 使用 ...
互联网日报 | 1月15日星期五 | 百度App上线出行政策查询功能；铁路部门调整车票预售期为15天；知乎十周年宣布品牌升级...
今日看点 ✦ 铁路部门调整车票预售期为15天,开车前8天及以上退票免费 ✦ 百度App上线出行政策查询功能,全国各地隔离政策快速了解 ✦ 联想集团计划科创板上市融资100亿,选择中金作为保荐人 ✦ 知 ...
uni中使用select标签后生成APP页面跳转空白
uni中使用select标签后生成APP页面跳转空白最近再用webstrom时,写uni APP时发现一个问题当生成apk后,带有select选择器标签的页面突然无法显示一片空白. 报错显示:Ca ...

uni-app的常用功能查询，uni-app入门级使用指南。