职位标题：应届前端工程师

工作地点：北京海淀区学院路西直门北

工资范围：15K~20K

公司描述：

聪明的年轻人，欢迎加入DCloud。
DCloud为全球几百万开发者提供开发工具，包括HBuilder、uni-app、uniCloud。
在中国，包括web应用、小程序、app在内，半数以上的数字应用由DCloud的工具开发。
DCloud已获得C轮融资、且已盈利，公司财务稳健、技术氛围浓厚。
2023年，DCloud计划招募一批聪明的年轻人。

• 在这里，你可以学习底层编程工具的原理、理解编程的本质
• 在这里，你可以参与开发中国自己的编程语言（uts）、中国自己的ide（HBuilder），或者为uni-app等优秀框架添砖加瓦。

要求：

• 985/211大学毕业，毕业时间不超过1年
• 熟悉js及常见框架
• 有编程实战经验
• 有清晰的逻辑思维
• 勇敢、积极、喜欢创新、不保守、不怕挑战、不怕犯错
• 不管学习成绩还是社会活动，有证明自己能力的标志
• 熟悉vue、ts或uni-app是加分项

职责描述：

• 优化开发工具和开发语言，帮助广大开发者提高生产效率、降低生产成本。

我们提供：

• 物质激励
  • 有竞争力的薪资福利
  • 居住在公司附近提供每月2K房补；每日还有饭补、零食
  • 广泛的员工持股计划，无需上市即可套现的机制，让优秀的年轻人有机会博得更高收益
• 学习机会
  • 研究学习编程的底层，开发编程语言、制造开发框架、学习编译原理、打造ide
  • 坐在业内顶尖高手旁边，接受公司专项的应届生培训
• 良好的氛围
  • 技术极客范，不僵化、弱管理
• 成就感
  • 开发中国自己的编程语言、中国自己的ide
  • 用你的努力，让中国的数字应用建设更加高效，并且辐射更多国家

欢迎投递简历到 hr2013@dcloud.io

传统的应用上架过程通常繁琐且耗时，尤其是在上传应用到App Store的环节。但是现在，有了初雪云一键上传ipa工具，这个问题迎刃而解。无论是新的应用上架还是应用更新，只需打开初雪云一键上传工具，您可以轻松上传IPA文件至App Store，省去了复杂的手动操作步骤。

自动化处理：该工具能够自动处理IPA文件的签名、版本号、元数据等信息，确保应用准确无误地上传到App Store。

快速上传：利用初雪云的高效云端服务，一键上传工具能够以极快的速度将您的应用提交到App Store，最大程度地缩短了上传时间。

安全可靠：初雪云拥有多重安全保障措施，确保您的应用和开发者账号的安全。所有上传过程都会经过严格的加密和验证，保护您的隐私和权益。

立即体验初雪云一键上传工具，将您的应用推向更广阔的市场，让更多用户享受您的精彩应用！联系我们了解更多详情并开始您的上架之旅。

码云地址

//该demo主要用于uniapp中，uni.request请求数据中出现NULL值而导致无法获取请求结果的解决方式  
//该函数核心在于dataType属性的转换            
//对于部分请求数据中含有NULL值，无法获取请求数据的情况优先转换为非josn格式，这里用text              
getUserinfo() {  
    const _this = this  
    uni.request({  
        url: "url",  
        header: {'Content-Type': 'application/x-www-form-urlencoded'},  
        method: "GET",  
        dataType: 'text',  
        success(res) {  
            try {  
                var jsonData = JSON.parse(res.data);  
                var replacedData = _this.replaceNullWithEmptyString(jsonData);  
                console.log(replacedData); // 替换后的数据  
                // 访问数据示例  
                console.log(replacedData.data.XXXX)  
            } catch (error) {  
                console.error('解析数据出错:', error);  
            }  
        },  
        fail: function(err) {  
            console.log(err);  
        }  
    })  
},  
/*该函数用于替换手动解析后的数据中的NULL为" "空字符串*/  
replaceNullWithEmptyString(data) {  
    const _this = this  
    if (typeof data === 'object' && data !== null) {  
        if (Array.isArray(data)) {  
            return data.map(item => _this.replaceNullWithEmptyString(item));  
        } else {  
            var newData = {};  
            for (var key in data) {  
                if (data.hasOwnProperty(key)) {  
                    newData[key] = _this.replaceNullWithEmptyString(data[key]);  
                }  
            }  
            return newData;  
        }  
    } else {  
        return data === null ? '' : data;  
    }  
}

看我这篇文章解决打包时未添加livepusher模块 打包时未添加livepusher模块

给你一个字符串num和一个整数k。其中，num 表示一个很大的整数，字符中的每个字符依次对应整数上的各个数位
你可以交换这个整数相邻数位的数字 最多k次
请你返回你能得到的最小整数，并以字符串形式返回.

function trunNum(num,k){  
    let numArry = num.split('');  
    let nowIndex2 =0;  
    for (let j = 0; j < k; j++) {     
        // 偶对 241267--214267--124267--122467，奇连 321--231--213--123  
        if(numArry.length % 2 == 0){  
            let nowIndex = 0;  
            let K = numArry.length / 2 + (numArry.length / 2 -1),bas = (numArry.length / 2);  
            for (let i = 1; i <= K; i++) {  
                if(i<=bas){  
                    if((numArry[nowIndex]>=numArry[nowIndex+1])){  
                        let newNum = numArry[nowIndex],nextNum = numArry[nowIndex+1];  
                        numArry[nowIndex] = nextNum;  
                        numArry[nowIndex+1] = newNum;  
                        nowIndex = i==bas?1:i+1;  
                        break;  
                    }else{  
                        nowIndex = i==bas?1:i+1;  
                    }  

                }else{  
                    if((numArry[nowIndex]>=numArry[nowIndex+1])){  
                        let newNum = numArry[nowIndex],nextNum = numArry[nowIndex+1];  
                        numArry[nowIndex] = nextNum;  
                        numArry[nowIndex+1] = newNum;  
                        nowIndex = K==i?0:(i-bas)*2+1;  
                        break;  
                    }else{  
                        nowIndex = K==i?0:(i-bas)*2+1;  
                    }  
                }  

            }  
        }else{  
            for (let i = nowIndex2; i < numArry.length; i++) {  
                if(numArry[i]<=numArry[i+1]&&i==numArry.length-2){  
                    i=0;  
                    nowIndex2 = 0;  
                }  
                if((numArry[i]>=numArry[i+1])){  
                    let newNum = numArry[i],nextNum = numArry[i+1];  
                    numArry[i] = nextNum;  
                    numArry[i+1] = newNum;  
                    nowIndex2 = i==numArry.length-1?0:i+1;  
                    break;  
                }else{  
                    nowIndex2 = i==numArry.length-1?0:i+1;  
                }  
            }  
        }  
    }  
    return numArry.join("");  
}

想法几分钟，编程几小时！

  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
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。