uni-app 蓝牙扫码适配
1.前言
蓝牙设备扫码的效率要高于手机摄像头
App需要进行对蓝牙扫码枪进行适配才能正常使用蓝牙设备枪,并兼容之前的摄像头扫码
适配的关键在于:扫码枪进行扫码时,需要对其进行事件监听,并拿到条码的值
2.注意事项
蓝牙模块是可选项,默认应该是关闭状态,需要时再手动开启
蓝牙模块的运行状态需要存储至全局变量中( ...
uni-app文章详情-富文本展示 优雅展示代码块
在uni-app开发中,开发一个资讯详情页面,详情里包含图片和代码块。这时候用简单的rich-text控件已经不够用了。用官方demo里的html-parser.js也无法很好的展示代码区域。这个时候就要使用官方提供的插件来解决。
官方的这个插件有很多问题。需要使用第3方修复的版本:https://ext.dcloud.net.cn/plugin?id=1279
首先 ...
记录uni-app的APP端分享到微信好友,链接为小程序页面,分享失败的BUG
记录uni-app的APP端分享到微信好友,链接为小程序页面,分享失败的BUG
分享到微信好友,链接为小程序端报错
16:59:19.617 fail:{"errMsg":"share:fail [Share微信分享:-6]send, http://ask.dcloud.net.cn/article/287","errCode":-100,"code":-100} at pages/product/detail.vue:300
step1
找原因:由于我没有遇到过,怎么 ...
uni-app多种设置全局变量及全局变量重新赋值
一、引用公共common.js(1、可在页面中直接引入common.js 2、在main.js中引用并挂载(这里是第二种))
export default {
memberObj:{
name:'初始姓名',
},
setMemberObj(data){
this.memberObj = Object.assign({},this.memberObj,data)
}
}
(1)、在全局main.js中引用
import Vue from ...
uni-app 搜索栏
uni-app 搜索栏
1 <template>
2 <view>
3 <view class="content1"></view>
4 <view class="search-block">
5 <view class="search-ico-wapper">
6 <image src="../../static/chongzhi_sousuo/chongzhi-icon-sousuo@3x.png" class="search-ico" mode=""></image>
7 ...
uni-app项目从0-1基础架构搭建全流程
前情
最近新接了一个全新项目,我负责从0开始搭建小程序,我选用的技术栈是uni-app技术栈,UI库选择的是uview-plus,CSS引入现在流行的tainlwindcss,实现CSS原子化书写,实现小程序分包,分包中实现webview使用和彩蛋页(方便开发和测试使用的功能页),同时实现接口请求、本地缓存等常用工具方法的封装
基础架构主要内容
...
uni-app APP横屏和竖屏
uni-app APP横屏和竖屏
uni-app APP横屏和竖屏
1、APP判断横屏和竖屏
uni.getSystemInfo({ // 获取系统信息
success: function (res) {
// 屏幕方向数值: HOME键在右, 0 - 竖屏; 90 - 横屏; HOME'键在左, 180 - 反向竖屏; -90 - 反向横屏;
let orientation = plus.navigator.getOrientation();
var ...
uni-app App 下集成 xgplayer
uni-app APP 下集成 xgplayer
uniapp 使用 uni-upgrade-center
前言
如果是 Web 下集成 xgplayer 是很方便的,直接按照官方文档就可以,这里就不做讨论。
之所以是讲 app 下,原因在于 uni-app app 下调用这类 JS 库涉及到操作 dom 的就需要特殊出来。
在最开始按照 web 方式集成进来一直报错,一点头绪没有,经过几 ...
uni-app:app:锁定屏幕方向禁止屏幕旋转(hbuilderx 3.7.3)
一,第一种方法:js代码:
App.vue
<script>
export default {
onLaunch: function() {
console.warn('当前组件仅支持 uni_modules 目录结构 ,请升级 HBuilderX 到 3.1.0 版本以上!')
console.log('App Launch');
// #ifdef APP-PLUS
plus.screen.lockOrien ...
uni-app微信小程序GPS位置获取爬坑
前情
uni-app是我比较喜欢的跨平台框架,它能开发小程序/H5/APP(安卓/iOS),重要的是对前端开发友好,自带的IDE让开发体验也挺棒的,现在所在公司项目有抖音、快手、微信、支付、APP端,就是使用uni-app来开发的。
坑位
最近接手的项目是需要在下单前获取用户所有位置的GPS信息,再服务端会根据当前用户的GPS信息来判定是否 ...
uni-app 之 web-view 与h5 通讯
已经很久没有更新我的博客了,差点要遗忘自己还有博客了,哈哈哈哈。
最近有接触过关于web-view的东西,大家也知道我一直在做uni-app的项目,也研究了很久,收获颇丰吧,今天就跟大家分享一下
什么是web-view
web-view是一个web浏览器组件,可以用来承担网页的容器,会自动铺满整个屏幕
各小程序平台,web-view ...
分析uni-app菊花loading的纯CSS绘制
背景
继上拉加载——本着刨根问底的精神,挖了挖引用的uni-load-more组件,其实现比较容易理解,要说核心点,非CSS绘制的loading莫属了。小小的动画图,用到时直接引用就好了,不不不,千万不要这么想,所谓书到用时方恨少,可不是随口一说便成了千古名句的,没准哪天你就遇上了相关知识点,即使有万能度娘,也不能让你拥 ...
uni-app搜索功能前后端开发(页面)
uni-app搜索功能前后端开发(页面)
博客说明
文章所涉及的资料来自互联网整理和个人总结,意在于个人学习和经验汇总,如有什么地方侵权,请联系本人删除,谢谢!
借助的插件地址
插件地址
展示
前端是使用vue,后端使用Java的springBoot开发
监控搜索框
uni-app
注意根据自己的需求来改
async getSearch(keyword) {
...
uni-app 使用笔记
1.前言
也不知道是我水平菜还是文档太烂,这个框架使用的过程中踩了无数的坑,屡次想砸键盘,最后贫穷让我平复了心情。为了纪念这段操蛋的日子,我决定把这些坑都记录下来。
2.数据请求
在实际的项目中,数据请求需要配合一些UI效果,例如请求数据时展示'loading'效果,数据回来后又要取消这种'loading'效果,既然每次都要使 ...
uni-app微信小程序开发之引入腾讯视频小程序播放插件
登录微信小程序管理后台添加腾讯视频播放插件:
正式开始使用腾讯视频小程序插件之前需先在微信公众平台 -> 第三方设置 -> 插件管理处添加插件,如下图所示:
在uni-app中引入插件代码:
注意在使用uni-app开发微信小程序时与直接会用微信网页开发工具开发微信小程序是有很大的差别的,因为uni-app可开发多 ...
【记录】uni-app H5如何给网站设置favicon.icon图标
uni-app H5如何给网站设置favicon.icon图标?
1:首先修改mainfest.json配置文件
2:设置个html页面,我的是新建了一个main.html
html模版如下:(官网地址:https://uniapp.dcloud.io/collocation/manifest?id=h5-template)
<!DOCTYPE html>
<html lang="zh-CN">
...
uni-app x封装request,统一API接口请求
一、概述
uni-app x 提供了 uni.request() 方法。
uni.request({
url: 'https://api.example.com',
method: 'GET'
})
在实际项目开发中,直接使用 uni.request 会带来诸多问题,例如:
重复代码多(如每次都要写 baseURL)
错误处理分散,难以统一管理
缺乏请求/响应拦截能力
Token 注入繁琐
Loading 状态管理 ...
uni-app x使用uview-plus
一、概述
uView-Plus官网提供完整框架文档与资源下载,是兼容多端开发的uni-app生态框架,支持安卓、iOS、微信小程序等10个平台。
uView-Plus官网及框架概述
官网入口:主文档站(uiadmin.net)|GitHub Pages(ijry.github.io)。包含组件文档、工具库说明及快速体验模板 ...
uni-app项目loading显示方案
前情
uni-app是我比较喜欢的跨平台框架,它能开发小程序/H5/APP(安卓/iOS),重要的是对前端开发友好,自带的IDE可视化的运行和打包也让开发体验也非常棒,公司项目就是主推uni-app,为了用户体验对于耗时操作,如接口请求或者异步的API调用都会添加loading效果
原生API使用持性
uni-app项目本身自带有原生交互反馈的API,如s ...
uni-app实现web-view和App之间的互相通信
1.web-view向App传递消息
官网对于uni-app使用web-view的介绍如下:web-view
注意事项提到postMessage方法,这就是web-view向App传递消息的方法,使用如下:
注意H5本身不支持uni-app里面的方法,所以在项目中引入支持调用uni-app方法的库
web-view页面使用:
uni.postMessage({
data: {
...