上海营销网站建设公司ico众筹WordPress
目录
第一章、常用设置的api
1.1 tabBar导航配置
1.2 subPackages分包配置
1.3 enablePullDownRefresh下拉刷新配置
1.4 onReachBottomDistance上拉刷新配置
第二章、页面常用逻辑api
2.1请求数据
2.1.1 网络请求uni.request
2.2 文件上传与下载(图片、文件…)
2.2.1 文件上传chooseFile、下载downloadFile与打开openDocument
2.2.2 图片上传chooseImage与下载downloadFile
2.3 页面跳转
2.3.3 针对非tabBar的页面回退navigateBack
2.4 数据缓存
2.4.1 本地存储指定的键值对setStorage与setStorageSync
2.4.2 获取本地存储键对应的值getStorage与getStorageSync
2.4.3 移除缓存removeStorage与removeStorageSync
2.4.4 清空缓存clearStorage与clearStorageSync
2.5 位置
2.5.1 配置地图详细信息
2.5.2 获取位置getLocation
2.5.3 打开地图选择位置chooseLocation
2.5.4 使用应用内置地图查看位置openLocation
2.6 页面的交互反馈
2.6.1 显示/隐藏消息框showToast/hideToast
2.6.2 显示/隐藏 loading 提示框showLoading/hideLoading
2.6.3 显示模态弹窗showModal
第一章、常用设置的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';//网络请求apiuni.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, //默认100type:'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 //是否显示透明蒙层，防止触摸穿透，默认falseposition: 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, //是否展示取消按钮，默认为truecancelText: '取消', //取消按钮的文字，默认为"取消"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官网