六一收到个不同以往的需求,我的指导老师最近有点忙,让我们帮忙做一个可以通过二维码预览视频的小程序 收到需求后,因为只是临时用一下,不打算写一套完整的系统,所以大概的思路就是,其他成员将视频通过ftp传入我的服务器上 ,我通过uniapp将视频路径写死在index页面上,跳转时将url中的参数传入到下一个页面即可,视频播放页面通过拼接路径最后得到完整的src资源文件,在写入data完成渲染即可,同理在点击生成二维码时将参数带着去新的页面进行处理 url=4.mp4"}, {"name":"环境保护相关视频或垃圾分类","url":"/pages/video/video? url=5.mp4"}, {"name":"消防人员负重前行的相关","url":"/pages/video/video? 资源渲染后即可直接播放,这部分的代码找了好久,起初以为uniapp没有支持网页播放的能力,需要用第三方的。
limit = 5242880 }) { console.log("uploadFile: ", { file, module, response }) // 限制5M console.error } console.log(options) uni.uploadFile(options) }).catch(console.error) } } 然后是视频上传 res.size }, { contentType: 4 }); // } // }); // } // }); console.log('视频大小
uniapp 和 HTML5 区别:1、uniapp 是一个使用 Vue.js 开发所有前端应用的框架,而 HTML5 是构建 Web 内容的一种语言描述方式;2、uniapp 不支持 dom 操作, 而 H5 端有 dom 对象;3、uniapp 不支持过滤器等等。 uniapp 支持跨移动端开发,如果只做 H5 端,用 uniapp 其实和用 vue 开发没什么区别,vue 能用的插件,uniapp 也能用。 一、标签的差异 二、组件的差异 三、JS 的变化 四、主要区别 uniapp 和 h5 主要区别在于 uniapp 不支持 dom 操作(H5 端有 dom 对象)、不支持过滤器,这和微信小程序是一致的 五、共同点 1、uniapp 和 h5 共同的优点:一端多用,做单一品种比较不错,简单方便,小巧。 2、uniapp 和 h5 共同的缺点:与原生相比性能上目前是不可跨越的鸿沟。
放置到服务显示空白页面 发现图片和css等请求的路径不对 需要加路径配置的代码 publicPath默认是根目录 所以会造成请求不到文件的困扰 请求成功
前言 最近在做H5号码认证无感登录,发现市场上的H5登录文档不健全,没有适合uniapp的,综合对比了多家,找了一家个推的接入,由于SDK、demo都是H5,精力有限,于是打算通过H5完成认证,通过回调数据发送给 Uniapp进行验证 演示 该页面为webview加载的网页,通过点击网页的“网页跳转”可以操作uniapp进行跳转,来到第二张图 可通过id传参,但是这里没有渲染出来 h5 <! 网络网页</title> <style type="text/css"> .btn { display: block; margin: 20px auto; padding: 5px }); }); </script> </body> </html> index.vue <template> <view> <web-view src="https://******/h<em>5</em>authlogin console.log(options.id) }, methods: { } } </script> 存储 来到新的页面后进行接收,将数据进行本地存储,或者进行业务逻辑判断,H<em>5</em>的
uni-app在打包成h5时,默认是不支持直接打开的,因为打包出来是 (/xxx/xxx)这种格式,这点和vue-cli3.0是一致的,在用vue-cll3.0时打包我们会想到在vue.config中配置 publicPath,把它配置成(./),但是你在uni-app中是找不到这个文件的,其实在uni官网是有提到publPath,但是说的并不明确(https://uniapp.dcloud.io/collocation id=publicpath) 如果我们想打包成直接浏览的h5,我们需要配置manifest.json这个文件,在其中的h5配置中加入publicPath配置,配置如下: 代码为: "h5
h5配置 打开HBuilder X中的manifest.json,点击 h5配置 配置页面标题 路由模式,hash和history,二选一 然后点击发行,选择 网站-PC,弹出对话框 填写网站标题,域名可以不填
最近搞了一个有意思的小工具——短视频去水印解析器!这玩意儿可以把短视频中的水印给抹掉,还能提取视频、封面等资源。整个项目用了 Uniapp 开发,做完后体验了一下,发现还挺顺手。 今天就来跟大家聊聊实现思路和代码细节~需求分析我们的目标是做一个简单易用的小工具,支持以下功能:输入短视频链接,识别并解析出视频内容。展示视频信息:视频封面、作者信息、标题等。 调用视频解析函数:识别到 URL 后,就调用 fetchVideoData,尝试解析视频信息。 display: flex; flex-direction: column; align-items: center; padding: 20rpx; background-color: #f5f5f5 下面是效果展示:总结整个过程还是蛮顺畅的,主要是借助了 Uniapp 和现成的视频解析 API 来实现短视频去水印解析的核心功能。
最近搞了一个有意思的小工具——短视频去水印解析器!这玩意儿可以把短视频中的水印给抹掉,还能提取视频、封面等资源。整个项目用了 Uniapp 开发,做完后体验了一下,发现还挺顺手。 今天就来跟大家聊聊实现思路和代码细节~ 需求分析 我们的目标是做一个简单易用的小工具,支持以下功能: 输入短视频链接,识别并解析出视频内容。 展示视频信息:视频封面、作者信息、标题等。 调用视频解析函数:识别到 URL 后,就调用 fetchVideoData,尝试解析视频信息。 display: flex; flex-direction: column; align-items: center; padding: 20rpx; background-color: #f5f5f5 下面是效果展示: 总结 整个过程还是蛮顺畅的,主要是借助了 Uniapp 和现成的视频解析 API 来实现短视频去水印解析的核心功能。
测试要在真机测试,微信开发者工具不能测试 video 支持 App平台: 支持本地视频(mp4/flv)、网络视频地址(mp4/flv/m3u8)及流媒体(rtmp/hls/rtsp)。
,允许读写系统设置项 android.permission.READ_PHONE_STATE,允许读取手机通话状态 android.permission.READ_CALL_LOG,允许读取通话记录(uniapp 开发指南:https://uniapp.dcloud.net.cn/plugin/uts-plugin.html 2.问题记录 scss文件在App.vue内引入无效(未设置scope),单个组件内引入有效 ,原因未知; uniapp 不支持* css选择器。
方案一:切换hash模式 方案二:后端写伪静态 伪静态场景和示例: 场景:uniapp转的h5部署到站点下的public目录下的word文件夹中 访问路径示例:http://chat.mryxh.cn/ word 这个还正常 但是访问子路径就会出现和tp5的路由冲突的现象 比如http://chat.mryxh.cn/word/pages/my/vip 此时设置下ngingx伪静态就可以了 location uniapp 支持两种路由跳转模式:hash 和 history。默认使用 hash 模式,使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。 nginx location / { try_files $uri $uri/ /index.html; } 比如 uniapp 的 H5 配置: nginx 配置如下,只影响网站下某个目录: location 路由模式 history 和 hash 区别(解决tp5和uniapp h5路由冲突的问题)
,一个是H5.,一个是小程序,接下来开始正文 1.打包为原生App 在HBuilderX工具栏,点击发行,选择原生app-云端打包,如下图: img 出现如下界面,点击打包即可。 打包成功 image-20220126000836136 2.发布为H5 1.在 manifest.json 的可视化界面, 进行如下配置(发行在网站根目录可不配置应用基本路径),此时发行网站路径是 www.xxx.com/h5,如:https://hellouniapp.dcloud.net.cn。 image-20220126001339686 2.在HBuilderX工具栏,点击发行, 选择网站-H5手机版,如下图,点击即可生成 H5 的相关资源文件,保存于 unpackage 目录。 具体的配置,可以参考网上的分享:https://juejin.im/post/5af003286fb9a07aac24611b 3.发布为小程序 发布为微信小程序: 1.申请微信小程序AppID, 参考
找到manifest.json的文件 打开源码,在里面加一栏h5的配置 如下图 image.png 接下来在自己所需要请求的页面填写请求 image.png
做了个分享微信公众号文章的h5界面,http://mp.sscai.club/(只能微信浏览器打开),其中用到了统计代码,记录如下。 -- built files will be auto injected --> </body> </html> 3、配置模版代码 依次进入 pages.json > 源码视图 > h5(最下方
简单介绍 基于 uni-app 开发的微信小程序下载视频功能 下载视频 简单写法 uni.downloadFile({ url: 'http://wxsnsdy.tc.qq.com/105/20210 '下载成功', icon: 'success', }) } }) } }) 这种写法有点问题, 第一 如果视频文件过大 或者网络状态不佳, 没有提示,不知道当前下载进度,不友好 第二 当响应头中 content-type 为以下 值时 Content-Type: application/octet-stream ios 端下载视频会有问题 uni.showToast({ icon:'loading', mask:true, title: res.progress + "%" }) } 第二个问题 兼容 苹果端小程序视频下载 ) 3.需要用到小程序的 获取全局唯一的文件管理器的api getFileSystemManager 4.还有删除文件的api FileSystemManager.unlink 具体实现 // 下载视频
Uni-liveshow直播室是一个基于vue+Nvue+uniapp技术开发的集仿制抖音小视频/App聊天/直播功能混合项目。可实现类似抖音上下滑动切换视频播放,支持编译到多端。 效果展示: 未标题-1.png 技术栈: 编辑器+技术:HBuilderX + vue/NVue/uniapp/vuex iconfont图标:阿里字体图标库 自定义导航栏 + 底部Tabbar 弹窗组件 :uniPop(uni-app封装自定义Modal弹窗) 测试环境:H5端/小程序/App端/真机 公共组件及样式引入: /** * @desc uni-app主入口页面 * @about 仿抖音实现 uniapp+swiper+nvue技术实现仿抖音界面上下滑动切换视频效果,并且有点赞、评论及商品等功能,可以单击、双击判断。 <view class="kw" v-for="(kwItem,kwIndex) in item.keyword" :key="kwIndex"><text class="bold fs_18 mr_<em>5</em>"
一、主域名或者子域名独立站点 1.首先在HbuilderX里点击【manifest.json】,然后选择【h5配置】,然后【路由模式】选择history模式(因为微信支付等场景不支持hash模式) 2 .点击HbuilderX的【发行】菜单,在下拉框中点击【网站-h5-手机版(仅适用于uni-app)】,这时候会出现控制台TAB,等待打包完成会提示类似【项目 'xxx'导出h5成功,路径为:/Users /jry/Documents/www/xxx/unpackage/dist/build/h5】 3.把上一步的h5整个目录传到linux服务器比如/home/ly/www/下面 4.新建一个ngxin 配置文件命名为【h5.conf】,配置文件内容如下: server { listen 80;#默认端口是80,如果端口没被占用可以不用修改 server_name m.xxx.com; #access_log logs/host.access.log main; root /home/ly/www/xxx/h5;
# uniapp中实现h5扫码功能(优化版) 图片 前言 原本是使用uniapp开发微信小程序,扫码功能非常好实现。 但是由于业务原因,需要将小程序转换成H5的方式,发现 uni.scanCode 方法不好用了。 网上查询多个解决方案,但是由于我们的二维码过于复杂。 扫码主要流程为: 首先需要通过微信打开H5页面。 进入扫码页面,扫码页面加载完成时,前端向服务端请求config信息。 String signature = WeixinUtil.SHA1(str); // 返回前端结果 Map<String,String> map=new HashMap<>(5) , duration: 2000, icon: "none" }); } }); } #5.
一日一工具|Python实现5行代码生成短链 使用基于Python的pyshorteners包进行短链的创建操作, 要注意的是,pyshorteners并不是服务端,而是聚合了当前市面上很多可以生成短链的在线服务的 pyshorteners代码仓库 官方文档 文档中代码生成图片使用工具 具体使用场景 pyshorteners提供了18种短链根域名供使用,作者提供了口子,如果你有发现比较好用在线短链服务的也可以贡献代码 436c-a755-a62315779f2c.png] 使用 [d4a7e3e7-ae9f-40f3-9ebb-318b05b481f9.png] [076def80-0859-49d0-bdb6-f5a813628f87 .png] 总结 有的时候内部分享或落库的链接为了美观或占用空间尽可能小的情况,短链服务就能产生功效~ 换个角度来说,很多时候公司里都会使用自己的短链服务,因为涉及到短信的投递,营销类的短信多半都需要带链接的