1:不能写成死值
<scroll-view :scroll-into-view="scrollIntoView" scroll-with-animation class="index-container" scroll-y="true" @scroll="handleScroll">
2:且要变化,否则再次触发返回顶部的时候 会失效

        let scrollIntoView = ref('')  

    function handleScroll(event) {  

        scrollIntoView.value = ''  

    }  

    function backToTop() {  
        scrollIntoView.value = "top"  
    }

线上预览:

移动端 http://8.146.211.120:8081/

管理端 http://8.146.211.120:8088/

小红书凭借优秀的产品体验 和超高人气 目前成为笔记类产品佼佼者

此项目将详细介绍如何使用Vue.js和Spring Boot 集合uniapp

开发一个仿小红书的城应用，凭借uniapp 可以在h5 小程序 app等多端使用

技术栈

移动端 uniapp graceui

管理端 vue element

后台 springboot springsecurity mybatisPlus tio-websocket

主要功能

• 笔记创建 编辑 发布

• 点赞笔记、评论

• 回复笔记、评论

• 私信、客服聊天

• 后台笔记编辑 下架

• 后台博主冻结

• 后台客服系统

• 系统消息维护

思维导图

项目展示

项目启动

后台运行环境

• jdk1.8

• mysql5.7

• redis

启动步骤

1.下载pom文件依赖

2.导入项目中的sql

3.修改yml参数（端口号 数据库名）

4.如果 mysql 报错 order by和group by 执行sql报错sql_mode=only_full_group_by问题解决

SELECT @@GLOBAL.sql_mode;  

SELECT @@SESSION.sql_mode;  

set @@GLOBAL.sql_mode='STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION';  

set @@SESSION.sql_mode='STRICT_TRANS_TABLES,NO_ZERO_IN_DATE,NO_ZERO_DATE,ERROR_FOR_DIVISION_BY_ZERO,NO_ENGINE_SUBSTITUTION';  

FLUSH PRIVILEGES;  

5.打包 mvn clean package -Dmaven.test.skip=true 打包后jar文件可以正常运行

管理端前台运行环境

• node v14.21.3

• elementui 2.15.14

• vue 2.6.14

启动步骤

1.cd 根目录的web文件夹下

2.执行npm install下载依赖

3.执行npm run dev启动

4.修改.env.xx修改测试环境和正式环境端口

5.npm run build进行打包

6.如果出现lemon imui 依赖报错 解压根目录下dist.rar文件夹到lemon imui根目录下即可

移动端前台

hbudiler 3.99

vue 3

移动端前台使用了graceUi6.0 需授权后找我覆盖文件

包结构说名

后端

• 目前后端功能基本能满足我们需求

• 后续开发建立和system同级目录 进行功能开发即可

写到最后

代码地址 https://gitee.com/ddeatrr/springboot_vue_xhs

插件地址
这个就是一个对echarts的renderjs的封装。
用法也很简单。就是<uc-charts :option="option"/>
option变化自动更新。
app和web项目都是支持的。web的话你如果设置了web的根路径需要改下uc-charts.vue的文件的引用路径

简介
掌握真实项目开发技能！
本源码提供了一个完整的、已经实现的记账应用程序，使用了流行的uni-app-x框架进行前端构建，配合Apifox定义的API接口完成所有前后端交互逻辑。这不仅是一个学习如何在uni-app-x中创建高效、用户友好的界面的机会，更是一次深入了解实际项目开发流程的宝贵经验。
适合人群
无论是初学者还是有一定基础的开发者，这套源码都是提升技能的理想选择。对于那些渴望深入理解uni-app-x以及移动应用开发的人来说，这无疑是一笔值得投资的知识财富。

获取源码

清单文件添加文件读写权限

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />  
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />  
<uses-permission android:name="android.permission.MANAGE_EXTERNAL_STORAGE" />  

class FileUtils {  

          static checkPermission() {  
                const Build = plus.android.importClass('android.os.Build');  
                if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.R){  
                    const Environment =  plus.android.importClass("android.os.Environment");  
                    return Environment.isExternalStorageManager();  
                }  
                return true  
          }  

          static applyPermission(fn) {  
              const Build = plus.android.importClass('android.os.Build');  
              if(Build.VERSION.SDK_INT >= Build.VERSION_CODES.R){  
                var Intent = plus.android.importClass("android.content.Intent");  
                var Settings = plus.android.importClass("android.provider.Settings");  
                var Uri = plus.android.importClass("android.net.Uri");  
                var mainActivity = plus.android.runtimeMainActivity();  

                var intent = new Intent(Settings.ACTION_MANAGE_APP_ALL_FILES_ACCESS_PERMISSION);  
                var uri = Uri.fromParts("package", mainActivity.getPackageName(), null);  
                intent.setData(uri);  
                // intent.setFlags(Intent.FLAG_ACTIVITY_NEW_TASK);  
                mainActivity.startActivity(intent);   
              }  
              fn({state:'ok'})  
          }  
    }

if(FileUtils.checkPermission()==false){  
                    that.showLoading("请稍等")  
                    FileUtils.applyPermission(res => {  
                        uni.hideLoading()  
                    })  
                    return  
                }

7月20号，uniapp 官网“悄咪咪”的上线了 uniapp 开发鸿蒙应用 的文档，算是正式开启了 Vue3 + uniapp 开发鸿蒙应用 的时代。

<顺便吆喝一声，技术大厂年前捞人，前后端测试，待遇给的还不错，感兴趣可以试试~>

开发鸿蒙的前置准备
想要使用 uniapp 开发鸿蒙，我们需要具备三个条件：

DevEco-Studio 5.0.3.400 以上（下载地址：https://developer.huawei.com/consumer/cn/deveco-studio/）
鸿蒙系统版本 API 12 以上 （DevEco-Studio有内置鸿蒙模拟器）
HBuilderX-alpha-4.22 以上

PS： 这里不得不吐槽一下，一个 DevEco-Studio 竟然有 10 个 G......

安装好之后，我们就可以通过 开发工具 运行 示例代码

运行时，需要用到 鸿蒙真机或者模拟器。但是这里需要 注意： Windows系统需要经过特殊配置才可以启动，mac 系统最好保证系统版本在 mac os 12 以上
windows 系统配置方式（非 windows 用户可跳过）：
打开控制面板 - 程序与功能 - 开启以下功能

Hyper-V
Windows 虚拟机监控程序平台
虚拟机平台

注意: 需要win10专业版或win11专业版才能开启以上功能，家庭版需先升级成专业版或企业版

启动鸿蒙模拟器
整个过程分为三步（中间会涉及到鸿蒙开发者申请）：

下载 uni-app 鸿蒙离线SDK template-1.3.4.tgz （下载地址：https://web-ext-storage.dcloud.net.cn/uni-app/harmony/zip/template-1.3.4.tgz）
解压刚下载的压缩包，将解压后的模板工程在 DevEco-Studio 中打开

等待 Sync 结束，再 启动鸿蒙模拟器 或 连接鸿蒙真机（如无权限，则需要申请（一般 3 个工作日），申请地址：https://developer.huawei.com/consumer/cn/activity/201714466699051861/signup）

配置 HBuilderX 吊起 DevEco-Studio
打开HBuilderX，点击上方菜单 - 工具 - 设置，在出现的弹窗右侧窗体新增如下配置

注意：值填你自己的 DevEco-Studio 启动路径
js 代码解读复制代码"harmony.devTools.path" : "/Applications/DevEco-Studio.app"

创建 uni-app 工程

BuilderX 新建一个空白的 uniapp 项目，选vue3
在 manifest.json 文件中配置鸿蒙离线SDK路径（SDK 路径可在 DevEco-Studio -> Preferences(设置) z中获取）

编辑 manifest.json 文件，新增如下配置：

然后点击 运行到鸿蒙即可

总结
这样我们就有了一个初始的鸿蒙项目，并且可以在鸿蒙模拟器上运行。关于更多 uniapp 开发鸿蒙的 API，大家可以直接参考 uniapp 官方文档：https://zh.uniapp.dcloud.io/tutorial/harmony/dev.html#nativeapi

——转载自作者：程序员Sunday

参考博客uniapp Android 原生插件开发（Module 扩展为例·2022）

首先在这里贴上官方文档- uni原生语言插件开发教程，有官方文档了，还要写这篇文章是因为我在根据文档开发插件的过程中，还是碰到了很多问题，在Google，查阅官方论坛之后还是没有解决，最后自己摸索解决了，所以在这里记录一下。

前言

本篇文章重在介绍开发完插件后测试部署的过程，Android Studio的使用不做介绍

准备

根据官方文档下载并导入UniPlugin-Hello-AS工程到Android Studio

插件开发

在官方提供的项目中新建library的Module，复制uniplugin_module模块的build.gradle配置到新建module的build.gradle，可根据实际情况修改compileSdkVersion和targetSdkVersion。接下来创建Module类，写扩展方法。这一步骤官方文档写的也很详细。

插件调试

对于需求明确，有一定专业知识的开发者来说，开发一个插件并不难。关键是要调试，这里官方文档写的就不是很详细了。

首先说明一点：做好的插件最终是要放在uniapp项目中的。其实开发好的插件不经过调试直接放在uniapp也可以，但是谁也不能保证一次就能把插件写的很完美，而每一次修改插件放在uniapp后都需要重新打包自定义插件。而打包自定义插件可能是一个痛苦的过程--可能需要等待的时间很长，打包次数也有限制

所以要在UniPlugin-Hello-AS工程下进行调试，这个工程相当于App离线打包，只是官方配置号了一个必要的环境

离线打包调试

离线打包调试的必要条件是要有Appkey，而申请AppKey需要有Android 签名文件，如果没有可以自己百度搜索创建Android 签名文件或者在Dcloud开发者后台创建签名文件，可参考官方文档申请Appkey

在Android Studio中修改配置文件

有了AppKey之后，修改UniPlugin-Hello-AS工程app模块的配置文件

1. 修改namespace和applicationId为自己的包名-要和开发者后台中的一致
2. 修改签名文件配置(signingConfigs)，其中keyAlias、keyPassword、storeFile都要使用自己申请AppKey时使用的签名文件信息
3. 修改清单文件(AndroidManifest)里的dcloud_appkey的value--就是申请的之前申请的AppKey
4. 在assets资源目录下的dcloud_uniplugins.json配置文件增加自己的插件配置，参考官方文档，其中name属性要记住，之后用得到
5. 再修改assets/data/dcloud_control.xml中的appid的值，是自己的uniapp应用对应的AppID

至此UniPlugin-Hello-AS工程app模块的配置文件修改完成

引入插件

通过使用uni.requireNativePlugin获取插件对象。

const pluginImpl = uni.requireNativePlugin('插件 name')//这里的插件name就是刚才在dcloud_uniplugins.json文件里配置的插件的name

生成本地App打包资源

在自己的uniapp项目里选择 发行--->APP-本地打包--->生成本地打包App资源 等待资源生成

等待资源生成后复制生成的资源，要复制www文件夹上一层的文件夹，即__UNI__878995A这个格式的文件夹，复制这个文件夹到UniPlugin-Hello-AS工程app模块的assets\apps目录下

至此测试准别工作完成，可以在Android Studio里运行UniPlugin-Hello-AS项目进行测试了，测试没问题后就可以生成uniapp插件了

生成uniapp插件

网上的文档都是选择Android Studio的可视化编译命令进行生成aar文件的，好多同学说找不到assembleRelease，也有同学给出了处理方案，这其实就是一个命令，完全可以自己执行命令，如下图，其中uniapp-ext是自己编写插件是新建的module名称

构建成功之后就可以在build/outputs/arr目录下找到编译好的插件

引入插件到uniapp项目

创建目录：在uniapp项目中创建nativeplugins目录(如有可忽略这一步)，然后准备相关文件，官方示例如下

|-- DCloud-RichAlert --->插件id命名的文件夹(个人认为这里是一插件库id命名的文件夹，就是这个插件库里可以有很多个插件，这些很多个插件公用这个插件库id)  
   |-- android       --->安卓插件目录  
      |--libs  
         - xxx.jar    --->依赖的jar  
         - libxxx.so  --->依赖的so文件  
      - vendor.aar   --->依赖的aar  
      - unipluginRichAlert.aar --->插件module的aar  

创建package.json文件并填写必要的信息。放入到android目录下，这里对package.json做一下说明，因为我在这个文件上吃了大坑。package.json里有一些可选配置，如果在编写插件时使用了，就一定要加上，否则也有可能提示当前运行的基座不包含原生插件的提示，比如dependencies、permissions、useAndroidX，因为我的插件使用了这些配置，可能导致生成自定义基座时，其实插件是没有生成成功的，最后导致使用requireNativePlugin的时候一致提示当前运行的基座不包含原生插件，<u>所以你的插件使用的一些额外的配置一定要在package.json里都配置上</u>

{  
    "name": "插件名称",  
    "id": "DCloud-RichAlert", // 插件库标识(这里一定要和上面创建的文件夹名称一致，即插件库的id)  
    "version": "插件版本号",  
    "description": "插件描述信息",  
    "_dp_type":"nativeplugin",  
    "_dp_nativeplugin":{  
        "android": {  
            "plugins": [  
                {  
                    "type": "module",  
                    //这个name就是dcloud_uniplugins.json文件里配置的插件的name,也是使用requireNativePlugin时的参数  
                    "name": "DCloud-RichAlert_TestModule", //id为前缀 这里的name也可以和插件库标识一致，也可以一插件库标识为前缀  
                    "class": "uni.dcloud.io.uniplugin_richalert.TestModule"  
                },  
                {  
                    "type": "component",  
                    "name": "DCloud-RichAlert_TestComponent",  
                    "class": "uni.dcloud.io.uniplugin_richalert.TestComponent"  
                }  
            ]  
        }  
    }  
    ...  
    ...  

<u>在uniapp项目的manifest.json文件中添加配置好的插件</u>，这一步也很重要。

至此引入完成

参考博客uniapp Android 原生插件开发（Module 扩展为例·2022）

首先在这里贴上官方文档- uni原生语言插件开发教程，有官方文档了，还要写这篇文章是因为我在根据文档开发插件的过程中，还是碰到了很多问题，在Google，查阅官方论坛之后还是没有解决，最后自己摸索解决了，所以在这里记录一下。

前言

本篇文章重在介绍开发完插件后测试部署的过程，Android Studio的使用不做介绍

准备

根据官方文档下载并导入UniPlugin-Hello-AS工程到Android Studio

插件开发

在官方提供的项目中新建library的Module，复制uniplugin_module模块的build.gradle配置到新建module的build.gradle，可根据实际情况修改compileSdkVersion和targetSdkVersion。接下来创建Module类，写扩展方法。这一步骤官方文档写的也很详细。

插件调试

对于需求明确，有一定专业知识的开发者来说，开发一个插件并不难。关键是要调试，这里官方文档写的就不是很详细了。

首先说明一点：做好的插件最终是要放在uniapp项目中的。其实开发好的插件不经过调试直接放在uniapp也可以，但是谁也不能保证一次就能把插件写的很完美，而每一次修改插件放在uniapp后都需要重新打包自定义插件。而打包自定义插件可能是一个痛苦的过程--可能需要等待的时间很长，打包次数也有限制

所以要在UniPlugin-Hello-AS工程下进行调试，这个工程相当于App离线打包，只是官方配置号了一个必要的环境

离线打包调试

离线打包调试的必要条件是要有Appkey，而申请AppKey需要有Android 签名文件，如果没有可以自己百度搜索创建Android 签名文件或者在Dcloud开发者后台创建签名文件，可参考官方文档申请Appkey

在Android Studio中修改配置文件

有了AppKey之后，修改UniPlugin-Hello-AS工程app模块的配置文件

1. 修改namespace和applicationId为自己的包名-要和开发者后台中的一致
2. 修改签名文件配置(signingConfigs)，其中keyAlias、keyPassword、storeFile都要使用自己申请AppKey时使用的签名文件信息
3. 修改清单文件(AndroidManifest)里的dcloud_appkey的value--就是申请的之前申请的AppKey
4. 在assets资源目录下的dcloud_uniplugins.json配置文件增加自己的插件配置，参考官方文档，其中name属性要记住，之后用得到
5. 再修改assets/data/dcloud_control.xml中的appid的值，是自己的uniapp应用对应的AppID

至此UniPlugin-Hello-AS工程app模块的配置文件修改完成

引入插件

通过使用uni.requireNativePlugin获取插件对象。

const pluginImpl = uni.requireNativePlugin('插件 name')//这里的插件name就是刚才在dcloud_uniplugins.json文件里配置的插件的name

生成本地App打包资源

在自己的uniapp项目里选择 发行--->APP-本地打包--->生成本地打包App资源 等待资源生成

等待资源生成后复制生成的资源，要复制www文件夹上一层的文件夹，即__UNI__878995A这个格式的文件夹，复制这个文件夹到UniPlugin-Hello-AS工程app模块的assets\apps目录下

至此测试准别工作完成，可以在Android Studio里运行UniPlugin-Hello-AS项目进行测试了，测试没问题后就可以生成uniapp插件了

生成uniapp插件

网上的文档都是选择Android Studio的可视化编译命令进行生成aar文件的，好多同学说找不到assembleRelease，也有同学给出了处理方案，这其实就是一个命令，完全可以自己执行命令，如下图，其中uniapp-ext是自己编写插件是新建的module名称

构建成功之后就可以在build/outputs/arr目录下找到编译好的插件

引入插件到uniapp项目

创建目录：在uniapp项目中创建nativeplugins目录(如有可忽略这一步)，然后准备相关文件，官方示例如下

|-- DCloud-RichAlert --->插件id命名的文件夹(个人认为这里是一插件库id命名的文件夹，就是这个插件库里可以有很多个插件，这些很多个插件公用这个插件库id)  
   |-- android       --->安卓插件目录  
      |--libs  
         - xxx.jar    --->依赖的jar  
         - libxxx.so  --->依赖的so文件  
      - vendor.aar   --->依赖的aar  
      - unipluginRichAlert.aar --->插件module的aar  

创建package.json文件并填写必要的信息。放入到android目录下，这里对package.json做一下说明，因为我在这个文件上吃了大坑。package.json里有一些可选配置，如果在编写插件时使用了，就一定要加上，否则也有可能提示当前运行的基座不包含原生插件的提示，比如dependencies、permissions、useAndroidX，因为我的插件使用了这些配置，可能导致生成自定义基座时，其实插件是没有生成成功的，最后导致使用requireNativePlugin的时候一致提示当前运行的基座不包含原生插件，<u>所以你的插件使用的一些额外的配置一定要在package.json里都配置上</u>

{  
    "name": "插件名称",  
    "id": "DCloud-RichAlert", // 插件库标识(这里一定要和上面创建的文件夹名称一致，即插件库的id)  
    "version": "插件版本号",  
    "description": "插件描述信息",  
    "_dp_type":"nativeplugin",  
    "_dp_nativeplugin":{  
        "android": {  
            "plugins": [  
                {  
                    "type": "module",  
                    //这个name就是dcloud_uniplugins.json文件里配置的插件的name,也是使用requireNativePlugin时的参数  
                    "name": "DCloud-RichAlert_TestModule", //id为前缀 这里的name也可以和插件库标识一致，也可以一插件库标识为前缀  
                    "class": "uni.dcloud.io.uniplugin_richalert.TestModule"  
                },  
                {  
                    "type": "component",  
                    "name": "DCloud-RichAlert_TestComponent",  
                    "class": "uni.dcloud.io.uniplugin_richalert.TestComponent"  
                }  
            ]  
        }  
    }  
    ...  
    ...  

<u>在uniapp项目的manifest.json文件中添加配置好的插件</u>，这一步也很重要。

至此引入完成

当你上传的文件名字中包含.时会造成上传失败，显示类型错误。比如你上传一个音频文件“1.2章录音.m4a”，不是因为m4a不对，而是因为1.2章录音这个文件名中包含了句号
.

main.js 文件最后不能写注释！！！
不然就会出现空白页！

像第一张图，最后一行是注释，把最后一行注释删掉，或者换个地方就可以了。

官网文档里关于main.js部分，也没有对此的提醒，真无奈啊~

需求：统一确认取消按钮位置
当前问题：在微信、H5、App-iOS中，确认按钮默认在右边，而Android默认在左边，官方的建议是把按钮文字进行替换，即“确定”按钮的文字其实可以设置为“取消”

经过测试，这套方案行不通，因为点击原始取消按钮和返回键返回结果是一样的，无法区分，如果强行替换按钮文字，导致的结果就是，返回按钮会导致触发确认按钮的事件，希望官方能多给出一个参数，能够区分App按钮点击和返回键

另外还做过测试，plus.key.addEventListener()和onBackPress()在弹窗过程中无效，所以也不能用他们来控制返回键的默认事件

说明

Linux HBuilderX Cli 已完成开发，欢迎大家试用反馈。

这个cli的用途是让开发者可以在linux服务器上调用HBuilderX cli，来实现程序化操作打包app、上传unicloud云函数。

为持续集成、自动化发布、类saas业务的自动化给客户部署等业务提供支持。

请注意是cli程序，不是HBuilderX可视化编辑器。仅适用于Linux命令行调用。

目前我们仅在Ubuntu 24.04.1 LTS系统上进行了测试，并没有在其它Linux发行版上测试，如有问题，请在本帖反馈

下载地址

Linux HBuilderX cli 4.55-正式版 下载地址
Linux HBuilderX cli 4.54-Alpha版 下载地址
Linux HBuilderX cli 4.57-Alpha版 下载地址

备注：

1. 4.53-alpha版，压缩包中缺少amazon-corretto。amazon-corretto下载地址

常见使用命令

1. 安装包下载解压

wget -c https://download1.dcloud.net.cn/download/HBuilderX.4.51.2025010802-dev.linux_x64.full.tar.gz  
tar -zxvf HBuilderX.4.51.2025010802-dev.linux_x64.full.tar.gz

2. 使用cli启动HBuilderX程序

cd HBuilderX目录  
./cli open 

启动后，可使用ps -ef | grep HBuilderX查看HBuilderX是否启动。

3. app打包操作命令

# HBuilderX登录。注意app打包必须登录。原因：国家相关部门要求  
cli user login --username <用户名>  --password <密码>  

# 导入要打包的项目  
cli project open --path <项目路径>  

# android ios打包。文档：https://hx.dcloud.net.cn/cli/pack  
cli pack --config 配置文件

完整的cli文档见：https://hx.dcloud.net.cn/cli/README

报Bug

如果大家遇到问题，请大家到https://issues.dcloud.net.cn/pages/issues/report-req?mid=pluginsCLI.linux报Bug。提交问题，请包含以下内容：

1. 操作系统信息
2. 详细的命令示例、截图