uniapp框架零基础到开发应用详细教程
本专栏适合新手或者对uniapp感兴趣的小伙伴,从零开始指导学习和搭建 uni-app 框架,针对框架进行二次封装并研发,实现一套代码兼容H5,小程序,APP等各端应用,订阅专栏可联系我交流学习。
优惠券已抵扣
余额抵扣
还需支付
¥49.90
¥99.00
购买须知?
本专栏为图文内容,最终完结不会低于15篇文章。
订阅专栏,享有专栏所有文章阅读权限。
本专栏为虚拟商品,基于网络商品和虚拟商品的性质和特征,专栏一经购买无正当理由不予退款,不支持升级,敬请谅解。
a_靖
大前端,全栈工程师
展开
-
H5本地调试微信静默授权、授权获取用户信息
1. 申请测试账号跳转本地调试或者测试环境调试2.拼接自动跳转官方文档下面的参数换成你的,redirect_uri 需要是上图配置的网址下面的地址。我弄出来的本地连接测试:https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxb5de9432888975bf&redirect_uri=http%3A%2F%2F192.168.8.87%3A8080%2F%23%2F&respons...原创 2021-03-08 18:24:29 · 4236 阅读 · 0 评论 -
uniapp自定义导航栏样式,自定义导航栏组件使用说明,兼容小程序和H5及各端
1. 使用colorui UI库下载coloruiui库-[github](https://github.com/weilanwl/ColorUI);下载好之后放在components 目录2.在 components 目录创建tabbar.vue 文件,里面代码是:<template> <view class="cu-bar tabbar bg-white shadow foot"> <view class="action" @click="...原创 2021-01-04 18:57:59 · 5280 阅读 · 0 评论 -
uniapp(一) 项目架构,封装
前言:最近需要搭建一套基于uniapp 的代码模板,适应各平台的快速打包部署,为提高代码复用率,提升生产力,所以需要构建一套优雅的前端项目架构,下面分享记录一下我的封装。代码封装我暂时分为三个层面:1 底层的封装缓存处理,第三方API封装,用户信息鉴权处理,网络请求,应用配置,数据统计,数据埋点,全局page对象劫持封装,通用工具类封装(时间处理,通配符取参,文件下载,上传,加密,解密,长链接,音视频播放器),WebRTC(网页实时通信技术),webview通讯释:这个层面基本都是.原创 2020-10-24 17:55:56 · 5093 阅读 · 2 评论 -
canvas绘制海报分享,海报中设置圆角二维码
canvas绘制海报分享,海报中设置圆角二维码,背景图,动态的文字,绘制完成以后保存为图片,可长按分享海报图片。原创 2022-08-25 16:09:55 · 2217 阅读 · 0 评论 -
样式集(13)自定义picker滚动选择器样式
自定义picker滚动选择器样式,样式可以随意修改,运行环境支持H5,小程序,APP原创 2022-08-08 14:59:40 · 2449 阅读 · 0 评论 -
marquee 循环空白解决方案完整代码+效果图
跑马灯无间隙无效循环滚动效果图:本篇文章要实现的是跑马灯无间隙无效循环滚动;marquee 标签滚动完一次以后,第二次会空白一个屏幕宽度才开始,而我们的需求是接在后面马上开始。我在网上找了一圈,没有发现能满足需求的属性,于是自己写逻辑了。注释:以下代码块的内容部分,应该填充跑马灯需要滚动的内容,自己随便填充。示例:我的是for循环遍历的内容默认跑马灯代码(如果可以接受有留白,用这代码就行,不用往后看)<marquee direction="left".原创 2022-05-06 20:27:13 · 3009 阅读 · 0 评论 -
折线图表动画(历史进程效果)
代码环境:uniapp秋云uCharts图表组件https://demo.ucharts.cn/#/代码说明:在插件市场导入插件秋云 ucharts echarts 高性能跨全端图表组件 - DCloud 插件市场 uCharts v2.3上线,支持nvue!全新官方图表组件,支持H5及APP用ECharts渲染图表,uniapp可视化首选组件https://ext.dcloud.net.cn/plugin?id=271使用插件uCharts动态可视化配置图表,然后拿到配置的代码放在自己项...原创 2021-11-15 18:43:18 · 2204 阅读 · 0 评论 -
uniapp富文本兼容视频实现方案
使用mp-html 富文本插件,就可以支持富文本内的视频播放。安装:npm install mp-html使用方法<template> <view> <mp-html :content="html" /> </view></template><script> import mpHtml from '@/components/mp-html/mp-html' export default.原创 2021-10-14 10:50:24 · 4196 阅读 · 0 评论 -
uniapp移动端H5在线预览PDF等文件实现源码及注解
uniapp移动端H5预览文件实现分为两个场景处理:(这里以预览PDF文件为示例,在线预览就是查看网络文件)1. IOS客户端预览PDF文件IOS客户端预览PDF文件可以通过跳转文件地址实现预览,因为苹果手机的浏览器自带阅读器2. 安卓客户端预览PDF文件安卓客户端需要在源码添加一个插件来实现文件在线预览。添加插件步骤,下载插件,放导static目录下。如图所示:下面是实现示例代码:<view class="card p_r" @click="openF.原创 2021-10-13 15:25:47 · 5491 阅读 · 1 评论 -
小程序在canvas上层做图片滚动
实现该功能踩过的坑1.swiper的swiper-item中image图片无法在canvas的上层显示,会被canvas 覆盖2.swiper的swiper-item 里面放cover-image 会样式错乱3.scroll-view里面放cover-image 会样式错乱解决方案:使用CSS样式实现,超出部分隐藏,显示滚动条 <cover-view class="popupCrad"> <cover-image class="popupCrads"..原创 2021-05-11 15:11:25 · 2120 阅读 · 0 评论 -
uniapp H5文件预览,PDF预览
1.下载点击跳转下载2.解压,拷贝build和web目录到你的项目目录下3.使用pdf.js时,当有跨域的问题时,会加载失败,错误信息为file origin does not match viewer's。修改起来简单粗暴。直接注释掉web/viewer.js中的以下代码,不去判断跨域即可。(搜索viewerOrigin能搜索到)if (origin !== viewerOrigin && protocol !== 'blob:') { th...原创 2021-04-13 18:00:14 · 6507 阅读 · 2 评论 -
uniapp实现页面左右滑动,上下滑动事件
实现代码:<view class="" @touchstart="touchstart" @touchend="touchend"></view>data() { return { touchData: {}, //滑动事件数据 }}methods: { touchstart(e) { this.touchData.clientX = e.changedTouches[0].clientX; this.touchData.client原创 2021-04-12 11:40:34 · 7289 阅读 · 1 评论 -
u-charts 曲线图中间有部分没数据,导致点和点无法连成线的问题解决
解决曲线图或者折线图在两端中间没有数据时无法绘画成线的问题源码修改,解决方案:在数据之间填充假数据,并且创建一个和点的数据同级的 list 来验证是不是假数据,如果是假数据就不绘制点,是真数据才绘制点,达到点和点之间没数据但是能连线的效果先看效果图:数据格式:我这里是用 grow_info 里面的id来判断是不是真数据,有id就是真数据,否则就是假数据解决:在u-charts源码里面找到drawMixDataPoints 方法,然后在这个方法里面找到调用drawPoint..原创 2021-03-30 16:12:17 · 2752 阅读 · 0 评论 -
CSS动画效果无限循环放大缩小
效果图:CSS动画效果无限循环放大缩小<image class="anima" mode="widthFix" @click="nav" src="@/static/1_btn.png"></image> .anima { animation-name: likes; // 动画名称 animation-direction: alternate; // 动画在奇数次(1、3、5...)正向播放,在偶数次(2、4、6...)反向播放。 animat原创 2021-03-15 16:45:17 · 7345 阅读 · 2 评论 -
曲线图实现,可滚动曲线图,自定义数据
实现可以拖动的曲线图,自定义X轴数据的缩进,自定义X轴显示多少格。效果图数据格式,数据说明代码可见曲线图实现u-charts.js 可以在官网下载<template> <view class="qiun-columns"> <view class=""> <view class="qiun-bg-white qiun-title-bar qiun-common-mt"> <view class="q..原创 2021-03-10 16:59:21 · 2136 阅读 · 0 评论 -
H5 自动播放背景音频,兼容安卓和苹果手机, ios createInnerAudioContext 无法自动播放解决
原因应该是IOS不允许自动播放音频,需要与用户有交互,就是用户点击一下之后,再调用就可以了在main.jsVue.prototype.playAudio = function(audioUrl) { var innerAudioContext = null; innerAudioContext = uni.createInnerAudioContext(); //创建播放器对象 innerAudioContext.autoplay = false; innerAudioContext原创 2021-03-03 12:23:50 · 5565 阅读 · 2 评论 -
终止forEach的循环
上代码:let list=[1,2,3]try { list.forEach(item => { if (item==1) { console.log('等于1就跳出循环') throw new Error("EndIterative"); } })} catch (e) {}原创 2021-02-25 16:23:56 · 5492 阅读 · 0 评论 -
uniapp 下拉刷新和上拉加载更多
uniapp 下拉刷新和下拉加载更多实现代码,兼容小程序,H5,app,真机测试可用。实现代码1.在页面写这两方法,分别是下拉刷新和下拉触底的监听事件 // 下拉刷新 onPullDownRefresh() { console.log('下拉刷新') setTimeout(() => { console.log('下拉刷新停止') uni.stopPullDownRefresh() },5500) }, // 上拉加载 onReachB原创 2021-02-05 10:39:38 · 5445 阅读 · 0 评论 -
iOS 苹果授权登录(Sign in with Apple)/Apple登录/苹果登录集成教程
链接HBuilderX 自 2.4.7+ 版本开始支持Sign in with Apple(苹果登录),苹果登录是iOS13新增加的功能,当你的应用使用了第三方登录比如微信登录,同时也需要集成苹果登录,否则提交AppStore审核会被拒绝。根据苹果审核指南要求,如果 app 使用第三方或社交登录服务 (例如,Facebook 登录、Google 登录、通过 Twitter 登录、通过 LinkedIn 登录、通过 Amazon 登录或微信登录) 来对其进行设置或验证这个 app 的用户主帐...转载 2021-01-28 12:05:11 · 16960 阅读 · 0 评论 -
uniapp开发APP之登录授权,获取用户基础信息
uniapp开发APP之真机调试HBuild X manifest.json 设置下面会有实现代码,先看一下效果,点击微信登录就会跳转到微信去授权登录,可以拿到用户的唯一标识(openid,access_token,unionid),和头像,昵称等基础信息代码:<template> <view class="content"> <button class="" @click="toWxLogin"> 微信登录 </butto原创 2021-01-28 11:44:04 · 6855 阅读 · 0 评论 -
uniapp开发APP之真机调试
一:华为手机实时调试APP代码基座流程1.打开手机的开发者模式,允许USB调试,手机操作流程,进入设置-关于手机,长按版本号(开启开发模式),然后按图操作,下拉屏幕发行已连接 USB 调试,手机端就暂时不用再操作了2.电脑安装360手机助手,这个软件打开浏览器或者用360软件助手下载就好了,它是 HBuild X 和手机连接的桥梁3. HBuild X 操作运行之后就可以在控制台查看进展,会自动在手机安装 APK调试基座 (用于调试的APK,APK就是安卓APP的安装包).原创 2021-01-28 11:33:02 · 11894 阅读 · 0 评论 -
uniapp 长链接 socket 封装
App.vue<script> import socket from '@/util/IM.js' export default { watch: { '$route': function() { var page = getCurrentPages(); console.log('watch-监听路由', page); } }, globalData: { ImAuth: socket.connect(), }, onLaunch原创 2021-01-27 11:52:52 · 4089 阅读 · 2 评论 -
uniapp H5 JSSDK封装使用
先看效果吧,封装以后使用很方便,两行代码就能得到微信网页开发中的 jssdk 的 wx.config 执行了 wx.ready 还是wx.error ,如果返回 true 就标识执行了ready , 可以调用JSSDK的 API 了,如下图示例代码:this.$common.Init.call(this);this.wxjssdkInti().then(rr => { console.log('jssdk初始化成功', rr) wx.getLocation({ type: 'wg.原创 2020-11-10 18:10:41 · 5629 阅读 · 0 评论