全部 HTML CSS JavaScript javascript高性能 javascript语言精粹 SASS UNI-APP 重学前端锋利的JQuery 高级web标准解决方案 Bootstrap4 Layui 实例 konva库 UIKit LESS TypeScript 前端基础建设与架构设计模式 JavaScript模式前端功能你不知道的JavaScript

分类：UNI-APP

封装一个dialog弹窗组件

木灵鱼儿 9月前 UNI-APP

封装一个dialog弹窗组件

需求看了半天uniapp官方提供的插件，发现就是没有dialog弹窗的封装，有点难受，这个弹窗其实用的地方还挺多的，但是uni-popup组件的用法实在是有点粗暴啊，需要通过ref获取popup组件实例，操作组件实例的open和close方法实现开关，和我们日常的v-model绑定差了好多，于是自己想着造一个。在网页端我们watch监听props的变量，然后在nextTick会调中使用popup组件实例是没有问题的，但是在微信小程序中发现这个方法有一个问题？如果我这个弹窗默认就是true打开的状态，那么在watch中即便使用了nextTick我们也无法获取到组件的实例，这个不知道...

936 0 2

dialog 弹窗组件

封装uni.request api为类似axios的用法

木灵鱼儿 9月前 UNI-APP

封装uni.request api为类似axios的用法

前言 uniapp的请求都是通过uni.request的api实现的，但是这个api和前端常用的axios库用法上有着太多的不同了，移植起来非常痛苦，所以萌生了自己造一个轮子的想法，由于本人技术菜鸡，只能浅浅的仿照一个了。实际上本人喜欢axios的config的方式调用请求，如下： axios({ method: 'post', url: '/user/12345', data: { firstName: 'Fred', lastName: 'Flintstone' } }); 所以大体上都是围绕这种用法展开工作的。首先...

1039 0 1

axios 拦截器取消请求

uni 上传文件

木灵鱼儿 3年前 UNI-APP

uni 上传文件

非H5端用uni的api，比如上传图片就用uni.chooseImage，通过配置一些基本设置，回调函数会返回一个本地的地址段，然后通过uni.uploadFile将文件上传。 uni.uploadFile有回调函数，并且支持H5，所以H5端如果要做上传，我们可以直接使用file的input元素。官方制作的demo app hello uni-app 这个app里面有一些功能模块的预览，看视频说是有一个裁剪图片的组件，找了半天没找到，有兴趣的可以去看看。

1724 0 0

uni 非H5微信小程序多端登录

木灵鱼儿 3年前 UNI-APP

uni 非H5微信小程序多端登录

首先你需要在manifest.json里面配置对应的登录的key那些。配置完毕，函数流程如下用户点击一个按钮，判断这个按钮是什么登录，比如是QQ 触发uni.login()方法，它的provider为qq，然后在回调里面则表示登录成功，但是还不能拿到用户的信息。在回调里面调用 uni.getUserInfo();它的provider为qq，然后在回调函数success里面，接受一个对象，这个对象里面就包含了用户的信息。基本上这些第三方登录，都会有一个唯一的id返回给你，后端可以利用这个唯一的id来判断用户是否已经注册了或者其他。然后还可以进行关联，比如将getUserInfo获...

1954 0 0

uni 微信登录

木灵鱼儿 3年前 UNI-APP

uni 微信登录

首先button获取用户基本信息： <button type="primary" open-type="getUserInfo" @getuserinfo="getUserInfo">登录</button> open-type="getUserInfo" 获取用户信息，可以从@getuserinfo回调中获取到用户信息，包括头像、昵称等信息（微信小程序、百度小程序、QQ小程序） @getuserinfo用户点击该按钮时，会返回获取到的用户信息，从返回参数的detail中获取到的值同uni.getUserInfo（微信小程序） getUserInfo函数接收到...

2431 0 0

uni h5端+小程序实现多端下载

木灵鱼儿 3年前 UNI-APP

uni h5端+小程序实现多端下载

uni不支持h5下载，因为其api不支持，所以我们只能用h5的办法来解决这个问题。最简单的办法就是利用a链接，因为只用处理手机端，所以本来更合适pc+移动端的axios方案可以不用。封装一个下载方法： saveFile: function(url, success) { const dA = document.createElement("a"); dA.download = ''; // 设置下载的文件名，默认是'下载' dA.href = url; document.body.appendChild(dA); dA.click(); ...

2609 0 0

多端下载

uni h5端使用video.js

木灵鱼儿 3年前 UNI-APP

uni h5端使用video.js

官方最近更新了使用文档，所以本文提供的方法可能不是有效的，反正就自己摸索吧，大概原理，看一遍应该就明白，悟性很重要，教程的更新肯定不如人家开发的快，吸取经验就行了。 uni的h5端video组件，它不支持hsl视频格式，但是目前来说， m3u8格式文件是个常用性较多的了，所以我研究了下uni怎么弄。首先，官方要求需要创建一个html文件，这个文件和vue-cli的index.html异曲同工，而且位置还可以自由设置，按照开发尿性，放项目根目录应该算是合理的路径了。内容的话直接copy官方提供的就行了，顺带官方连cdn引入video都弄好了。官方文件 index.html创建好后...

7913 0 5

video.js

分类：UNI-APP

封装一个dialog弹窗组件

封装uni.request api为类似axios的用法

uni 上传文件

uni 非H5微信小程序多端登录

uni 微信登录

uni h5端+小程序实现多端下载

uni h5端使用video.js

最近评论

博客文章RSS订阅

博客评论RSS订阅

登录

分类：UNI-APP

封装一个dialog弹窗组件

封装uni.request api为类似axios的用法

uni 上传文件

uni 非H5微信小程序多端登录

uni 微信登录

uni h5端+小程序 实现多端下载

uni h5端使用video.js

最近评论

博客文章RSS订阅

博客评论RSS订阅

uni h5端+小程序实现多端下载