uniapp实现常用功能
1.pages.json
官网地址：https://uniapp.dcloud.io/collocation/pages?id=%e9%85%8d%e7%bd%ae%e9%a1%b9%e5%88%97%e8%a1%a8
pages.json是对uniapp进行全局配置，决定了页面文件的路径，窗口样式，原生导航栏，底部原生tabbar等，类似于微信小程序中的app.json的页面管理部分
globalStyle - 对整个项目的全局配置 - 配置导航栏的信息
tabBar对底部tab的配置
pages对单个页面的配置，可以配置是否显示顶部导航栏等
pages.json - 单独配置某个页面的导航栏显示
1.设置基本导航栏
(1)基本配置
pages: [{
"path": "pages/tabbar/tabbar-3/tabbar-3",
"style": {
"titleNView": {
"titleColor": "#ffffff",
"titleText": "详情",
"backgroundColor": "#186ff2"
},
"navigationStyle": "default"
}
}],(2)动态修改配置
onLoad(){
//设置顶部导航栏的文本文字
uni.setNavigationBarTitle({
title: '消息'
})
//设置导航栏样式
uni.setNavigationBarColor({
frontColor: '#ffffff',
backgroundColor: '#196ff2'
});
}2.配置文件，设置某个文件不显示顶部导航栏
{
"path": "pages/addressBook/myInfoDetail", //个人通讯录详情
"style": {
"app-plus": {
"titleNView": false
}
}
},3.导航栏左边部分显示文字或图标
’
pages的配置：
{
"path": "pages/noticyManage/detail", //通知管理详情
"style": {
"titleNView": {
"titleColor": "#ffffff",
"titleText": "",
"backgroundColor": "#186ff2",
"buttons": [{
"text": "···",
"fontSize": "24",
"redDot": false
}]
}
}
},页面监听触发
onNavigationBarButtonTap(e) {
console.log(e)
if(e.text == '添加'){
//跳转到添加页面
uni.navigateTo({
url: '/pages/showFoods/addFoods'
})
}
},types在官网的配置文档 - uni-app官网
可以进行自定义按钮 -
设置导航栏左边部分
下面是一个例子，基本满足普通项目需求的配置
{
"pages": [{ //页面路径和窗口的表现
"path": "pages/component/index", //配置路径
"style": {
"navigationBarTitleText": "组件"
}
}, {
"path": "pages/API/index",
"style": {
"navigationBarTitleText": "接口"
}
}, {
"path": "pages/component/view/index",
"style": {
"navigationBarTitleText": "view"
}
}],
"condition": { //模式配置，仅开发期间生效
"current": 0, //当前激活的模式（list 的索引项）
"list": [{
"name": "test", //模式名称
"path": "pages/component/view/index" //启动页面，必选
}]
},
"globalStyle": { //页面的默认样式
"navigationBarTextStyle": "black", //导航栏标题颜色及状态栏前景色（white/black）
"navigationBarTitleText": "演示", //导航栏文字内容
"navigationBarBackgroundColor": "#F8F8F8", //导航栏背景色
"backgroundColor": "#F8F8F8", //下拉显示窗口背景色
"usingComponents":{ //引用小程序组件
"collapse-tree-item":"/components/collapse-tree-item"
},
"renderingMode": "seperated", // 仅微信小程序，webrtc 无法正常时尝试强制关闭同层渲染
"pageOrientation": "portrait"//横屏配置，全局屏幕旋转设置(仅 APP/微信/QQ小程序)，支持 auto / portrait / landscape
},
"tabBar": { //底部tab的表现
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "50px",
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "3px",
"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": "接口"
}],
"midButton": {
"width": "80px",
"height": "50px",
"text": "文字",
"iconPath": "static/image/midButton_iconPath.png",
"iconWidth": "24px",
"backgroundImage": "static/image/midButton_backgroundImage.png"
}
},
"easycom": { //组件自动引入规则
"autoscan": true, //是否自动扫描组件
"custom": {//自定义扫描规则
"uni-(.*)": "@/components/uni-$1.vue"
}
}
}2.跳转，传参与接收
1.链接跳转
官网 - uni-app官网
传参 地址?参数名=参数值&参数名=参数值
属性：open-type 可以选择跳转方式
2.点击等事件触发跳转
官网 - uni-app官网
注意:跳转的路径为非tabbar的页面路径
uni.navigateTo({
url: 'test?id=1&name=uniapp'
});3.接收
在生命周期中接收
onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数
console.log(option.id); //打印出上个页面传递的参数。
console.log(option.name); //打印出上个页面传递的参数。
}3.解决跨域问题
跨域问题和vue的解决利用代理一样，只是uniapp配置的地方不同
"h5" : {
"optimization" : {
"treeShaking" : {
"enable" : false
}
},
"devServer" : {
"disableHostCheck" : true,
"port" : "8081",
"proxy" : {
"" : {
// "target" : "http://20.4.5.35", //生产环境
"target" : "http://192.168.1.107:8083",
// "target" : "http://211.92.134.56:8282",
"changeOrigin" : true
}
}
},
"domain" : "www.test.test"
}4.利用原生实现上传附件
uniapp的上传_哆来A梦没有口袋的博客-CSDN博客
5.富文本上传视频等和回显
富文本其实uniapp也是有自己的组件，但是值得悲伤的是，uniapp自带的组件在app是不支持视频上传和解析(rich-text)的（uni-app官网），其实也有很多现有的封装好的组件不满足需求
因此这里借用了wangEdtior进行上传，利用原生代码进行解析回显
wangEditor上传视频在h5是可以的，在app需要修改源码支持，这里就友情提示，可以根据上传图片进行修改上传视频
上传的案例
{{item.substr(item.lastIndexOf('\\') + 1)}}
视频图片等富文本的回显 - 同样是利用renderjs,原生解析，与上传附件类似
6.实现下拉刷新
pages里面配置
{
"path": "pages/commonComponents/DynamicForm/index", //公共表单首页
"style": {
"enablePullDownRefresh": true, //可以下来刷新
"titleNView": {
"titleColor": "#ffffff",
"titleText": "",
"backgroundColor": "#186ff2"
},
"navigationStyle": "default",
"pullToRefresh": { //下来刷新样式
"support": true,
"style": "default",
"offset": "70px",
"color": "#007AFF",
"contentdown": {
"caption": ""//下拉可刷新自定义文本
}
}
}
},页面进行监听
onPullDownRefresh(){
// console.log('onpull')
if(this.TabCur == 0){
uni.stopPullDownRefresh()
return
}
this.$nextTick(() => {
this.$refs.approvalDate.getList();
setTimeout(() => {
uni.stopPullDownRefresh()
})
})
},如果还是不能实现，可以看看最后的那个文章，scroll-view和原生下拉刷新不能混动哦
7.实现分页（下拉下一页）
实现下拉下一页，主要就是下面这个监听回调-一旦到了底部，就page+1就行了
下面是实现得代码
//触底继续下拉刷新
onReachBottom() {
this.getList();
},
methods:{
//获取列表
async getList() {
//是否为最后一页
if (!this.isLastPage) {
this.loading = true
// console.log(this.policyParams, 'xxxx')
let res;
if (this.isAuth) {
res = await policyApi.qryQList(this.policyParams)
} else {
res = await policyApi.qryList(this.policyParams);
}
this.loading = false;
if (res.list && res.list.length > 0) {
this.favourable = this.favourable.concat(res.list);
this.policyParams.pageNum = res.nextPage;
this.isLastPage = res.isLastPage;
}
}
}
}8.查看图片和富文本
主要是利用自带得两个api-uni.previewImage,uni.openDocument
export function searchPdf(url) {
if (url.includes('jpeg') || url.includes('jpg') || url.includes('png')) {
uni.previewImage({
urls: [url],
fail: () => {
console.log("预览图片失败", JSON.stringify(err))
uni.showToast({
title: '预览图片失败',
icon: 'none'
});
},
success(index, tapIndex) {
console.log("预览图片成功", index, tapIndex)
}
});
return
} else {
uni.showLoading({
icon: 'loading',
title: '正在打开，请等待'
});
uni.downloadFile({
url: url,
fail: () => {
uni.hideLoading()
uni.showToast({
title: '预览文件失败',
icon: 'none'
});
},
success: function(res) {
console.log(res, 'res')
var filePath = res.tempFilePath;
console.log(filePath, 'folefasa',filePath)
uni.openDocument({
filePath: filePath,
success: function(res) {
console.log("预览文件成功", res)
uni.hideLoading();
},
fail(err) {
console.log("预览文件失败", err)
uni.hideLoading();
uni.showToast({
title: '预览文件失败',
icon: 'none'
});
}
});
},
})
}
}
9.微信授权登录
超详细的uniapp实现微信登录功能_哆来A梦没有口袋的博客-CSDN博客_uniapp 微信登录
10.APP检测是否是最新版本号
检查最新版本号，一般是在App.vue的onLauch生命周期，获取版本号并检测是否是最新版本号吗，提示用户是否需要更新
onLaunch: function() {
let that = this
//#ifdef APP-PLUS
plus.runtime.getProperty(plus.runtime.appid, function(wgtinfo) {
// 获取 app的version
let appversion = wgtinfo.version;
// 调取接口查询版本号
let url = 'http://222.180.163.242:9769'
uni.request({
url: `${url}/tsAdmin/wxApp/checkAppUpdate`,
method: 'GET',
success: (result) => {
if (result.data.code == 'rest.success') {
let info = result.data.result;
// 版本号不一致
if (info.versionText !== appversion) {
uni.showModal({ //提醒用户更新
title: "更新提示",
content: "已有新版本，请确认是否更新",
success: (res) => {
//点击确认
if (res.confirm) {
//浏览器打开下载地址
plus.runtime.openURL(`${url}/tsAdmin/wxApp/downloadApp?url=${info.path}`)
}
}
})
}
}
},
fail:(err)=> {
console.log(err,'err')
}
})
});
//#endif 11.分享
分享是常见的app的功能
官网对于分享的讲解很详细
uni-app官网
这里讲一下其他的分享 - 微信小程序分享
微信的button加一个open-type="share"，立即会实现分享功能，什么也不用写
这样子的分享，会分享当前页面，有微信的默认样子
点击会自动进入分享页面
但是其实有时候我们分享出去的页面，想跳转的并不是当前点击页面，应该怎么做
可以监听点击分享
onShareAppMessage(res) {
return {
title: '分享注册就领现金红包，提现不设限，最高200元',
path: '/share/open'
}
}这个时候在点击分享链接进入的就是path - share/open啦
12.H5中使用高德地图
uniapp使用H5高德地图_哆来A梦没有口袋的博客-CSDN博客
13. H5中高德地图实现uni.chooseLcation
H5实现高德地图的uni.chooseLocation_哆来A梦没有口袋的博客-CSDN博客
当然，uniapp还有一个小坑在里面。uniapp的那些坑_哆来A梦没有口袋的博客-CSDN博客_uniapp的坑有哪些 ，这篇博客写了在项目中遇到的一些问题
文章持续更新中