目录
1.pages.json
pages.json - 单独配置某个页面的导航栏显示
1.设置基本导航栏
2.配置文件,设置某个文件不显示顶部导航栏
3.导航栏左边部分显示文字或图标
2.跳转,传参与接收
1.链接跳转
2.点击等事件触发跳转
3.接收
3.解决跨域问题
4.利用原生实现上传附件
5.富文本上传视频等和回显
6.实现下拉刷新
7.实现分页(下拉下一页)
8.查看图片和富文本
9.微信授权登录
10.APP检测是否是最新版本号
11.分享
12.H5中使用高德地图
13. H5中高德地图实现uni.chooseLcation
官网地址: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对单个页面的配置,可以配置是否显示顶部导航栏等
1.设置基本导航栏
(1)基本配置
(2)动态修改配置
2.配置文件,设置某个文件不显示顶部导航栏
3.导航栏左边部分显示文字或图标
pages的配置:
页面监听触发
types在官网的配置文档 - uni-app官网
可以进行自定义按钮 -
设置导航栏左边部分
下面是一个例子,基本满足普通项目需求的配置
官网 - uni-app官网
传参 地址?参数名=参数值&参数名=参数值
属性:open-type 可以选择跳转方式
官网 - uni-app官网
注意:跳转的路径为非tabbar的页面路径
在生命周期中接收
跨域问题和vue的解决利用代理一样,只是uniapp配置的地方不同
uniapp的上传_哆来A梦没有口袋的博客-CSDN博客
富文本其实uniapp也是有自己的组件,但是值得悲伤的是,uniapp自带的组件在app是不支持视频上传和解析(rich-text)的(uni-app官网),其实也有很多现有的封装好的组件不满足需求
因此这里借用了wangEdtior进行上传,利用原生代码进行解析回显
wangEditor上传视频在h5是可以的,在app需要修改源码支持,这里就友情提示,可以根据上传图片进行修改上传视频
上传的案例
视频图片等富文本的回显 - 同样是利用renderjs,原生解析,与上传附件类似
pages里面配置
页面进行监听
如果还是不能实现,可以看看最后的那个文章,scroll-view和原生下拉刷新不能混动哦
实现下拉下一页,主要就是下面这个监听回调-一旦到了底部,就page+1就行了
下面是实现得代码
主要是利用自带得两个api-uni.previewImage,uni.opendocument
超详细的uniapp实现微信登录功能_哆来A梦没有口袋的博客-CSDN博客_uniapp 微信登录
检查最新版本号,一般是在App.vue的onLauch生命周期,获取版本号并检测是否是最新版本号吗,提示用户是否需要更新
分享是常见的app的功能
官网对于分享的讲解很详细
uni-app官网
这里讲一下其他的分享 - 微信小程序分享
微信的button加一个open-type="share",立即会实现分享功能,什么也不用写
这样子的分享,会分享当前页面,有微信的默认样子
点击会自动进入分享页面
但是其实有时候我们分享出去的页面,想跳转的并不是当前点击页面,应该怎么做
可以监听点击分享
这个时候在点击分享链接进入的就是path - share/open啦
uniapp使用H5高德地图_哆来A梦没有口袋的博客-CSDN博客
H5实现高德地图的uni.chooseLocation_哆来A梦没有口袋的博客-CSDN博客
当然,uniapp还有一个小坑在里面。uniapp的那些坑_哆来A梦没有口袋的博客-CSDN博客_uniapp的坑有哪些 ,这篇博客写了在项目中遇到的一些问题