目录
1.3 enablePullDownRefresh下拉刷新配置
1.4 onReachBottomDistance上拉刷新配置
2.2.1 文件上传chooseFile、下载downloadFile与打开openDocument
2.2.2 图片上传chooseImage与下载downloadFile
2.3.3 针对非tabBar的页面回退navigateBack
2.4.1 本地存储指定的键值对setStorage与setStorageSync
2.4.2 获取本地存储键对应的值getStorage与getStorageSync
2.4.3 移除缓存removeStorage与removeStorageSync
2.4.4 清空缓存clearStorage与clearStorageSync
2.5.4 使用应用内置地图查看位置openLocation
2.6.1 显示/隐藏消息框showToast/hideToast
2.6.2 显示/隐藏 loading 提示框showLoading/hideLoading
第一章、常用设置的api
1.1 tabBar导航配置
- 其目标就是设置小程序的导航栏
"tabBar": {
"selectedColor": "#c00000", //选中时的颜色
"list": [
{
"pagePath": "pages/home/home", //tabBar路径
"text": "首页", // tabBar文字
"iconPath": "static/tab_icons/home.png", // 未选中时的图片颜色
"selectedIconPath": "static/tab_icons/home-active.png" //选中时的图片颜色
},
{
"pagePath": "pages/cate/cate",
"text": "分类",
"iconPath": "static/tab_icons/cate.png",
"selectedIconPath": "static/tab_icons/cate-active.png"
},
{
"pagePath": "pages/my/my",
"text": "我的",
"iconPath": "static/tab_icons/my.png",
"selectedIconPath": "static/tab_icons/my-active.png"
}
]
}1.2 subPackages分包配置
- 设置分包，一些暂时未打开的页面，等下次需要加载该页面的时候再加载，也是一种优化
"subPackages": [{
"root": "subpkg", //根目录
"pages": [
{
"path" : "goods/goods", //再文件夹subpkg配置对应的路径
"style" :{
"navigationBarTitleText": "商品信息",
"enablePullDownRefresh": false
}
},
{
"path" : "goods_list/goods_list",
"style" :
{
"navigationBarTitleText": "商品列表",
"enablePullDownRefresh": true,
"onReachBottomDistance": 150,
"backgroundColor": "#007AFF"
}
},
{
"path" : "search/search",
"style" :
{
"navigationBarTitleText": "搜索页面",
"enablePullDownRefresh": false
}
}
]
}],1.3 enablePullDownRefresh下拉刷新配置
- 开启下拉刷新："enablePullDownRefresh": true
{
"path" : "goods_list/goods_list",
"style" :
{
"navigationBarTitleText": "商品列表",
"enablePullDownRefresh": true, //开启下拉刷新
"backgroundColor": "#007AFF" //开启之后的一些设置
}
},1.4 onReachBottomDistance上拉刷新配置
- 设置上拉刷新：距离底部多长记录进行上拉刷新
{
"path" : "goods_list/goods_list",
"style" :
{
"navigationBarTitleText": "商品列表",
"onReachBottomDistance": 150, //开启上拉刷新
}
}第二章、页面常用逻辑api
2.1请求数据
2.1.1 网络请求uni.request
<button @click="apiRequest">请求接口</button>
apiRequest(){
let url = 'https://apirequest LOVE snow.net';
//网络请求api
uni.request({
url:url, // 请求路径
data:{}, // 参数
header:{}, // 请求头
method:'GET', // 请求方法
timeout:10000, // 超时请求
dataType:'json',// 默认json，请求数据类型
success: (res) =>{ // 成功时的回调
console.log(res);
},
fail: (err) => { // 失败时的回调
console.log(JSON.stringify(err));
}
})
}
2.2 文件上传与下载(图片、文件…)
- App支持多文件上传，微信小程序只支持单文件上传
- 支持多图上传
2.2.1 文件上传chooseFile、下载downloadFile与打开openDocument
<button @click="onuploadFlie">文件上传</button>
<button @click="ondownloadFile">下载</button>
//上传文件
onuploadFlie(){
uni.chooseFile({
count: 1, //默认100
type:'file', //仅H5支持
extension:['.doc', '.docx', '.pdf', '.pptx', '.ppt', '.xls', '.xlsx','.zip'], //选择上传文件的格式
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths));
}
});
}
//下载文件并打开文件
ondownloadFile(){
uni.downloadFile({
url: 'https://www.example.com/file/test', //下载文件的路径
success: (res) => {
var filePath = res.tempFilePath; //文件路径
uni.openDocument({ //打开下载完成的路径
filePath: filePath, //文件路径
showMenu: true,
success: function (res) {
console.log('打开文档成功');
}
});
}
});
}2.2.2 图片上传chooseImage与下载downloadFile
<button @click="onuploadphoto">图片上传</button>
<button @click="ondownload">下载</button>
<image :src="downloadfile" style="width: 300rpx;height: 270rpx;" mode="aspectFill"></image>
data() {
return {
downloadfile:''
}
},
onuploadphoto(){ //上传图片
uni.chooseImage({
count:1, // 上传图片的数量
sizeType:['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType:['album'], //从哪里选择图片(案例从相册选择)
success: (res) => {
console.log(JSON.stringify(res)); // 成功了查看图片信息
},
fail: () => {
console.log(JSON.stringify(err));
}
})
},
ondownload(){ //下载图片
uni.downloadFile({ url:'https://www.example.com/file/test', // 这里是图片接口地址 直接 url拼接参数可
timeout:30000, //超时
headers:{} , //是否需要携带请求头
methods:'GET'/'POST', //是否需要添加请求方法
success: (res) => {
console.log(JSON.stringify(res)); //显示图片的信息
this.downloadfile = res.tempFilePath; //显示图片
},
fail: (err)=>{
console.log(JSON.stringify(err));
}
})
}2.3 页面跳转
2.3.1 跳转到非tabBar页面navigateTo
uni.navigateTo({
url:'url'
});2.3.2 跳转到tabBar页面navigateTo
uni.switchTab({
url: '/pages/index/index'
});2.3.3 针对非tabBar的页面回退navigateBack
uni.navigateBack({
delta: 2
});
uni.navigateBack() //默认delta回退1时不用写2.4 数据缓存
2.4.1 本地存储指定的键值对setStorage与setStorageSync
- 使用setStorageSync(同步存储)
//一般使用该方法
uni.setStorageSync('key',value) -->同步
uni.setStorage('key',value) -->异步2.4.2 获取本地存储键对应的值getStorage与getStorageSync
- 使用的getStorageSync(同步获取)
//一般使用该方法
uni.getStorageSync('key')
uni.getStorage('key')2.4.3 移除缓存removeStorage与removeStorageSync
//一般使用该方法
uni.removeStorageSync('key')
uni.removeStorage('key')2.4.4 清空缓存clearStorage与clearStorageSync
//一般使用该方法
uni.clearStorageSync()
uni.clearStorage()2.5 位置
2.5.1 配置地图详细信息
- uniapp+腾讯地图/高德地图开发：
uniapp官方文档map组件：map | uni-app官网
腾讯地图官方文档：微信小程序JavaScript SDK | 腾讯位置服务
高德地图官方文档：概述-iOS 地图SDK | 高德地图API
- 腾讯地图注册--->登录--->控制台--->开发文档--->微信小程序--->申请密钥--->创建应用--->自行命名以及选择功能--->添加key--->key的名称自行命名--->选择微信小程序--->输入APPID:wxce1cc86465385309--->添加
- 开通webserviceAPI服务：控制台->应用管理->我的应用->添加key->勾选webserviceAPI->保存即可
- 补充腾讯地图key的选项：下载微信小程序javaScriptSDK v1.1/v1.2
- --->最后，配置小程序请求域名https://lbs.qq.com/miniProgram/jsSdk/jsSdkGuide/jsSdkOverview
2.5.2 获取位置getLocation
- 返回的是经纬度
<button @click="onGeteLocal">获取地图位置</button>
onGetLocal(){
uni.getLocation({
type: 'wgs84', //默认为 wgs84 返回 gps 坐标
success: function (res) { //必填
console.log('当前位置的经度：' + res.longitude);
console.log('当前位置的纬度：' + res.latitude);
}
});
}2.5.3 打开地图选择位置chooseLocation
<button @click="onChooseLocal">打开地图选择位置</button>
onChooseLocal(){
uni.chooseLocation({
success: (res) => {
console.log('位置名称：' + res.name);
console.log('详细地址：' + res.address);
console.log('纬度：' + res.latitude);
console.log('经度：' + res.longitude);
}
})
}
2.5.4 使用应用内置地图查看位置openLocation
uni.getLocation({
type: 'gcj02', //返回可以用于uni.openLocation的经纬度
success: function (res) {
const latitude = res.latitude; //获取经度
const longitude = res.longitude; //获取纬度
uni.openLocation({
latitude: latitude, //经度
longitude: longitude, //纬度
success: function () { //成功
console.log('success');
}
});
}
});2.6 页面的交互反馈
2.6.1 显示/隐藏消息框showToast/hideToast
uni.showToast({
title: '标题', //标题 (必填)
duration: 2000, //延迟时间
icon: 'loading', //图标
image: '', //自定义图标路径
mask:true //是否显示透明蒙层，防止触摸穿透，默认false
position: center //位置，仅app生效
success: (res) => {
console.log(res);
}
});
uni.hideToast();2.6.2 显示/隐藏 loading 提示框showLoading/hideLoading
uni.showLoading({
title: '加载中'，
mask:true //是否显示透明蒙层，防止触摸穿透，默认false
});
setTimeout(function () {
uni.hideLoading();
}, 2000);2.6.3 显示模态弹窗showModal
- 显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。
<button @click="onShowModel">显示提示框</button>
onShowModel(){
uni.showModal({
title:'提示标题', //提示标题
content:'这是提示内容', //提示内容
showCancel:false, //是否展示取消按钮，默认为true
cancelText: '取消', //取消按钮的文字，默认为"取消"
confirmText:'确定', //确定按钮的文字，默认为"确定"
editable:true, //是否显示输入框
success: (res) => {
console.log(res);
if(res.confirm){ //点击确定时 做后续操作
console.log('确定'); //例如发送请求啊等等
}
}
})
}第三章、调用手机功能的api
3.1 扫码二维码 uni.scanCode
<button @click="scan">点我扫一扫</button>
scan(){
uni.scanCode({
scanType: ['barCode','qrCode'], //识别二维码的类型
onlyFromCamera: false, //是否只允许扫描(扫描/扫描+相册)
success: function (res) {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
}
});
},
3.2 点击拨打电话号码
<text selectable @click="call">177****5849</text>
call(){
uni.makePhoneCall({
phoneNumber: '177****5849' //需要拨打的手机号
});
}更具体请看官网：
uniapp官网api文档：uni-app官网
1242
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
