推广 热搜: page  音视频  使用  选择  搜索引擎  百度  企业  可以  个数  父亲 

uniapp实现常用功能

   日期:2025-01-03     作者:czdytfhm4    caijiyuan   评论:0    移动:http://ww.kub2b.com/mobile/news/19679.html
核心提示:目录1.pages.json  pages.json - 单独配置某个页面的导航栏显示 1.设置基本导航栏 2.配置文件,设置某个文件不显示顶部导

目录

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的坑有哪些 ,这篇博客写了在项目中遇到的一些问题

本文地址:http://ww.kub2b.com/news/19679.html     企库往 http://ww.kub2b.com/ ,  查看更多

特别提示:本信息由相关用户自行提供,真实性未证实,仅供参考。请谨慎采用,风险自负。

 
 
更多>同类最新文章
0相关评论

文章列表
相关文章
最新动态
推荐图文
最新文章
点击排行
网站首页  |  关于我们  |  联系方式  |  使用协议  |  版权隐私  |  网站地图  |  排名推广  |  广告服务  |  积分换礼  |  网站留言  |  RSS订阅  |  违规举报  |  鄂ICP备2020018471号