HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

uni-grid第二次进入样式问题

uni-grid组件第一次进入正常,第二次进入就挤成一排了。
解决办法

  1. 如果你不需要边框,直接在组件上加上:show-border="false"即可
  2. 如果你需要边框的情况下有两种解决办法
    第一,给uni-grid组件外层的view组件加固定宽度,很显然这种办法只能解决一个端的问题,如需多端运行,看第二种办法;
    第二,修改uni-grid组件中的uni-grid 类样式,添加width:100%;即可,这个应该是该组件的一个小bug
继续阅读 »

uni-grid组件第一次进入正常,第二次进入就挤成一排了。
解决办法

  1. 如果你不需要边框,直接在组件上加上:show-border="false"即可
  2. 如果你需要边框的情况下有两种解决办法
    第一,给uni-grid组件外层的view组件加固定宽度,很显然这种办法只能解决一个端的问题,如需多端运行,看第二种办法;
    第二,修改uni-grid组件中的uni-grid 类样式,添加width:100%;即可,这个应该是该组件的一个小bug
收起阅读 »

Android抓包配置

1、创建network_security_config.xml文件,并将其拷贝到应用资源nativeResources\android\res\xml目录下

<?xml version="1.0" encoding="utf-8"?>  
<network-security-config>  
  <base-config cleartextTrafficPermitted="true">  
    <trust-anchors>  
      <certificates src="system" />  
      <certificates src="user" />  
    </trust-anchors>  
  </base-config>  
</network-security-config>

2、创建AndroidManifest.template.xml文件

<?xml version="1.0" encoding="utf-8"?>  
<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"   
  package="你自己的包名">  

    <!-- 信任用户证书,用于非生产环境抓包 -->  
    <application android:networkSecurityConfig="@xml/network_security_config">  

    </application>  
</manifest>

3、修改vue.config.js或vite.config.js

const fs = require('fs');  
const path = require('path');  
const templateFilePath = path.join(__dirname, 'AndroidManifest.template.xml');  
const outputFilePath = path.join(__dirname, 'AndroidManifest.xml');  
const config = require('./config.js')  

// #ifdef APP  
// 非生产环境,添加网络安全配置,用于抓包  
if(config.env !== 'prod'){  
    fs.copyFileSync(templateFilePath, outputFilePath);  
}else if(fs.existsSync(outputFilePath)){  
    fs.unlinkSync(outputFilePath)  
}  
// #endif

4、下载抓包工具Reqable
下载地址:https://reqable.com/zh-CN/download

继续阅读 »

1、创建network_security_config.xml文件,并将其拷贝到应用资源nativeResources\android\res\xml目录下

<?xml version="1.0" encoding="utf-8"?>  
<network-security-config>  
  <base-config cleartextTrafficPermitted="true">  
    <trust-anchors>  
      <certificates src="system" />  
      <certificates src="user" />  
    </trust-anchors>  
  </base-config>  
</network-security-config>

2、创建AndroidManifest.template.xml文件

<?xml version="1.0" encoding="utf-8"?>  
<manifest xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools"   
  package="你自己的包名">  

    <!-- 信任用户证书,用于非生产环境抓包 -->  
    <application android:networkSecurityConfig="@xml/network_security_config">  

    </application>  
</manifest>

3、修改vue.config.js或vite.config.js

const fs = require('fs');  
const path = require('path');  
const templateFilePath = path.join(__dirname, 'AndroidManifest.template.xml');  
const outputFilePath = path.join(__dirname, 'AndroidManifest.xml');  
const config = require('./config.js')  

// #ifdef APP  
// 非生产环境,添加网络安全配置,用于抓包  
if(config.env !== 'prod'){  
    fs.copyFileSync(templateFilePath, outputFilePath);  
}else if(fs.existsSync(outputFilePath)){  
    fs.unlinkSync(outputFilePath)  
}  
// #endif

4、下载抓包工具Reqable
下载地址:https://reqable.com/zh-CN/download

收起阅读 »

唤醒锁

// 在uniapp中调用原生API启用唤醒锁
function enableWakeLock() {
// 判断当前环境是否支持
if (plus.os.name.toLowerCase() === 'android') {
// 尝试获取唤醒锁
var wakeLock = plus.android.invoke('android.os.PowerManager', 'newWakeLock', plus.android.getContext().POWER_SERVICE);
if (wakeLock) {
// 获取到唤醒锁后,设置为不释放锁的标志位,即保持屏幕常亮
wakeLock.setReferenceCounted(false);
wakeLock.acquire();
console.log('Wake lock acquired');
} else {
console.log('Failed to acquire wake lock');
}
} else {
console.log('Wake lock feature is only supported on Android devices');
}
}

// 在适当的时候释放唤醒锁,比如用户离开应用时
function releaseWakeLock() {
if (wakeLock && plus.os.name.toLowerCase() === 'android') {
wakeLock.release();
console.log('Wake lock released');
}
}

// 在适当的时候调用enableWakeLock函数来启用唤醒锁

2.方法
// 判断是否为Android平台
if (plus.os.name.toLowerCase() === 'android') {
// 获取当前的Activity
var main = plus.android.runtimeMainActivity();
var Window = plus.android.importClass('android.view.Window');
var PowerManager = plus.android.importClass('android.os.PowerManager');

// 获取PowerManager服务
var pm = main.getSystemService(Window.POWER_SERVICE);
var wl = pm.newWakeLock(PowerManager.FULL_WAKE_LOCK, 'my_wakelock_tag');

// 启用wakelock
wl.acquire();

// 在需要关闭wakelock的时候,调用release方法
// wl.release();
}

继续阅读 »

// 在uniapp中调用原生API启用唤醒锁
function enableWakeLock() {
// 判断当前环境是否支持
if (plus.os.name.toLowerCase() === 'android') {
// 尝试获取唤醒锁
var wakeLock = plus.android.invoke('android.os.PowerManager', 'newWakeLock', plus.android.getContext().POWER_SERVICE);
if (wakeLock) {
// 获取到唤醒锁后,设置为不释放锁的标志位,即保持屏幕常亮
wakeLock.setReferenceCounted(false);
wakeLock.acquire();
console.log('Wake lock acquired');
} else {
console.log('Failed to acquire wake lock');
}
} else {
console.log('Wake lock feature is only supported on Android devices');
}
}

// 在适当的时候释放唤醒锁,比如用户离开应用时
function releaseWakeLock() {
if (wakeLock && plus.os.name.toLowerCase() === 'android') {
wakeLock.release();
console.log('Wake lock released');
}
}

// 在适当的时候调用enableWakeLock函数来启用唤醒锁

2.方法
// 判断是否为Android平台
if (plus.os.name.toLowerCase() === 'android') {
// 获取当前的Activity
var main = plus.android.runtimeMainActivity();
var Window = plus.android.importClass('android.view.Window');
var PowerManager = plus.android.importClass('android.os.PowerManager');

// 获取PowerManager服务
var pm = main.getSystemService(Window.POWER_SERVICE);
var wl = pm.newWakeLock(PowerManager.FULL_WAKE_LOCK, 'my_wakelock_tag');

// 启用wakelock
wl.acquire();

// 在需要关闭wakelock的时候,调用release方法
// wl.release();
}

收起阅读 »

支持文字,图片,文件。视频。语音通话,视频通话吗? 如果支持,在那几个端支持?比如H5,小程序,安卓,IOS

uni_im

支持文字,图片,文件。视频。语音通话,视频通话吗?
如果支持,在那几个端支持?比如H5,小程序,安卓,IOS

支持文字,图片,文件。视频。语音通话,视频通话吗?
如果支持,在那几个端支持?比如H5,小程序,安卓,IOS

app使用webview嵌入h5,h5和app通信或者在操作后自动返回app

Webview

第一:首先下载官方最新的uni.webview.js,下载链接在这儿找 官方文档

第二:将下载好的webview.js放在h5的static文件夹下,

第三:在h5的index.html引入,然后写如下代码

<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <meta charset="UTF-8" />  
    <script>  
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||  
        CSS.supports('top: constant(a)'))  
      document.write(  
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +  
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')  
    </script>  
    <title></title>  
    <!--preload-links-->  
    <!--app-context-->  
  </head>  
  <body>  
    <div id="app"><!--app-html--></div>  
    <script type="module" src="/main.js"></script>  
    <script type="text/javascript" src="./static/webview.js"></script>  
    <script type="text/javascript" >  
        const webViewJs = uni.webView  
        console.log('webViewJs',webViewJs);  
    </script>  

  </body>  
</html>  

在vue文件使用webviewjs返回app或者和app通信,vue代码如下

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <button type="primary" @click="back">返回app</button>  
        <button type="primary" @click="sendMsg">发消息给app</button>  
        <button type="primary" @click="toIndex">跳转到app首页</button>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            title: 'Hello'  
        };  
    },  
    onLoad() {},  
    methods: {  
        back() {  
            webViewJs.navigateBack();  
        },  
        sendMsg(){  
            webViewJs.postMessage({  
                data: {  
                    action: 'postMessage'  
                }  
            });  
        },  
        toIndex(){  
            webViewJs.navigateTo({  
                url:'/pages/index/index'  
            })  
            // 如果是tabar,使用switchTab跳转  
            // webViewJs.switchTab({  
            //  url:'/pages/index/index'  
            // })  
        }  
    }  
};  
</script>  

<style>  
.content {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
}  

.logo {  
    height: 200rpx;  
    width: 200rpx;  
    margin-top: 200rpx;  
    margin-left: auto;  
    margin-right: auto;  
    margin-bottom: 50rpx;  
}  

button {  
    margin: 20rpx;  
}  
</style>

app的webview页面接收h5传过来的值,代码如下

<template>  
    <view class="content">  
        <web-view src="http://localhost:5173/" @message="onMessage"></web-view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
        };  
    },  
    methods: {  
        onMessage(e){  
            console.log('e',e.detail.data);  
        }  
    }  
};  
</script>  

<style lang="scss" scoped>  

</style>  
继续阅读 »

第一:首先下载官方最新的uni.webview.js,下载链接在这儿找 官方文档

第二:将下载好的webview.js放在h5的static文件夹下,

第三:在h5的index.html引入,然后写如下代码

<!DOCTYPE html>  
<html lang="en">  
  <head>  
    <meta charset="UTF-8" />  
    <script>  
      var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||  
        CSS.supports('top: constant(a)'))  
      document.write(  
        '<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +  
        (coverSupport ? ', viewport-fit=cover' : '') + '" />')  
    </script>  
    <title></title>  
    <!--preload-links-->  
    <!--app-context-->  
  </head>  
  <body>  
    <div id="app"><!--app-html--></div>  
    <script type="module" src="/main.js"></script>  
    <script type="text/javascript" src="./static/webview.js"></script>  
    <script type="text/javascript" >  
        const webViewJs = uni.webView  
        console.log('webViewJs',webViewJs);  
    </script>  

  </body>  
</html>  

在vue文件使用webviewjs返回app或者和app通信,vue代码如下

<template>  
    <view class="content">  
        <image class="logo" src="/static/logo.png"></image>  
        <button type="primary" @click="back">返回app</button>  
        <button type="primary" @click="sendMsg">发消息给app</button>  
        <button type="primary" @click="toIndex">跳转到app首页</button>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            title: 'Hello'  
        };  
    },  
    onLoad() {},  
    methods: {  
        back() {  
            webViewJs.navigateBack();  
        },  
        sendMsg(){  
            webViewJs.postMessage({  
                data: {  
                    action: 'postMessage'  
                }  
            });  
        },  
        toIndex(){  
            webViewJs.navigateTo({  
                url:'/pages/index/index'  
            })  
            // 如果是tabar,使用switchTab跳转  
            // webViewJs.switchTab({  
            //  url:'/pages/index/index'  
            // })  
        }  
    }  
};  
</script>  

<style>  
.content {  
    display: flex;  
    flex-direction: column;  
    align-items: center;  
    justify-content: center;  
}  

.logo {  
    height: 200rpx;  
    width: 200rpx;  
    margin-top: 200rpx;  
    margin-left: auto;  
    margin-right: auto;  
    margin-bottom: 50rpx;  
}  

button {  
    margin: 20rpx;  
}  
</style>

app的webview页面接收h5传过来的值,代码如下

<template>  
    <view class="content">  
        <web-view src="http://localhost:5173/" @message="onMessage"></web-view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
        };  
    },  
    methods: {  
        onMessage(e){  
            console.log('e',e.detail.data);  
        }  
    }  
};  
</script>  

<style lang="scss" scoped>  

</style>  
收起阅读 »

关于上架vivo应用市场隐私不合规并提示在静默、后台状态下,APP存在收集“OAID”等信息的行为。

审核 vivo 上架被拒 上架

关于上架vivo应用市场隐私不合规并提示在静默、后台状态下,APP存在收集“OAID”等信息的行为。参考:

APP在运行时,存在以下违规行为:  
1、未见向用户告知且未经用户同意,在静默、后台状态下,APP存在收集“OAID”等信息的行为,非服务所必需且无合理应用场景,超出与收集个人信息时所声称的目的具有直接或合理关联范围

首先需要明确DCloud不会在后台或静默状态下违规收集任何信息。

经过与按照本文档修改之后但是隐私检测仍然不通过的开发者交流,目前确认是vivo的应用安全检测平台的误报。以下是vivo客服给到的回复。

由于涉及到vivo的内部流程,具体问题及原因vivo并没有对我们透露。

如果已经按照本文档修改之后提交检测仍然提示APP请求携带OAID的,可以直接联系vivo的人工客服或者发送邮件到open@vivo.com

针对上述问题,目前已经确定的情况有:

1. uniCloud请求携带OAID

如果使用了uniCloud的话,云函数的头信息会包含getSystemInfo里的值,所以也包含了oaid,但这个是发送到你的uniCloud服务器地址的,不是发给DCloud服务器。

但因为每次uniCloud请求都会发送,触发了vivo提到的频繁采集采集。

在头信息里包含太多getSystemInfo信息确实没必要。目前已经发布了HBuilderX 4.21版本,请升级后重现打包。

新版默认减少了头信息内容,然后给开发者提供自定义uniCloud头信息的方式。

不想升级的用户,也可以用下面的临时方案,将附件内的文件替换到HBuilderX的如下位置:HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/uni-cloud/dist/index.js 重新打包。

注意:需要先升级到最新的HBuilderX之后按照上述内容替换文件,最后重新打包。

如果oaid对你比较重要,头信息里的oaid在你的业务中被你使用了,还有一种策略,是配置安全网络,这会让app和uniCloud之间的所有传输数据加密。也可以阻止三方识别。

2. uni统计会上报oaid

如果你的app开启了uni统计1,访问域名是tongji.dcloud.io。也会上报oaid。如果想准确统计有多少用户设备,那么oaid是不可或缺的。

目前的可选方案有:

  1. 先在manifest里去掉uni统计1,然后打包apk,把新的apk提交给vivo试一下。暂时放弃vivo上的统计数据。
  2. 改用uni统计2
  3. 和vivo客服pk。见上图聊天记录,vivo承认检测有误。

3. 个推

HBuilder X于4.11版升级过个推SDK,解决了在静默状态下频繁手机隐私信息的问题。

请确保提测的安装包版本是用HBuilder X 4.11之后的版本提交打包的。

另外注意一键登陆也是个推的

如果堆栈信息表中的代码所属字段仍然存在个推,可以微信扫码联系个推客服。

4. 其他SDK或者原生插件

针对其他SDK或者原生插件,可以参考堆栈信息表中的代码所属字段联系对应的SDK公司。

比如有的堆栈里显示了友盟的sdk,再比如使用了原生插件,需要排查这些原生插件的行为。

  • 最后也需要注意自己的隐私协议

如果给自己的服务器(不管是不是uniCloud)发送敏感设备信息,需要在隐私协议里披露清楚。

使用三方sdk时,检测到有堆栈调用,不代表有问题。只要隐私协议写清楚,也是允许三方sdk采集的,只是要注意频繁采集的问题。

继续阅读 »

关于上架vivo应用市场隐私不合规并提示在静默、后台状态下,APP存在收集“OAID”等信息的行为。参考:

APP在运行时,存在以下违规行为:  
1、未见向用户告知且未经用户同意,在静默、后台状态下,APP存在收集“OAID”等信息的行为,非服务所必需且无合理应用场景,超出与收集个人信息时所声称的目的具有直接或合理关联范围

首先需要明确DCloud不会在后台或静默状态下违规收集任何信息。

经过与按照本文档修改之后但是隐私检测仍然不通过的开发者交流,目前确认是vivo的应用安全检测平台的误报。以下是vivo客服给到的回复。

由于涉及到vivo的内部流程,具体问题及原因vivo并没有对我们透露。

如果已经按照本文档修改之后提交检测仍然提示APP请求携带OAID的,可以直接联系vivo的人工客服或者发送邮件到open@vivo.com

针对上述问题,目前已经确定的情况有:

1. uniCloud请求携带OAID

如果使用了uniCloud的话,云函数的头信息会包含getSystemInfo里的值,所以也包含了oaid,但这个是发送到你的uniCloud服务器地址的,不是发给DCloud服务器。

但因为每次uniCloud请求都会发送,触发了vivo提到的频繁采集采集。

在头信息里包含太多getSystemInfo信息确实没必要。目前已经发布了HBuilderX 4.21版本,请升级后重现打包。

新版默认减少了头信息内容,然后给开发者提供自定义uniCloud头信息的方式。

不想升级的用户,也可以用下面的临时方案,将附件内的文件替换到HBuilderX的如下位置:HBuilderX/plugins/uniapp-cli/node_modules/@dcloudio/vue-cli-plugin-uni/packages/uni-cloud/dist/index.js 重新打包。

注意:需要先升级到最新的HBuilderX之后按照上述内容替换文件,最后重新打包。

如果oaid对你比较重要,头信息里的oaid在你的业务中被你使用了,还有一种策略,是配置安全网络,这会让app和uniCloud之间的所有传输数据加密。也可以阻止三方识别。

2. uni统计会上报oaid

如果你的app开启了uni统计1,访问域名是tongji.dcloud.io。也会上报oaid。如果想准确统计有多少用户设备,那么oaid是不可或缺的。

目前的可选方案有:

  1. 先在manifest里去掉uni统计1,然后打包apk,把新的apk提交给vivo试一下。暂时放弃vivo上的统计数据。
  2. 改用uni统计2
  3. 和vivo客服pk。见上图聊天记录,vivo承认检测有误。

3. 个推

HBuilder X于4.11版升级过个推SDK,解决了在静默状态下频繁手机隐私信息的问题。

请确保提测的安装包版本是用HBuilder X 4.11之后的版本提交打包的。

另外注意一键登陆也是个推的

如果堆栈信息表中的代码所属字段仍然存在个推,可以微信扫码联系个推客服。

4. 其他SDK或者原生插件

针对其他SDK或者原生插件,可以参考堆栈信息表中的代码所属字段联系对应的SDK公司。

比如有的堆栈里显示了友盟的sdk,再比如使用了原生插件,需要排查这些原生插件的行为。

  • 最后也需要注意自己的隐私协议

如果给自己的服务器(不管是不是uniCloud)发送敏感设备信息,需要在隐私协议里披露清楚。

使用三方sdk时,检测到有堆栈调用,不代表有问题。只要隐私协议写清楚,也是允许三方sdk采集的,只是要注意频繁采集的问题。

收起阅读 »

使用阿里镜像下载Git for Windows

Git

Git官网下载一个git安装包时候非常慢,可以使用阿里镜像站下载,一秒完成。

阿里镜像站

继续阅读 »

Git官网下载一个git安装包时候非常慢,可以使用阿里镜像站下载,一秒完成。

阿里镜像站

收起阅读 »

【十年全栈开发,在线接单】

外包接单

【十年全栈开发,在线接单】
小程序开发定制服务,从设计、开发、测试、打包上线、审核、备案、修改等一条龙服务,咱家的售后服务包一年奥,小程序开发 ,网站二次开发,商城定制开发,各种软件开发。 免费售后,老板们可以随时咨询呢

我们的服务:
1.界面设计
2.定制化程序开发
3.ai智能体定制开发
我们的优势:
1.前后端、软硬件、以至于ai智能体。
2.专业的团队,来自于大厂程序员的优质服务。
3.全天候的售前售后问题服务

技术栈:
1.运维技术栈:Linux、Docker、K8S、CICD、RabbitMQ 等
2.数据库技术栈:Mysql,PostgreSQL,Oracle,SqlServer、SQLite、Redis、MongoDB、HBase、Neo4J
3.CSS技术栈:TailwindCSS,Antd,Arco Design,Mui,Bootstrap 等
4.React技术栈:Vite,Webpack,React,React Native,React Query,Zustand,Nextjs,GraphQL等
5.Node技术栈:Electron,Fastify,Nestjs,Typeorm,Yargs,Cluster,PM2 等
6.PHP技术栈:PHP,Laravel,Symfony,Workerman 等
7.Python技术栈:Django,FastAPI,Flask
8.同时也胜任:品牌形象设计,Logo 设计,原型设计,视频剪辑,电脑/手机组装修理等工作

wx: hisinyun

继续阅读 »

【十年全栈开发,在线接单】
小程序开发定制服务,从设计、开发、测试、打包上线、审核、备案、修改等一条龙服务,咱家的售后服务包一年奥,小程序开发 ,网站二次开发,商城定制开发,各种软件开发。 免费售后,老板们可以随时咨询呢

我们的服务:
1.界面设计
2.定制化程序开发
3.ai智能体定制开发
我们的优势:
1.前后端、软硬件、以至于ai智能体。
2.专业的团队,来自于大厂程序员的优质服务。
3.全天候的售前售后问题服务

技术栈:
1.运维技术栈:Linux、Docker、K8S、CICD、RabbitMQ 等
2.数据库技术栈:Mysql,PostgreSQL,Oracle,SqlServer、SQLite、Redis、MongoDB、HBase、Neo4J
3.CSS技术栈:TailwindCSS,Antd,Arco Design,Mui,Bootstrap 等
4.React技术栈:Vite,Webpack,React,React Native,React Query,Zustand,Nextjs,GraphQL等
5.Node技术栈:Electron,Fastify,Nestjs,Typeorm,Yargs,Cluster,PM2 等
6.PHP技术栈:PHP,Laravel,Symfony,Workerman 等
7.Python技术栈:Django,FastAPI,Flask
8.同时也胜任:品牌形象设计,Logo 设计,原型设计,视频剪辑,电脑/手机组装修理等工作

wx: hisinyun

收起阅读 »

【fixed不生效原因】position:fixed 没有相对浏览器窗口定位的原因 transform冲突(使用uni-popup组件)

scss css

来源:https://blog.csdn.net/kaosini/article/details/118760075

评论区:vue3 teleport文档中也有写

遇到一个有意思的现象, fixed 的元素没有相对 viewport 定位,而是相对于它的父元素进行定位了。

逐一排查后 ,发现是transform捣乱了。

fixed 元素的块级格式上下文 Block Formatting Context(BFC) 由 viewport 创建,也就是fixed 元素的 BFC 包含在根元素的 BFC 里

w3c 对 transform 的[定义]():

For elements whose layout is governed by the CSS box model, any value other than none for the transform property also causes the element to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments.  

大概意思就是,transform 属性使元素创建了新的 BFC,所有的子元素都被包含在这个新的 BFC 内。那么设置了 position: fixed 的子元素 BFC 被包含在了 transform 元素的 BFC 里。

↓↓↓ 各位大佬点点赞

继续阅读 »

来源:https://blog.csdn.net/kaosini/article/details/118760075

评论区:vue3 teleport文档中也有写

遇到一个有意思的现象, fixed 的元素没有相对 viewport 定位,而是相对于它的父元素进行定位了。

逐一排查后 ,发现是transform捣乱了。

fixed 元素的块级格式上下文 Block Formatting Context(BFC) 由 viewport 创建,也就是fixed 元素的 BFC 包含在根元素的 BFC 里

w3c 对 transform 的[定义]():

For elements whose layout is governed by the CSS box model, any value other than none for the transform property also causes the element to establish a containing block for all descendants. Its padding box will be used to layout for all of its absolute-position descendants, fixed-position descendants, and descendant fixed background attachments.  

大概意思就是,transform 属性使元素创建了新的 BFC,所有的子元素都被包含在这个新的 BFC 内。那么设置了 position: fixed 的子元素 BFC 被包含在了 transform 元素的 BFC 里。

↓↓↓ 各位大佬点点赞

收起阅读 »

uni-app 选择车牌号

uniapp

uni-app 选择车牌号

github地址,喜欢的可以star下哦

插件预览图

使用教程

1.插件代码拷贝

  • 下载后把components目录下licensePlate/licensePlate.vue文件拷贝到自己项目目录下

2.插件使用

  • vue页面使用
<template>  
    <view>  
        <licensePlate :licensePlateDefault="licensePlateDefault" @success="licensePlateGet"/>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                licensePlateDefault:"",//默认车牌号  
            }  
        },  
        methods: {  
            // 获取车牌号  
            licensePlateGet(val){  
                uni.showToast({  
                    title:val+'',  
                    icon:"none"  
                })  
            }  
        }  
    }  
</script>
兼容性

uni-app项目中使用都兼容

继续阅读 »

uni-app 选择车牌号

github地址,喜欢的可以star下哦

插件预览图

使用教程

1.插件代码拷贝

  • 下载后把components目录下licensePlate/licensePlate.vue文件拷贝到自己项目目录下

2.插件使用

  • vue页面使用
<template>  
    <view>  
        <licensePlate :licensePlateDefault="licensePlateDefault" @success="licensePlateGet"/>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                licensePlateDefault:"",//默认车牌号  
            }  
        },  
        methods: {  
            // 获取车牌号  
            licensePlateGet(val){  
                uni.showToast({  
                    title:val+'',  
                    icon:"none"  
                })  
            }  
        }  
    }  
</script>
兼容性

uni-app项目中使用都兼容

收起阅读 »

uniapp地图定位插件分享

地图 定位 uniapp插件

近期老是有人问我怎么做一版较好的位置定位插件。所以为了照顾下做微信小程序的同学,选择用腾讯地图做了一版地图位置定位,滑动地图中心点获取位置信息,加入了城市选择器,关键字搜索等功能,希望大家支持该插件;

在移动应用开发中,地图定位是一项常见且重要的功能。无论是社交应用、出行导航还是在线订餐,地图定位都为用户提供了极大的便利。UniApp 作为一个高效的跨平台开发框架,提供了丰富的 API 来实现地图定位功能。本文将指导你如何在 UniApp 中实现获取地图定位的功能。

准备工作
在开始之前,确保你已经拥有以下几项准备:
1.阅读并理解 UniApp 官方文档关于位置相关 API 的说明。
2.在 manifest.json 文件中配置好地图和定位相关的权限。
3.安装并配置好地图服务SDK,比如高德地图或腾讯地图等。

使用方法
图片

图片

图片

注意:在h5前端的话要跨域否则获取不了定位的信息,微信小程序无需跨域。另外还需腾讯地图那申请mapkey(demo上是我自己申请的,如果该插件用在项目上,建议用户重新申请mapkey)
配置easycom规则后,自动按需引入,无需import组件,直接引用即可,目前只是做了个比较简单demo,后续会继续扩展;locPath这个是中心图片最好设置下,不设置图片路径视觉较差

如果想接入高端地图的话可以在评论区@我,如果需求量大的话我会做一版高德,帮大家解决问题;

效果预览
图片
图片
图片

支持平台
目前支持小程序, app, h5。

下载地址
插件地址

继续阅读 »

近期老是有人问我怎么做一版较好的位置定位插件。所以为了照顾下做微信小程序的同学,选择用腾讯地图做了一版地图位置定位,滑动地图中心点获取位置信息,加入了城市选择器,关键字搜索等功能,希望大家支持该插件;

在移动应用开发中,地图定位是一项常见且重要的功能。无论是社交应用、出行导航还是在线订餐,地图定位都为用户提供了极大的便利。UniApp 作为一个高效的跨平台开发框架,提供了丰富的 API 来实现地图定位功能。本文将指导你如何在 UniApp 中实现获取地图定位的功能。

准备工作
在开始之前,确保你已经拥有以下几项准备:
1.阅读并理解 UniApp 官方文档关于位置相关 API 的说明。
2.在 manifest.json 文件中配置好地图和定位相关的权限。
3.安装并配置好地图服务SDK,比如高德地图或腾讯地图等。

使用方法
图片

图片

图片

注意:在h5前端的话要跨域否则获取不了定位的信息,微信小程序无需跨域。另外还需腾讯地图那申请mapkey(demo上是我自己申请的,如果该插件用在项目上,建议用户重新申请mapkey)
配置easycom规则后,自动按需引入,无需import组件,直接引用即可,目前只是做了个比较简单demo,后续会继续扩展;locPath这个是中心图片最好设置下,不设置图片路径视觉较差

如果想接入高端地图的话可以在评论区@我,如果需求量大的话我会做一版高德,帮大家解决问题;

效果预览
图片
图片
图片

支持平台
目前支持小程序, app, h5。

下载地址
插件地址

收起阅读 »