ref 在setup()中，如果你声明了一个ref变量 setup() { const activeId = ref(0) } 除了重新赋值需要加上.value，其他取值的情况下也要加上.value const activeId = ref(1) const list = [{ name: 'jack' }] // 正常赋值 activeId.value = 0 // 以下错误的取值方式 // console.log(list[activeId]) // 正确方式 console.log(list[activeId.value]) // { name: 'jack' } 如果你在reactive中也赋值了ref，那么在取值的时候，也要使用.value reactive 正常使用，我们一般用对象 const book = reactive({ author: 'jack' }) 但有时候我们要用数组 const books = reactive([{ author: 'jack' }]) 响应式不能直接赋值，如果是对象，我们得修改字段，或者使用Object.assign // 方法一 book.author = "jojo" //方法二 Object.assign(book, {author: 'jojo'}) 修改数组的话，同样得修改原始数据的，比如splice, push等方法 // 方法一 books[0] = {author: "jojo"} // 方法二 books....

前言 Vue3已经基本上成熟了，很多开源项目也开始往Vue3上迁移了，新增的组合式API确实非常好用，这里稍微写一下Vue2原本模式和Vue3组合式API的写法有哪些不同 对比 Data和Methods Vue2 export default { data: () => ({ count: 0, user: { name: 'Jack', age: 23 } }), methods: { onClick() { this.count++ } } } Vue3 import { ref, reactive } from 'vue' export default { setup() { const count = ref(0) // 定义普通的类型 const user = reactive({ name: 'Jack', age: 23 }) // 定义对象 const onClick = () => { count....

uni-app安卓调用前置摄像头并自动拍照 最近有个uni-app打包成安卓APP的项目，需要拍照后去人脸验证，但是uni提供的只有调起相机，手动切换之后再点拍照，这样操作非常繁杂，就想着有没有啥方法 问题 和小程序不同，原本小程序中使用腾讯的人脸识别，但是现在需要把项目移植到安卓上去，不仅没有人脸识别了，也没法直接调起前置摄像头。 查了一下H5+的方法，发现直接调起前置的方法在安卓不兼容，这么坑吗？ 然后去插件市场找了一下发现都没有合适的，最后发现H5+的直播方法居然能用，还有nvue的直播推流也是能直接调起前置摄像头 nvue nvue的方式我在新开的项目中可以用，但是不知道为什么在原本的项目中会出现编译失败，不过这边也写一下。 通过live-pusher组件搭配LivePusherContext的API来搭配 不过注意nvue的各种限制 新建文件scan.nvue <template> <view class="content"> <live-pusher id='livePusher' ref="livePusher" class="livePusher" url="" mode="SD" :muted="true" :enable-camera="true" :auto-focus="true" :beauty="1" whiteness="2" aspect="9:16" ></live-pusher> </view> </template> <script> export default { onReady() { // 注意：需要在onReady中 或 onLoad 延时 // 因为不需要推流，只需要用到预览画面和快照功能 this.context = uni.createLivePusherContext("livePusher", this); this.startPreview(); }, methods: { // 快照接口，需要倒计时的话可以根据需要调用这个接口 snapshot: function() { this.context.snapshot({ success: (e) => { console.log(e); } }); }, startPreview: function() { this....

前言 最近项目里有需要用到安卓WebView和JS通信，毕竟不是安卓开发，就去了解了一下。 环境 用的Kotlin的原生和Vue3 创建项目 首先开一个原生安卓的Empty模板，在activity_main.xml中嵌入一个WebView <WebView android:id="@+id/webview" android:layout_width="match_parent" android:layout_height="match_parent" /> 在AndroidManifest.xml文件中写入网络权限配置，如果需要相机之类的权限，加入后再动态申请，这里只演示通信 <manifest> // ... <uses-permission android:name="android.permission.INTERNET" /> // ... </manifest> 配置Kotlin文件 在项目下的MainActivity.kt中写入 override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) val webView = setWebViewSettings() } @SuppressLint("SetJavascriptEnabled") private fun setWebViewSettings(): WebView { // 找到webview的控件 val myWebView: WebView = findViewById(R.id.webview) // 启用js myWebView.settings.javaScriptEnabled = true // 与js交互，js中就用client开始调用 myWebView.addJavascriptInterface(UserInfoInterface(this), "client") // 防止webview跳转到APP外的浏览器 myWebView.webViewClient = object : WebViewClient() { override fun shouldOverrideUrlLoading(view: WebView?...

前言 在学习过程中需要用到地图组件，但是迫于国内环境，无法使用封装好的Google地图，只能使用国内目前有的百度和高德。因为老项目用的是高德，所以这边踩高德的坑。 文档地址 官方文档 开始使用 申请Key 首先是申请高德的Key，这一步比较简单，跟着官方文档走一般没有问题。 配置SDK 因为flutter插件默认不带地图SDK，我们需要通过原生的方式来引入SDK，官方也是通过Android的文档来告诉我们怎么做的，可能有些小伙伴第一次接触有点看不懂，我这里也写一下方便自己记忆。 根据文档我们跳转到这个页面。有拷贝添加和Gradle继承两种方法，这边我们为了方便使用Gradle 正常情况下仓库地址已经配置好了，所以配置仓库可以跳过 之后在项目下的android/app/build.gradle文件中找到dependencies添加以下几行 dependencies { //... compile fileTree(dir: 'libs', include: ['*.jar']) //3D地图so及jar compile 'com.amap.api:3dmap:latest.integration' //定位功能 compile 'com.amap.api:location:latest.integration' //... } 到这配置SDK这一步就完成了 不过还是有可能会出现网络异常的情况，没找到其他解决方案，只能多试试或者代理 集成Flutter插件 在flutter项目中引入amap_flutter_map: ^1.0.0(版本号可不填，默认最新) 编写widget import 'package:amap_flutter_map/amap_flutter_map.dart'; import 'package:amap_flutter_base/amap_flutter_base.dart'; class MyMap extends StatefulWidget { @override _MyMapState createState() => _MyMapState(); } class _MyMapState extends State<MyMap> { static const AMapApiKey amapApiKeys = AMapApiKey(androidKey: '填入你申请的key'); AMapController _mapController; void onMapCreated(AMapController controller) { setState(() { _mapController = controller; getApprovalNumber(); }); } /// 获取审图号 void getApprovalNumber() async { //普通地图审图号 String mapContentApprovalNumber = await _mapController?...