H5嵌入小程序适配方案

时间过去了两个多月,2024已经到来,又老了一岁。头发也掉了好多。在这两个月时间里都忙着写页面,感觉时间过去得很快。没有以前那么轻松了。也不是遇到了什么难点技术,而是接手了一个很烂得项目。能有多烂,一个页面发起六次同一个请求得存在,不得已又要重构页面。最近呢,在做webapp,h5,小程序,钉钉得适配,都是用一套代码。可以说都是h5链接得形式引入。无非显示东西不一样,这个不一样得东西,一般都是头部,跟下面得导航栏显示,功能得适配。不同手机机型得适配,也无非两种机型,安卓,IOS,线上问题得调试,还有屏幕尺寸得适配。不得不说这些真的掉头发。这篇主要是h5嵌入小程序,以及app适配方案。

说明

本文是针对是把h5应用嵌入其它平台得流程。不是单独taro发布一个小程序,单独打包成app得流程,是从一个主平台直接进入一个子系统得嵌入适配方案。所以描述得时候需要注意理解,我们是做了单点登录得。直接是使用一套 “build:h5”: “taro build --type h5”,进行得方案。当然不同得单独做登录得时候无法就是taro去获取当前得环境是weapp还是h5。我们得单点登录采用得方案是凭借在url里面得环境判断也是通过url方式。不是cooike跨域共享。这是因为平台很早就有的了。所以需要注意理解。不过这篇主要讲得是h5嵌入小程序

一、h5嵌入小程序适配流程

1、H5项目编译。基于自己的app项目,仍编译成h5环境的代码,就不存在启动weapp的情况了。换句话说,就是都用h5页面了。

2、照文档进行适配。根据本文第二点和第三点所述,代码层面做评估适配开发。

3、选择性使用sdk。如项目中不涉及文件类(上传下载)操作,适配工作可至本文第三点第4点即可;如涉及,请按照三.5描述进行sdk引入适配。

4、发布更新测试调试。同app,项目正常部署后,生成的h5地址就是最终通过平台小程序嵌入的h5地址,更新完成后,进行集成联调;但有一点和app不同,h5地址必须是映射过的,否则小程序集成环境无法正常访问。

二、 页面结构适配

1.导航栏:

思想上,app是需要导航栏得,小程序是自带固定得导航栏得。当是小程序时去除头部导航栏,顶部栏不能有任何东西,小程序的webview固定了导航栏,只允许修改基础配置,背景色,标题等。记得每个页面都要改,建议添加全局的判断方法.。所以这时候封装导航栏时,这时候就要考虑环境了。

2.页面内容得适配:

总体思想,采用媒体查询为基准,大得调整(有些页面在一些尺寸得屏幕需要另外得展示),页面区间采用flex布局。

因为我们使用得是taro,在 Taro 中尺寸单位建议使用 px、 百分比 %,Taro 默认会对所有
单位进行转换。在 Taro 中书写尺寸按照 1:1 的关系来进行书写,即从设计稿上量的长度 100px,那么尺寸书写就是 100px,当转成微信小程序的时候,尺寸将默认转换为 100rpx,当转成 H5 时将默认转换为以 rem 为单位的值。

3.路由切换:

尽量采用路由跳转,为什么内,如果采用tabs进行切换时候,如果时app返回操作还能进行处理,如果是微信小程序,上面返回就直接让你退出了。为此我们还进行了重构了首页页面。同时也要考虑手机物理按键得返回。所以尽量采用路由跳转方式。

4.js操作像素时:

当我们用js进行像素操作时,对此我们需要封装一个方法进行转化,特殊处理只用关心px。

export const transformToRemOrRpx = function(size: number): Promise<string> {return new Promise((resolve, reject) => {Taro.getSystemInfo({success: res => {const width = res.windowWidth;const pixelRatio = 750 / width;let transSize = "0";if (process.env.TARO_ENV === 'weapp') {transSize = size * pixelRatio + "rpx";} else { let baseSize = width >= 640 ? 40 : width <= 320 ? 20 : width / 320 * 20;transSize = size / baseSize + "rem";}resolve(transSize);},fail: err => {reject(err);}})})
}

三、功能实现:

1. 编译

当前就不存在编译成weapp的情况了,都是h5,所以需要从跳转的地址栏上区分是小程序的h5还是app的h5,需要通过环境进行判断。以及根据这个判断来做适配。

注意:获取地址栏参数需要用原生location方式取,taro自带的api有可能会取不到,如果你想偷懒,本文也提供了获取地址栏参数的办法。

//解析url参数
export function parseUrlSearch<T>(): T {if (!window.location) { return {} as any }let href = window.location.href;if (href.includes('#') && href.includes('?')) {let queryIndex = href.indexOf('?')let symbolIndex = href.indexOf('#')let symbolList = href.split('#')symbolList = symbolList.filter(o => o.includes('?') ? o : false)let moreQuery = symbolList[1] && symbolList[1].slice(symbolList[1].indexOf('?')) || '';if (queryIndex < symbolIndex) {let hrefString = href.slice(0, href.indexOf('#'))href = hrefString + moreQuery.replace('?', '&')}}let qindex = href.indexOf("?");let queryParams = href.substr(qindex + 1);let queryParamsArr = queryParams.split("&");let queryParamsObj = {};queryParamsArr.map((v) => {let tmp = v.split("=");let value: string = tmp.length === 2 ? decodeURIComponent(tmp[1]) : '';if (value.includes("[") && value.includes("]")) {queryParamsObj[tmp[0]] = JSON.parse(decodeURIComponent(value));} else {queryParamsObj[tmp[0]] = decodeURIComponent(tmp[1])}});return queryParamsObj as any;
}

2. 数据获取(缓存)

小程序的h5,即webview场景下微信不允许使用缓存,需要适配;另外taro提供的存储api无法支持跨页面存储。小程序的h5所需全局数据,必须全部采用从地址栏传参方式获取,拿不到。

3. Token校验

微信嵌h5环境下,系统要求去除token校验,或者采用调组件库内app.ts中提供的token更新接口方式进行token校验更新。因为小程序的webview里头注入基础平台的js文件会有很多问题,最主要的是域名校验和资源路径问题,当前解决起来成本比较高,所以先去除。

4. taro全局路径配置(接口根路径、打包静态资源路径)

const path = require("path");
const config = {projectName: 'myApp',date: '2024-1-20',designWidth: 750,deviceRatio: {640: 2.34 / 2,750: 1,828: 1.81 / 2},sourceRoot: 'src',outputRoot: `dist/${process.env.TARO_ENV}`,//多端开发时必须使用******important*******plugins: [],defineConstants: {},copy: {patterns: [{from: '',to: ''},],options: {}},framework: 'react',mini: {postcss: {pxtransform: {enable: true,config: {}},url: {enable: true,config: {limit: 1024 // 设定转换尺寸上限}},cssModules: {enable: true, // 默认为 false,如需使用 css modules 功能,则设为 trueconfig: {namingPattern: 'module', // 转换模式,取值为 global/modulegenerateScopedName: '[name]__[local]___[hash:base64:5]'}}}},h5: {publicPath: '/',staticDirectory: 'static',esnextModules: ['taro-ui'],//应用taroUI的时候必须设置******important*******postcss: {autoprefixer: {enable: true,config: {}},cssModules: {enable: true, // 默认为 false,如需使用 css modules 功能,则设为 trueconfig: {namingPattern: 'module', // 转换模式,取值为 global/modulegenerateScopedName: '[name]__[local]___[hash:base64:5]'}}}},alias: {'@/pages': path.resolve(__dirname, '..', 'src/pages'),}
}module.exports = function (merge) {if (process.env.NODE_ENV === 'development') {return merge({}, config, require('./dev'))}return merge({}, config, require('./prod'))
}

5. 复杂业务(预览/选择图片等)sdk引入

由于微信环境下的h5需要使用微信提供的weixin-sdk,才能使用微信允许的功能,微信提供的接口如下图(附网址):

在这里插入图片描述

附网站:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

四、常见的问题:

1. 子系统具体的页面标题怎么确定?

跳转过去默认是模块名称作为标题。如果需要自定义导航栏标题,建议使用document.title设置就行。

2. 涉及到sdk的功能如何进行调试?

真机调试。
1.调式接口,查看接口。点击小虫子就可以查看子应用得一个请求情况。
在这里插入图片描述

在这里插入图片描述
2.真机调试查看功能是否适配,采用局域网得方式直接连接本地跑的应用。

在这里插入图片描述

3. sdk不支持预览文件操作?

封装一个preiewFile这个函数的主要目的是在微信小程序内预览特定路径的文件。
这是它如何工作的:

1.首先,函数接受一个路径作为参数,并从该路径中提取出文件的类型。

2.如果文件类型是图片(png,jpeg,jpg),那么使用wx.previewImage预览该图片。

3.如果不是图片,那么函数会调用wx.downloadFile来下载该文件。在下载过程中,会显示一个加载提示。下载成功后,如果文件类型是文本文件(txt),那么就使用 wx.getFileSystemManager().readFile 读取文件内容,并通过模态对话框显示出来。

4.如果文件类型不是文本文件,那么就尝试使用 wx.openDocument 打开该文件。如果打开过程中出现错误,错误详细信息将被打印到控制台。

整个函数的主要功能就是为了提供一个预览文件的方案,包括图片预览,文本内容阅读以及开启文档。这样的功能在某些需要预览文件内容的场景中会非常有用。

const wx = require('weixin-js-sdk')function previewFile(path) {// const path = files[index][this.data.downLoadAttr]const fileNameArr = name.split('.')const fileType = fileNameArr[fileNameArr.length-1]if(fileType == 'png' || fileType == 'jpeg' || fileType == 'jpg'){wx.previewImage({current: path, // 当前显示图片的http链接urls: [path] // 需要预览的图片http链接列表})return}let fs = wx.getFileSystemManager();wx.showLoading({ title : '文件加载中' });wx.downloadFile({url: path,//文件路径
',      //文件路径header: {},success: function (res) {wx.hideLoading();var filePath = res.tempFilePath;if(fileType == 'txt'){fs.readFile({filePath:filePath,encoding:'utf8',complete(res){// console.log(res.data);wx.showModal({title: '文件内容',content: res.data,showCancel: false,confirmText: '确定',success: (result) => {if(result.confirm){}},fail: ()=>{},complete: ()=>{}});}})}else{wx.openDocument({filePath: filePath,showMenu : true,// fileType: type,   //文件类型success: function (res) {},fail: function (res) {// wx.showToast({ title: '文件打开失败', icon : 'none' })console.table(res);},complete: function (res) {}})}},fail: function (res) {wx.hideLoading();console.log('文件下载失败:',path)wx.showToast({ title: '文件加载失败', icon : 'none' })console.table(res)},complete: function (res) {},})}

对于下载

简单粗暴的解决方式是:复制链接让用户自行去浏览器下载。可以借助clipboard插件。

4. sdk不支持文件选择操作?

当然,也不能使用taro提供的chooseMessageFile,因为微信的webview没开放给你用。我封装了原生input的实现封装方法chooseFIle,可以直接copy使用。

1.这函数,它用于在Web和非Web环境(如微信小程序)中选择文件。它以函数形式暴露,可以从外部调用,并传入一个对象参数,这个参数包括count(选择文件的数量),success(成功的回调函数),fail(失败的回调函数)和complete(完成的回调函数)。

2.函数首先进行参数校验,例如检查传入的 count 是否为数字。如果校验失败,它将调用失败回调函数并返回一个Rejected Promise。如果一切正常,我们会进行环境判断。

3.如果环境是Taro的WEB环境,那么将在页面上创建一个input元素,并设置它为file类型,以供用户选择文件。选择的文件信息会被添加到返回的结果对象中,然后调用成功回调和完成回调。

4.对于非Web环境,它使用Taro的 chooseMessageFile 方法来选择文件,这个函数通常被用于在微信小程序中选择聊天文件。

这个函数的主要目的是提供一个通用的文件选择方案,无论在Web环境还是非Web环境,都可以以相同的方式来选择文件。

import Taro from '@tarojs/taro';
//选择文件
export const chooseFile = function (option) {const {count = 1, success,url, fail, complete} = optionconst res: any = {errMsg: 'chooseFile:ok',tempFilePaths: [],tempFiles: []}if (count && typeof count !== 'number') {res.errMsg = 'error,typeof count is error',console.error(res.errMsg)typeof fail === 'function' && fail(res)typeof complete === 'function' && complete(res)return Promise.reject(res)}if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {const fileId = "MyUtilsChooseFile"let taroChooseImageId: any = document.getElementById(fileId)if (!taroChooseImageId) {let htmlInputElement: any = document.createElement("input");htmlInputElement.type = "file"htmlInputElement.setAttribute('id', fileId)htmlInputElement.setAttribute('style', 'position: fixed; top: -4000px; left: -3000px; z-index: -300;')if (count > 1) {htmlInputElement.setAttribute('multiple', 'multiple')}document.body.appendChild(htmlInputElement)taroChooseImageId = document.getElementById(fileId)} else {if (count > 1) {taroChooseImageId.setAttribute('multiple', 'multiple')} else {taroChooseImageId.removeAttribute("multiple")}}taroChooseImageId.onchange = (e) => {// console.log("onchange",e)let arr = [...e.target.files]arr = arr.splice(0, count)arr && arr.forEach(item => {let blob = new Blob([item], {type: e.target.files[0].type});let url = URL.createObjectURL(blob);res.tempFilePaths.push(url)// res.tempFiles.push({path: url, size: item.size, type: item.type, originalFileObj: item})console.log("选择item", item)res.tempFiles.push({path: url,size: item.size,type: item.type,name: item.name,lastModified: item.lastModified,lastModifiedDate: item.lastModifiedDate,webkitRelativePath: item.webkitRelativePath})})typeof success === "function" && success(res)typeof complete === "function" && complete(res)e.target.value = ''// document.body.removeChild(taroChooseImageId)}//触发选择taroChooseImageId.click()} else {Taro.chooseMessageFile({count: count,type: 'file',success: function (res) {// console.log("选择文件",res)success ? success(res) : ""}})}
}

使用

chooseFile({count:2,success(res){console.log(res)}
})

5. sdk不支持文件上传操作?

用Taro自带的Taro.uploadFile(option)实现,示例如下:

chooseFile({count:2,success(res){console.log(res)Taro.uploadFile({url:urlfilePath:res.tempFiles[0].path,name:res.tempFiles[0].name,formData: {},success (res){const data = res.data//do something}})} 	
})

6. sdk不支持小程序跳转?如何实现

先进行环境的判断

// 判断当前环境是否为小程序
const ua = navigator.userAgent.toLowerCase();
if (ua.match(/MicroMessenger/i) == 'micromessenger') {wx.miniProgram.getEnv((res) => {if (res.miniprogram) {console.log('在小程序内');} else {console.log('不在小程序内');}});
} else {console.log('不在微信浏览器内');
}// 小程序跳转方法
wx.miniProgram.navigateTo({url:'/pages/index/index',        // 指定跳转至小程序页面的路径success: (res) => {console.log(res);   // 页面跳转成功的回调函数},fail: (err) => {console.log(err);   // 页面跳转失败的回调函数}
});// 通过链接与小程序通讯传参
// 静态参数传输
wx.miniProgram.navigateTo({url:'/pages/index/index?id=1', // id:所需参数success: (res) => {console.log(res);   // 页面跳转成功的回调函数},fail: (err) => {console.log(err);   // 页面跳转失败的回调函数}
});// 动态参数传输
let id = 1;
wx.miniProgram.navigateTo({url:'/pages/index/index?id=' + id, // id:所需参数(动态参数需放在引号外小程序才可识别)success: (res) => {console.log(res);   // 页面跳转成功的回调函数},fail: (err) => {console.log(err);   // 页面跳转失败的回调函数}
});

如果不再小程序内跳转会报错。

解决思想:
首先,webview内嵌h5,从h5页面是不可以直接使用wx.miniProgram.navigateTo 方法跳转到其他小程序,所以具体思路应该是小程序A => webview内嵌 h5 => 从h5调回到小程序A的中转页面 => 在小程序A中 使用wx.navigateToMiniProgram 方法跳转到 小程序B

1.我们采用自定义的navigateToMiniProgramForWebview函数来触发从当前小程序跳转到另一个小程序。这个函数接收两个参数,wx对象和包含跳转信息的params对象。
2.wx对象是由微信API提供的一个核心对象,带有微信小程序的接口。params对象包含了必须的跳转信息,比如目标小程序的appId,路径(path),额外的数据(extraData),以及小程序的版本.

3.函数体中的第一步是创建一个新的对象 passParams,它复制了params的所有属性,然后把extraData属性转换成 JSON 字符串,并且添加了一个新的属性:type,在这个例子中其值为:‘navigateToMiniProgram’。

4.接下来,将这个passParams对象通过一个叫formatParams的函数转换成一个URL查询字符串,和路径组合成一个完整的URL。在这个例子中,这个URL指向小程序的一个特定页面:webviewMiddlePage,并带有跳转信息作为查询参数。

5.最后一步是通过 wx.miniProgram.navigateTo 接口, 使用这个URL进行导航。这将触发在当前小程序中打开webviewMiddlePage 页面,然后这个页面会解析URL中的参数,并根据跳转信息完成从当前小程序到目标小程序的跳转。

注意,这个函数中使用了两次跳转。
第一次是在当前小程序内部,跳转到 webviewMiddlePage页面。
第二次跳转是在 webviewMiddlePage 页面中,完成从当前小程序到目标小程序的跳转。通过这种方式设计,使得跳转过程可以携带更复杂的数据,同时绕过微信小程序navigateToMiniProgram 方法对传递数据量的限制。

  const navigateToMiniProgramForWebview =(wx, params:any = {})=> {const passParams = {...params,extraData:JSON.stringify(params.extraData || {}),type: 'navigateToMiniProgram'}const url = `/pages/webviewMiddlePage/index?${formatParams(passParams)}`//跳回我们小程序自定义得页面请求打开另外一个小程序wx?.miniProgram?.navigateTo({url})}navigateToMiniProgramForWebview(wx, {appId: '',//必传 跳转小程序唯一标识path: ``,//必传 跳转后初始页面路径//develop(开发版),trial(体验版),release(正式版 )envVersion: 'release',//必传 跳转小程序的版本})function formatParams(obj: any){let arr: string[] = []Object.keys(obj).forEach(key => {if(obj[key] && typeof obj[key] === 'string') {arr.push(`${key}=${encodeURIComponent(obj[key])}`)}})return arr.join('&')
}

如果是app或者h5直接window.open

在这里插入图片描述

7.IOS日期显示Invalid date

注意:iso 这样 new Date(‘2021-02-11’) 返回的就是Invaild Date。
new Date(‘2021/02/11’) '/'才是正常的

在这里插入图片描述

五、让人哭笑不得得代码

1.发起了六次请求。我挺搞不懂他是怎么写得。然后我就重构了页面。

在这里插入图片描述
在这里插入图片描述

2.人生无语,查看订单后,不能保存id嘛,又进行一次查询。然后在删除。然后我又要重构头就是怎么秃得

请添加图片描述
是不是很有意思

六、对于多端开发

小程序得每年认证,对于企业来说将会采用更多得h5页面去嵌入一个总的小程序平台,而不是采用单独得开发发布,因为如果认证几个小程序或者十几个小程序,企业觉得这样得费用不是很值得,更青睐于h5一套嵌入,webapp也是如此,钉钉也是如此,其它得也是。、taro也可以适配鸿蒙系统得开发。uniapp 是一种基于 Vue.js 的跨平台开发框架。而Taro 是一种基于 React 的多端开发框架。taro跟uniapp,taro跟react框架搭配,uniapp跟Vue搭配。两个框架我都学习使用。感受就是语法不一样,解决思路还是一样得。做多了项目后,会发现,其实框架只是实现需求得一种工具,更重要得是解决问题得思想跟经验。就像我搭档一样,他工作三年多了,他说他之前是使用vue开发得,对小程序,跟webapp也不是很熟。虽然我之前做过,但是跟他一起工作给我得一种感觉是他上手快。解决思路很清晰,只是语法切换而已,能搞快速得定位问题,并参考学习。

uniapp搭建学习

项目基于 uniapp + Vue3 + vite + pinia + ts + axios 项目模板快速开发,适用于小程序开发 h5。

项目使用了 vite 作为开发工具,支持 esm、cjs、iife 三种打包方式,支持按需加载,支持热更新。

github:https://github.com/wskang12138/aniapp-learn

声明:这个框架不是我搭建得,我也只是demo下来学习,改改就成我得了,哈哈哈哈哈哈。

七、总结

对于多端得适配,四种情况:顶部导航栏得适配,页面样式得适配,功能得适配,其它。
对于顶部导航栏得适配,这个简单,判断环境做好封装显示就好了。页面样式得适配,媒体查询为基准,flex为区间布局。功能得适配:得翻阅文档学习了。

参考:https://github.com/uileader/touchwx

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/639106.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Sim ROS2

ROS2_Galactic Ubuntu (Debian) — ROS 2 Documentation: Galactic documentation VMware界面大小调整两种方法超详细教程_vmware怎么调整虚拟机界面大小-CSDN博客 orca4 simulator https://github.com/clydemcqueen/orca4 Docker 【 全干货 】5 分钟带你看懂 Docker &#…

开源无代码应用程序生成器Saltcorn

什么是 Saltcorn &#xff1f; Saltcorn 是一个无需编写任何代码即可构建数据库 Web 应用程序的平台。它配备了一个吸睛的仪表板&#xff0c;丰富的生态系统、视图生成器以及支持主题的界面&#xff0c;使用直观的点击、拖放用户界面来构建整个应用程序。 软件的特点&#xff1…

100213. 按距离统计房屋对数目 II

100213. 按距离统计房屋对数目 II - 力扣&#xff08;LeetCode&#xff09; class Solution { public:vector<int> dif;void add(int l, int r, int d) {if (l > r) return;dif[l] d;dif[r 1] - d;return;}vector<long long> countOfPairs(int n, int x, in…

智慧文旅运营综合平台:重塑文化旅游产业的新引擎

目录 一、建设意义 二、包含内容 三、功能架构 四、典型案例 五、智慧文旅全套解决方案 - 210份下载 在数字化浪潮席卷全球的今天&#xff0c;智慧文旅运营综合平台作为文化旅游产业与信息技术深度融合的产物&#xff0c;正逐渐显现出其强大的生命力和广阔的发展前景。 该…

iOS长图生成的pdf性能优化记录

背景 某日产品拿来了一个由30多页高清长图生成的pdf&#xff0c;在应用中运行出现了崩溃。 排查 经过调试发现加载长图生成的pdf时&#xff0c;运行内存会出现缓慢增长&#xff0c;直至崩溃。经过代码定位发现时pdf转成image对象的过程中由于是长图生成的pdf&#xff0c;这一页…

海外抖音TikTok、正在内测 AI 生成歌曲功能,依靠大语言模型 Bloom 进行文本生成歌曲

近日&#xff0c;据外媒The Verge报道&#xff0c;TikTok正在测试一项新功能&#xff0c;利用大语言模型Bloom的AI能力&#xff0c;允许用户上传歌词文本&#xff0c;并使用AI为其添加声音。这一创新旨在为用户提供更多创作音乐的工具和选项。 Bloom 是由AI初创公司Hugging Fac…

使用torch求函数参数

一、先了解一下深度学习是如何优化参数的 import torch import mathclass Polynomial3(torch.nn.Module):def __init__(self):super().__init__()self.a torch.nn.Parameter(torch.randn(()))self.b torch.nn.Parameter(torch.randn(()))self.c torch.nn.Parameter(torch.r…

C语言——内存函数介绍和模拟实现(memcpy、memmove、memset、memcmp)

之前我们讲过一些字符串函数&#xff08;http://t.csdnimg.cn/ZcvCo&#xff09;&#xff0c;今天我们来讲一讲几个内存函数&#xff0c;那么可能有人要问了&#xff0c;都有字符串函数了&#xff0c;怎么又来个内存函数&#xff0c;这不是一样的么&#xff1f; 我们要知道之前…

第十二站(20天):C++泛型编程

模板 C提供了模板(template)编程的概念。所谓模板&#xff0c;实际上是建立一个通用函数或类&#xff0c; 其 类内部的类型和函数的形参类型不具体指定 &#xff0c;用一个虚拟的类型来代表。这种通用的方式称 为模板。 模板是泛型编程的基础, 泛型编程即以一种独立于任何特定…

Java快速转Go入门案例

Golang语言在2009年诞生于谷歌&#xff0c;相较而言是一门年轻的语言。面对C等老牌语言众多繁重的特性&#xff0c;几名谷歌员工希望能够甩开历史包袱设计一门更加简洁的编程语言&#xff0c;避免过度的设计&#xff0c;通过较少的特性组合连接就可实现复杂的功能。体现“少即是…

C++面试:跳表

目录 跳表介绍 跳表的特点&#xff1a; 跳表的应用场景&#xff1a; C 代码示例&#xff1a; 跳表的特性 跳表示例 总结 跳表&#xff08;Skip List&#xff09;是一种支持快速搜索、插入和删除的数据结构&#xff0c;具有相对简单的实现和较高的查询性能。下面是跳表…

巨变!如何理解中国发起的“数据要素X”计划?

作者 张群&#xff08;赛联区块链教育首席讲师&#xff0c;工信部赛迪特聘资深专家&#xff0c;CSDN认证业界专家&#xff0c;微软认证专家&#xff0c;多家企业区块链产品顾问&#xff09;关注张群&#xff0c;为您提供一站式区块链技术和方案咨询。 刘烈宏在第25届北大光华新…

自定义shell工具函数之echo_red()和prepare_check_required_pkg()

两个 bash 函数&#xff0c;echo_red 和 prepare_check_required_pkg&#xff0c;它们在 shell 脚本中使用。下面是每个函数的解释&#xff1a; echo_red 函数 function echo_red() {echo -e "\033[1;31m$1\033[0m" }这个函数的目的是输出红色的文本到终端。它接受…

职业规划,软件开发工程师的岗位任职资格

软件工程师是指从事软件开发的人&#xff0c;主要的工作涉及到项目培训和项目设计两个方面。在实际工作中&#xff0c;软件工程师是一个广义的概念&#xff0c;包括了很多与软件相关的人员。除开最基础的编程语言&#xff0c;还有数据库语言等等。从事这份工作&#xff0c;需要…

记录一下uniapp 集成腾讯im特别卡(已解决)

uniapp的项目运行在微信小程序 , 安卓 , ios手机三端 , 之前这个项目集成过im,不过版本太老了,0.x的版本, 现在需要添加客服功能,所以就升级了 由于是二开 , 也为了方便 , 沿用之前的webview嵌套腾讯IM的方案 , 选用uniapp集成ui ,升级之后所有安卓用户反馈点击进去特别卡,几…

【cucumber】学习跟踪

本文章主要跟踪cucumber自动化测试的学习进度&#xff0c;并且统计文章目录&#xff1a; 【cucumber】cluecumber-report-plugin生成测试报告-CSDN博客

openssl3.2 - 官方demo学习 - test - certs - 001 - Primary root: root-cert

文章目录 openssl3.2 - 官方demo学习 - test - certs - 001 - Primary root: root-cert概述笔记官方原版.sh实验自己来分3步走做实验my_openssl_log_001_doc_1.txtmy_openssl_log_001_doc_2.txtmy_openssl_log_001_doc_3.txt备注END openssl3.2 - 官方demo学习 - test - certs …

Java设计模式之观察者模式详解

Java设计模式之观察者模式详解 大家好&#xff0c;我是免费搭建查券返利机器人赚佣金就用微赚淘客系统3.0的小编&#xff0c;也是冬天不穿秋裤&#xff0c;天冷也要风度的程序猿&#xff01;今天&#xff0c;我们将一同深入探讨Java设计模式之观察者模式&#xff0c;这是一种代…

HR人才测评,如何做技术研发人员基本素质测评?

技术研发人员的基本素质测评&#xff0c;可以从以下几个方面考虑&#xff1a; 1. 技术能力&#xff1a;首要的因素是技术能力&#xff0c;包括编程能力、算法能力、架构设计能力、代码调试和优化能力等。在测评中可以通过技术测试、编程练习、项目经验等方式来考察。 2. 学习…

微前端:一种新型的前端架构方法

微前端是一种新型的前端架构方法&#xff0c;它将单页面应用程序拆分为一系列小型、独立的应用程序。本文将介绍微前端的背景、概念、特点、应用场景和与其他前端架构的对比&#xff0c;以帮助读者更好地理解微前端的概念和实践。 一、引言 随着Web应用程序的复杂性和规模不断…