uni-app本地安卓打包
1、下载sdk——Android-SDK@3.1.13.80836_20210517
https://nativesupport.dcloud.net.cn/AppDocs/download/android
2、复制sdk包中的demo工程HBuilder-HelloUniApp到任意目录,使用android studio打开HBuilder-HelloUniApp
3、将Android-SDK@3.1.13.80836_2021051 ...
记录:uni-app 开发原生组件视频通话的总结
由于本人不会原生,因此原生的东西整起来十分费劲,但最终还是好了 URTC视频通话,由于之前同事整的URTC版本较低 ,导致视频通过过程大多数情况是没有声音的,和客服沟通后让我升级sdk试试
如下部分代码可见 Uni-app官网原生插件开发可见.
一、Uni-app的配置如下:
1、 图中common-2.12.4.arr,libuvccamera-release.arr,u ...
uni-app 蓝牙扫码适配
1.前言
蓝牙设备扫码的效率要高于手机摄像头
App需要进行对蓝牙扫码枪进行适配才能正常使用蓝牙设备枪,并兼容之前的摄像头扫码
适配的关键在于:扫码枪进行扫码时,需要对其进行事件监听,并拿到条码的值
2.注意事项
蓝牙模块是可选项,默认应该是关闭状态,需要时再手动开启
蓝牙模块的运行状态需要存储至全局变量中( ...
uni-app - 内置组件样式修改无效问题
uni-app - 内置组件样式修改无效问题
全局样式中修改
在app.vue中
//设置圆角
checkbox.round .wx-checkbox-input,
checkbox.round .uni-checkbox-input {
border-radius: 100upx;
}
//设置背景色
checkbox.red[checked] .wx-checkbox-input,
checkbox.red.checked .uni-checkbox-input{
background-color: # ...
UNI-APP 自定义微信小程序底部导航栏
本文只针对于微信小程序的自定义底部导航栏;
PS:可能在进入小程序后,首次点击tabBar会出现闪烁的情况;不能接受的就还是乖乖的用回默认吧!
需求
在开发记账APP时,感觉微信小程序默认的tabBar功能很简单,而且不能进行美化,作为强迫症的我,不能忍,直接搂它;
我需要达到的效果如下:
中间的按钮凸起;
中间的按钮点 ...
uni-app使用Canvas绘图
一、初始化canvas画布
通过createCanvasContext方法来创建画布
var _this = this;
_this.ctx = uni.createCanvasContext('canvasid', this);
const C_W = 650; //canvas宽度,使用的手机屏幕
_this.canvasW = C_W; //
_this.canvasH = 420; // 设置画布高度
_this.ctx.setFillStyle('#545a7a'); //canvas背景颜色
_this.c ...
uni-app小程序uni.createAnimation动画效果快速上手教程
在实现某个功能的时候,因为基础不够只能拆分2个步骤来学习,第一个学习uni-app小程序uni.createAnimation动画效果,第二个在思考在这基础上实现某个功能,于是…..
写了3小时,出了3个bug
建立动画
建立动画有2个方式,为了学习就简单点:
1.直接在点击的行数中去建立(如果一个界面只有一个动画那就随意);
2.onShow函 ...
使用uni-app 地图组件
首先,官方文档:https://uniapp.dcloud.io/component/map.html
so,easy
但是没什么用~——~,太简单了
uni-app一般内置的使用的是腾讯地图,这个组件使用的地图也是一样的
很坑爹的是,我们看到的地图是
{功能:
带自动定位的
解析地址的
文字性质的
可以查找,筛选的
}
对你没有猜错,这些内容统统没有
但是,这些可以自 ...
Uni-app极速入门(二) - 登录demo
需求
背景
1、进入小程序,默认页面判断用户是否已经登录,已经登录则进入首页,没有登录则进入登录页面
2、首页为tabbar,包括首页和设置页,设置页可以退出登录,回到登录页面
页面流转
graph TD
A[Index Page] --> C{isLogin}
C -->|true| D[HomePage]
C -->|false| E[LoginPage]
D --> |logout| A
E --> |login| D
技术 ...
Android Studio运行、离线打包uni-app项目
首先需要下载Android Studio下载HBuilderX下载Android离线打包SDK(https://nativesupport.dcloud.net.cn/AppDocs/download/android)
创建android项目
2. 配置项目
&nbs ...
uni-app页面栈
uni-app框架用栈的形式管理页面,当发生路由切换的时候,页面栈的表现如下
路由初始化的时候(即uni-app打开的第一个页面),新页面入栈
打开新页面,调用 uni.navigateTo 使用组件<navigator open-type="navigate"/>,类似于vue的route.push()。路由后可以带参数,若跳转地址为tabBar则不可带参数
页面重定向:当前页面出 ...
uni-app app生成带二维码海报保存图片 + 分享到微信
html代码 <view style="padding-top: 100rpx;">
<!-- <view class="tips">
<image src="../static/fingerprint.png" mode=""></image>
<text></text>
</view> -->
<view class="posterImgBox">
<view id="poster">
...
uni-app实现select可输入下拉框
1、一般uni-app下拉框
<view class="uni-form-item uni-column">
<picker @change="examinationType" :range="examinationTypeArray">
<label class="">{{ examinationTypeArrayType }}</label>
</picker>
</view>
//下拉框初始数据
examinationTypeArray: ['请选择', '11111', '22222', '33333', '44444 ...
uni-app、Vue3 + ucharts 图表 H5 无法渲染
当学习成为了习惯,知识也就变成了常识。感谢各位的 点赞、收藏和评论。
新视频和文章会第一时间在微信公众号发送,欢迎关注:李永宁lyn
文章已收录到 github,欢迎 Watch 和 Star。
简介
从问题定位开始,到给框架(uni-app)提 issue、出解决方案(PR),再到最后的思考,详细记录了整个过程。
前序
当你在业务中不幸踩了开 ...
uni-app判断运行的平台
1,编译期判断(条件编译,代码块中的代码只会编译到对应的发行包里)
①例如:
// #ifdef H5
alert("只有h5平台才有alert方法")
// #endif
// #ifndef H5
alert("除了h5平台之外的其他平台才有的方法")
// #endif
②//#ifdef %PLATFORM% //#endif 可以使用的值
值
生效条件
VUE3
HBuilderX 3.2 ...
uni-app的介绍安装和运行
uniapp教程指南
uniapp介绍
uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台。
官网跨平台项目预览地址
uniapp特点
跨平台
一套代码可以运行在多个平台,打包生成 ...
UNI-APP之微信小程序转H5
开始
最近有个需求,需要将微信小程序中一些页面和功能改成h5,这次功能开发的时间有点紧,而且重新写一套有点来不及。考虑到微信小程序与uni-app有着一些共通之处,所以打算直接转成uni-app。uni-app官网上也有从微信小程序项目转uni-app的教程:https://github.com/zhangdaren/miniprogram-to-uniapp ,不过我这里 ...
uni-app + Cloudbase——uni-app 项目中如何使用腾讯云开发后端服务
1 基本介绍
uni-app 是一个基于 Vue.js 的跨端开发框架,一套代码可以发布到 App、小程序、Web 等不同平台
腾讯云开发平台 Cloudbase 提供的 @cloudbase/js-sdk 可以让开发者在 Web 端(例如 PC Web 页面、微信公众平台 H5 等)使用 JavaScript 访问 Cloudbase 服务和资源。
但是 @cloudbase/js-sdk 只支持 Web(浏览器环境 ...
uni-app的uni.request()请求封装
第一种:常见的直接发起uni.request()请求
onLoad() {//页面加载时调用
this.getSwipers()
},
methods: {
//获取轮播图数据
getSwipers(){
uni.request({
url:"https://api-hmugo-web.itheima.net/api/public/v1/home/sw ...
uni-app页面监听、传参、通信
问题1:uni-app页面返回上一页 界面不刷新
问题2:进入页面修改后上个页面参数无法发送改变
在父页面添加
let that = this;
uni.$on('relationInit',function(data){
that.getUserDeptCompany()
})
onUnload() { //销毁
uni.$off('relationInit')
},
子页面 执 ...