uni-app的pages.json配置文件
pages.json文件是uni-app 中页面管理、窗口样式、原生的导航栏、底部的原生tabbar 等的配置文件,包含如下节点
1.pages : 设置页面路径及窗口表现
一个pages接收一个数组,数组中由多个page组成,每个page有一个path和一个style组成,如:
{
"pages": [
{
"path": "pages/index/index" ...
uni app subNVues层级组件
参数设置
position 原生子窗体的排版位置,排版位置决定原生子窗体在父窗口中的定位方式。
"static",原生子窗体在页面中正常定位,如果页面存在滚动条则随窗口内容滚动;
"absolute",原生子窗体在页面中绝对定位,如果页面存在滚动条不随窗口内容滚动;
"dock",原生子窗体在页面中停靠,停靠的位置由dock属性值决定。 默 ...
用 vscode 开发 uni-app 搭建
简介 & 需求
uni-app 是一个用 vue 语法来开发小程序、App、H5 的框架,其官方推荐的开发工具为 HBuilderX,使用起来有很好的开发体验。
很多前端之前已经习惯了 vscode,不想更换编辑器。其实 uni-app 和 vscode 也可以很搭,接下来为大伙带来 vscode 中 uni-app 的正确打开姿势。
CLI 工程
全局安装 vue-cli 3.x(如已安 ...
【Uni-App】API笔记 P1
1、调试打印:
console.log() 向控制台打印 log 日志
console.debug() 向控制台打印 debug 日志 注:App 端自定义组件模式下,debug 方法等同于 log 方法
console.info() 向控制台打印 info 日志
console.warn() 向控制台打印 warn 日志
console.error() 向控制台打印 error 日志
不同平台对于 console 方法的支持 ...
【Uni-App】page.json 配置项一栏笔记
官方文档
https://uniapp.dcloud.io/collocation/pages
一些配置项是全局的,也可以在页面对象中设置
{
"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app",
"a ...
uni-app技术分享| 怎么用uni-app实现呼叫邀请
一、前提准备
创建 uniapp 项目
前往 uniapp 插件市场搜索 anyRTC 实时消息 SDK 插件
因为呼叫邀请一般都配合音视频一起,所以建议大家使用使用云打包(本项目使用云打包)
项目导入后必须进入 manifest.json 的 App原生插件中添加云端插件
重点:添加完插件后必须制作自定义基座在真机上使用自定义基座运行
可参考类似 ...
uni-app打印
1.手机端调用window.print()方法无效,无论是在浏览器或者app中或者webview中,(可能有的手机浏览器可以)。
2.uniapp app端无法直接获取dom元素,,没有document对象,可使用renderjs处理,在app中只能使用原生的html元素如button(在元素上添加点击事件)调用renderjs中的方法,在例如u-button中就调用无效
在renderj ...
uni-app 使用API中的uni.chooseImage 上传照片以及uni.previewImage图片预览(身份证照片为例)
在uni-app项目中通常需要用户上传照片,如下图所示:
其中部分参数为本项目中请求接口时所需要的,可以根据需求自行修改对应的参数等,代码如下:
<template>
<div class="container">
<div class="user-info">
<div class="id-info">身份证照片</div>
<div class="tips">*请上传本人的身份证照片(单张照片限制1 ...
uni-app之数据驱动的picker选择器( uni-data-picker)之可以选择到任意级别
背景说明
uni-app 官方的插件市场有数据驱动选择器,可以用作多级分类的场景。本人引入插件后,发现,在h5和微信小程序都只能选择到叶子级。而在给出的官方组件示例中确并非如此。
可以选择年级,而不选择班级。然后,想试试官方的手机版,发现并没有示例(截至日期2021年8月3日)为止。
当然,这里操作起选择 ...
微信小程序 & uni-app tooltip All In One
微信小程序 & uni-app tooltip All In One
微信小程序 tooltip
https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/select-text.html
uni-app tooltip
https://github.com/bianmaren/uni-tooltips
https://github.com/bianmaren/uni-tooltips/blob/master/components/bianmaren-tooltips/bianma ...
Uni-app 之小程序版本更新检查——uni.getUpdateManager()
在开发小程序的时候,版本更新在所难免。所以,我们希望每次打开的小程序的时候,都可以进行版本检测。如果有新版本,那么,就更新,并且让用户能够重启,并应用新版本。
实现
开门见山,uni-app官方网站给了我们实现方法。以下是代码示例。
const updateManager = uni.getUpdateManager();
updateManager.onCheckForUpda ...
uni-app 如何使用 icon / iconfonts All In One
uni-app 如何使用 icon / iconfonts All In One
https://ask.dcloud.net.cn/question/57433
iconfont
file:///Users/xgqfrms/Downloads/font_1508833_00b4tj7ih58/demo_index.html
/* app.scss */
@font-face {
font-family: 'iconfont';
src: url('iconfont.woff2?t=1627452705675') format('woff2'),
url(' ...
uni-app CSS 样式布局错乱 All In One
uni-app CSS 样式布局错乱 All In One
uni-app 写的 H5 页面在内置的 webview 模式下调试正常, 但是在 ios 模拟器上调试样式错乱, 不一致
运行到内置浏览器
webview 可以调试 css ✅
运行到手机或模拟器
不可以调试 css, 只支持 nvue 原生调试 ❌
docs ✅
https://uniapp.dcloud.io/matter?id=h5正常但app异常的 ...
uni-app调用NFC读写加密扇区功能。
1.先新建一个nfc.js文件。
let Context = plus.android.importClass("android.content.Context");
let NfcManager = plus.android.importClass("android.nfc.NfcManager");
let NfcAdapter = plus.android.importClass("android.nfc.NfcAdapter");
let Settings= plus.android.importClass("android.provider.Settings");
...
uni-app&H5&Android混合开发三 || uni-app调用Android原生方法的三种方式
前言:
关于H5的调用Android原生方法的方式有很多,在该片文章中我主要简单介绍三种与Android原生方法交互的方式。
uni-app跨平台框架介绍和快速入门
uni-app跨平台框架介绍和快速入门
一、H5+方法调用android原生方法
H5+ Android开发规范官方文档:
https://www.html5plus.org/doc/zh_cn/android.html
H5端调用A ...
uni-app map组件的marker
<template> <view> <page-head :title="title"></page-head> <view class="uni-common-mt"> <view> <map :latitude="latitude" :longitude="longitude" :markers="covers"> </map> </view> </view> <image src="../../static/app-plus ...
uni-app 组件之scroll-view
原网页地址:https://uniapp.dcloud.io/component/scroll-view
说明
scroll-view,可滚动视图区域。用于区域滚动。
需注意在webview渲染页面中,区域滚动性能不及页面滚动。
属性说明
属性名
类型
默认值
说明
平台差异说明
scroll-x
Boolean
false
允许横向滚动
scroll-y
Boolean
false
允许纵向滚动
...
uni-app & uCharts 踩坑 readme All In One
uni-app & uCharts 踩坑 readme All In One
uCharts readme.md 💩
uCharts官方网站
DEMO演示及在线生成工具(v2.0文档)https://demo.ucharts.cn
优秀的nvue全端组件与模版库nPro
图表组件在项目中的应用 UReport数据报表
v1.0文档(将在9月30日作废,请尽快转v2.0)
如何安装、更新 uni_modules 插件点这里,必看,必看 ...
uni-app 之创建和发布uni-modules插件
目录
背景
前提条件
步骤
新建步骤uni-modules插件
编写插件内容
编写插件文档
发布到插件市场
参考网址
背景
最近在用uni-app做项目,根据项目的需要,用上了很多插件。真不错,可以站在巨人肩膀上摘苹果。
不过,在实际应用的时候,会有一些不尽人意。比如,在用到uni-search-bar插件时,发现取消按钮不能改变颜色。 ...
uni-app app端 人脸识别
在听到人脸识别,连忙去看看,去阿里 腾讯 看他们的人脸识别方法,官方sdk什么的。
到后来,需求确定了,拍照(照片)上传,后台去识别是不是本人,这一瞬间从天堂到地狱,放着官方那么好的方法,不要。
用照片,还的自己去写,去实现。
下面为大家提供一个 uni-app 自动拍照 上传照片 后端做匹配处理。
参考插件 ...