overflow: hidden;  
 -webkit-line-clamp: 2;  
 text-overflow: ellipsis;  
 display: -webkit-box;  
 -webkit-box-orient: vertical;

物美价廉

前几天有给大家分享一款最新uniapp+vue3仿制chatGPT会话实战项目，今天给大家分享其中用到的markdown语法解析组件。

https://ask.dcloud.net.cn/article/40604

如上图：支持 h5/小程序/APP端 渲染markdown语法。

该组件已经发布到了插件市场，免费下载使用。

https://ext.dcloud.net.cn/plugin?id=13307

原理是使用了markdown-it和highlight.js两款插件进行语法解析。

// 引入markdown-it和highlight.js插件  
import MarkdownIt from '@/plugins/markdown-it.min.js'  
import hljs from '@/plugins/highlight/highlight.min.js'  
// import '@/plugins/highlight/github-dark.min.css'  
import '@/plugins/highlight/atom-one-light.css'  
import parseHtml from '@/plugins/html-parser.js'

快速使用

• 基础用法

const mdvalue = '### uniapp markdwon'  
<ua-markdown :source="mdvalue" />

• 禁用行号

<ua-markdown :source="xxx" :showLine="false" />

如果大家在项目中有需要用到，欢迎下载使用，一起交流学习哈~~~

全栈开发工程师，小程序、app、web pc、桌面应用均可
时间充裕，诚心合作， 有需要请联系我 V：p15927027721

插件：xxx
需要的依赖：在build.gradle中的implementation 'com.github.Acccord:AndroidSerialPort:1.5.0'是我的远程依赖
将插件打包成xxx.aar
hubuilder X里的项目按照官方文档部署好相关内容。
在package.json里的android下的dependencies里面添加数组

"android": {  
            "plugins": [{  
                "type": "module",  
                "name": "xxx",  
                "class": "com.xxx.xxx.x"  
            }],  
            "dependencies":[  
                "com.github.Acccord:AndroidSerialPort:1.5.0"  
            ],  
            "integrateType": "aar"  
        }

打包自定义基座
运行

今天分享三款大家可能在uniapp项目中用到的组件。目前已经发布至插件市场，可免费下载使用。

• uniapp自定义顶部导航条组件Navbar

https://ext.dcloud.net.cn/plugin?id=5592

• uniapp自定义Tabbar组件

https://ext.dcloud.net.cn/plugin?id=5593

• uniapp增强版Input编辑框

https://ext.dcloud.net.cn/plugin?id=13275

大家如果在项目中有需要用到的话，欢迎免费下载使用。

之前有给大家分享一个electron桌面端GPT实例，今天分享的是全端uniapp-chatgpt会话实例项目。

uniChatGPT 一款基于uni-app+vite4+vue3+pinia+uview-plus等技术构建多端仿制ChatGPT应用实例模板项目。支持编译到h5+小程序+APP端，支持渲染markdown语法及代码高亮、解决软键盘撑起布局痛点等问题。

electron25+vue3客户端仿制chatGPT应用程序EXE

技术栈

• 编码工具：HbuilderX 3.8.4
• 框架技术：Uniapp+Vite4+Vue3+Pinia
• UI组件库：uView-plus^3.1.31
• markdown渲染：markdown-it
• 代码高亮：highlight.js
• 本地缓存：pinia-plugin-unistorage
• 支持编译：小程序+H5+APP端

uni-chatgpt 支持三端渲染markdown语法/代码高亮，解决了小程序/App端键盘撑跑布局痛点。

项目层结构

采用标准的HBuilderX编辑器创建项目，采用vue3 setup语法编码开发。

main.js配置

使用vue3语法，引入组件库、pinia状态管理。

/**  
 * 主入口配置  
  */  

import App from './App'  
import { createSSRApp } from 'vue'  

// 引入pinia状态管理  
import pinia from '@/store'  

// 引入uview-plus组件库  
import uviewplus from '@/uview-plus'  

export function createApp() {  
    const app = createSSRApp(App)  
    app.use(pinia)  
    app.use(uviewplus)  
    return {  
        app,  
        pinia  
    }  
}

App.vue模板

同样采用vue3 setup语法编码。

<script setup>  
    import { provide } from 'vue'  
    import { onLaunch, onShow, onHide, onPageNotFound } from '@dcloudio/uni-app'  

    onLaunch(() => {  
        console.log('App Launch')  

        // 隐藏tabBar  
        uni.hideTabBar()  
        // 初始化  
        initSysInfo()  
    })  

    onShow(() => {  
        console.log('App Show')  
    })  

    onHide(() => {  
        console.log('App Hide')  
    })  

    onPageNotFound((e) => {  
        console.warn('Router Error>>', ` No match path "${e.path}" `);  
        uni.redirectTo({  
            url: '/pages/404/index'  
        })  
    })  

    const initSysInfo = () => {  
        uni.getSystemInfo({  
            success: (e) => {  
                // 获取手机状态栏高度  
                let statusBar = e.statusBarHeight  
                let customBar  

                // #ifndef MP  
                customBar = statusBar + (e.platform == 'android' ? 50 : 45)  
                // #endif  

                // #ifdef MP-WEIXIN  
                // 获取胶囊按钮的布局位置信息  
                let menu = wx.getMenuButtonBoundingClientRect()  
                // 导航栏高度 = 胶囊下距离 + 胶囊上距离 - 状态栏高度  
                customBar = menu.bottom + menu.top - statusBar  
                // #endif  

                // #ifdef MP-ALIPAY  
                customBar = statusBar + e.titleBarHeight  
                // #endif  

                // 目前globalData在vue3 setup支持性不好，改为provide/inject方式  
                provide('globalData', {  
                    statusBarH: statusBar,  
                    customBarH: customBar,  
                    platform: e.platform  
                })  
            }  
        })  
    }  
</script>

uniapp vue3自定义导航条/底部菜单栏

如下图：项目中采用沉浸式导航栏+底部Tabbar组件。

组件采用easycom组件结构，直接使用即可。

<ua-navbar back="false" custom :title="title" size="40rpx" center fixed :bgcolor="bgcolor">  
    <template #left>  
        <view @click="showSidebar=true"><text class="iconfont ve-icon-menuon"></text></view>  
    </template>  
    <template #right>  
        <text class="iconfont ve-icon-plus fs-36" @click="handleNewChat"></text>  
    </template>  
</ua-navbar>

目前这两个组件已经发布到插件市场，大家免费下载使用。

https://ext.dcloud.net.cn/plugin?id=5592
https://ext.dcloud.net.cn/plugin?id=5593

uni-app vue3自定义增强版Input输入框

如下图：项目中input输入框支持多行文本、自定义前缀/后缀插槽等功能。

ua-input增强版输入框已经发布插件市场，免费下载使用。

https://ext.dcloud.net.cn/plugin?id=13275

调用非常简单，支持多种方式自定义组件。

• 基础用法

<ua-input v-model="value" placeholder="请输入" />

• 密码框/自动获取焦点

<ua-input v-model="value" showPassword autofocus />

• 多行输入/自适应高度/清除功能

<ua-input  
    ref="inputRef"  
    v-model="inputValue"  
    type="textarea"  
    :autosize="{maxRows: 6}"  
    clearable  
    placeholder="多行文本..."  
    style="margin: 0 5px; width: 100%;"  
/>

• 自定义自适应最大高度、清除事件、前置/后置插槽

<ua-input  
    class="flex1"  
    v-model="editorText"  
    type="textarea"  
    :autosize="{maxRows: 6}"  
    clearable  
    placeholder="Prompt..."  
    @clear="handleClear"  
    style="margin: 0 5px; width: 100%;"  
/>  
    <template #prefix>  
        <text class="iconfont ve-icon-search"></text>  
    </template>  
    <template #suffix>  
        <text class="iconfont ve-icon-photo"></text>  
        <text class="iconfont ve-icon-audio"></text>  
    </template>  
</ua-input>

OK，基于uni-app+vue3开发跨端gpt项目就先分享到这里了。

链接：https://juejin.cn/post/7249347651787243581
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

要使用这个HttpRequest类，您需要先导入它，并创建一个实例对象。然后，您可以使用该实例对象调用各种方法来发送HTTP请求。

以下是使用HttpRequest类的示例代码：

const HttpRequest = require('./HttpRequest'); // 导入HttpRequest类  

const request = new HttpRequest({ // 创建HttpRequest实例  
    baseURL: 'https://api.example.com',  
    errorHandler: (err) => {  
        console.error(err);  
    },  
    tokenKey: 'token',  
    newTokenKey: 'New-Token',  
    refreshURL: '/refresh'  
});  

// 发送GET请求  
request.Get('/users', { page: 1, limit: 10 })  
    .then(response => {  
        console.log(response);  
    })  
    .catch(error => {  
        console.error(error);  
    });  

// 发送POST请求  
request.Post('/users', { name: 'John', age: 25 })  
    .then(response => {  
        console.log(response);  
    })  
    .catch(error => {  
        console.error(error);  
    });  

// 发送PUT请求  
request.Put('/users/1', { name: 'John Doe', age: 26 })  
    .then(response => {  
        console.log(response);  
    })  
    .catch(error => {  
        console.error(error);  
    });  

// 发送DELETE请求  
request.Delete('/users/1')  
    .then(response => {  
        console.log(response);  
    })  
    .catch(error => {  
        console.error(error);  
    });  

在上面的示例中，我们首先导入了HttpRequest类。然后，我们创建了一个名为request的HttpRequest实例，并传入了一些配置参数。接下来，我们使用该实例调用了Get、Post、Put和Delete方法来发送不同类型的HTTP请求。每个方法都返回一个Promise，我们可以使用.then()来处理成功的响应，使用.catch()来处理错误。

对于文件的上传和下载，您可以使用HttpRequest类中的Download和Upload方法。以下是使用示例：

// 文件下载示例  
const filesToDownload = ['file1.txt', 'file2.txt', 'file3.txt'];  
request.Download('/files/', filesToDownload)  
  .then(filePaths => {  
    console.log('文件下载成功：', filePaths);  
    // 在这里可以对下载的文件进行处理  
  })  
  .catch(error => {  
    console.error('文件下载失败：', error);  
  });  

// 文件上传示例  
const filesToUpload = ['path/to/file1.jpg', 'path/to/file2.jpg', 'path/to/file3.jpg'];  
request.Upload('/upload/', filesToUpload)  
  .then(responseData => {  
    console.log('文件上传成功：', responseData);  
    // 在这里可以对上传成功的响应数据进行处理  
  })  
  .catch(error => {  
    console.error('文件上传失败：', error);  
  });

在上面的示例中，我们首先定义了要下载的文件名数组filesToDownload和要上传的文件路径数组filesToUpload。然后，我们分别使用Download和Upload方法来进行文件的下载和上传操作。

对于文件下载，我们调用Download方法并传入文件的相对路径/files/和要下载的文件名数组filesToDownload。该方法返回一个Promise，当下载成功时，会将临时文件路径数组作为参数传递给.then()回调函数。您可以在回调函数中对下载的文件进行处理。

对于文件上传，我们调用Upload方法并传入文件的相对路径/upload/和要上传的文件路径数组filesToUpload。该方法返回一个Promise，当上传成功时，会将响应数据作为参数传递给.then()回调函数。您可以在回调函数中对上传成功的响应数据进行处理。

请注意，文件下载和上传的路径需要根据您的实际情况进行调整。

今年3月份，个推将数智运营服务在消息推送场景率先落地，发布了消息推送专项运营提升方案。目前，该方案已经在游戏社交、影音资讯等行业应用，在提升消息到达率和点击率等方面表现出显著效果。尤其是TT语音，通过个推消息推送专项运营提升方案，不仅保障了消息的稳定下发，还通过文案圈人模型，高效挖掘目标用户群，使整体消息推送点击率提升了近120%。那么，个推消息推送服务到底如何帮助APP提升消息推送点击率呢？

秘诀一：智选时机，全面提升消息到达率
个推消息推送实现了智选时机，帮助APP在合适的时机下发消息。APP可以使用个推消息推送服务，实时查询设备当前在线状态，对用户属性、设备使用场景等维度综合分析，预测出最佳的用户触达时机。

秘诀二：标签圈人，为TA推送专属内容
个推作为一家数据智能服务商，拥有深厚的数据能力，形成了数千种画像标签和亿级别的特征数据，帮助APP精准洞察用户基础属性、兴趣偏好、场景活动特征等，实现精细化的用户分组分群。APP可以使用行为规则、画像标签快速圈选特定人群，并一键对接给个推消息推送平台，针对性推送他们感兴趣的内容，从而吸引用户点击。

秘诀三：模型圈人，AI匹配推送文案和人群
个推还将算法建模的能力融入到消息推送服务中，提供文案圈人模型，让AI学习文案特征，智能预测对该推送文案有更高点击概率的人群，从而实现把合适的内容推送给合适的人群。比如，某数千万级日活泛娱乐APP，使用个推文案圈人模型，高效挖掘目标人群，实现文案与TA用户的精准匹配，使整体消息推送点击率提升了超50%。

秘诀四：富媒体推送样式，吸引用户点击
个推提供大文本、大图、纯图片、消息重弹、角标、换底图、Emoji、消息分组等丰富的推送样式。APP可以创建更有视觉冲击力和吸引力的消息推送样式，从而吸引用户点击。

秘诀五：完整消息链路查询，持续优化推送效果
个推还提供完善的推送数据报表以及消息链路查询等服务。借助快速回流的后效数据，APP一方面可以结合A/B test分组推送等功能，对不同的人群、推送文案、推送时机进行测试对比，帮助优化推送策略；另一方面APP也可以将后效数据“喂”给AI模型继续学习，不断提升模型的预测能力。而在每一次推送和运营活动中表现出高点击、高转化的优质人群和优质文案，APP也可以将其沉淀下来，形成模板，用于下一次的推送或广告投放，持续优化推送效果。

个推消息推送专项运营提升方案围绕用户触达这一环节，将消息推送、数据分析、算法模型等能力以及自身积累的丰富运营经验整合，为APP开展数智化运营提供切实可行的场景入口。

https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/getPhoneNumber.html

uniapp在开发支付宝小程序时，不可避免使用支付宝插件能力，大部分情况下插件是直接引入使用的，即静态引入，如下图所示

按照 ios 安心打包证书安装 文档操作完成，还是报错签名失败。
怀疑是 AppleWWDRCA.cer 签名过期问题，这种应该怎么解决啊？