2024年1月19日

最新推荐文章于 2024-06-19 23:06:52 发布

爱猪头的程序猿

最新推荐文章于 2024-06-19 23:06:52 发布

阅读量2.1k

点赞数 20

文章标签： vue.js html5 javascript

本文链接：https://blog.csdn.net/qq_46670243/article/details/135701835

版权

1 获取tabBar的高度

在微信小程序中，获取tabBar（微信小程序底部的导航栏）高度可以通过小程序提供的API wx.getSystemInfoSync() 来完成。这个API 可以获取到包括状态栏高度、屏幕高度、窗口高度等信息。tabBar 的高度可以根据这些信息计算得出。以下是一个获取tabBar高度的示例代码：
// 获取系统信息
const systemInfo = wx.getSystemInfoSync();
// 计算tabBar高度
// 注意：这里的计算方式假设了tabBar在屏幕底部，并且没有其他布局元素干扰。
const tabBarHeight = systemInfo.windowHeight - systemInfo.statusBarHeight;
console.log('tabBar高度为：', tabBarHeight);
这段代码首先通过 wx.getSystemInfoSync() 获取到系统信息，然后计算出tabBar的高度。tabBarHeight 的计算基于窗口高度（systemInfo.windowHeight）减去状态栏高度（systemInfo.statusBarHeight）。需要注意的是，这种方法依赖于微信小程序的布局和设计，如果小程序的布局中有其他元素占用了底部空间，或者tabBar的位置不是固定的，那么计算出的高度可能不准确。此外，微信小程序官方文档建议在app.json中使用window字段来定义窗口的statusBarHeight和navigationBarHeight，这样可以在不同设备上获得更好的适配效果。如果小程序中没有自定义tabBar，那么可以放心使用上述方法获取高度。如果小程序中自定义了tabBar，可能需要根据实际布局进行相应的计算调整。

2 uniapp开发常用的api

uniapp 是一个使用 Vue.js 开发所有前端应用的框架，它允许开发者编写一套代码，发布到多个平台，包括微信小程序、H5、App 等。在微信小程序开发中，uniapp 提供了丰富的 API，使得开发者可以方便地实现各种功能。以下是一些在微信小程序开发中常用的 uniapp API：
网络请求 API：uni.request 用于发起网络请求，支持 GET、POST 等方法。示例代码：
uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  success: (res) => {
    console.log(res.data);
  },
  fail: (err) => {
    console.log(err);
  }
});
数据缓存 API：uni.setStorageSync、uni.getStorageSync 用于存储和管理本地数据，类似于原生小程序的 wx.setStorageSync、wx.getStorageSync。示例代码：
// 设置缓存
uni.setStorageSync('key', 'value');
// 获取缓存
const value = uni.getStorageSync('key');
位置服务 API：uni.getLocation 用于获取用户的地理位置信息。示例代码：
uni.getLocation({
  type: 'gcj02',
  success: (res) => {
    console.log(res.latitude, res.longitude);
  }
});
图片和视频 API：uni.chooseImage、uni.previewImage、uni.uploadFile 用于图片选择、预览和上传等操作。示例代码：
// 选择图片
uni.chooseImage({
  count: 9,
  success: (res) => {
    console.log(res.tempFiles);
  }
});
// 预览图片
uni.previewImage({
  urls: ['https://example.com/image1.jpg', 'https://example.com/image2.jpg']
});
// 上传文件
uni.uploadFile({
  url: 'https://api.example.com/upload',
  filePath: 'path/to/file.txt',
  name: 'file',
  success: (res) => {
    console.log(res.data);
  }
});
界面交互 API：uni.showToast、uni.showModal、uni.redirectTo 等用于显示提示框、模态框、跳转页面等操作。示例代码：
// 显示提示框
uni.showToast({
  title: '成功',
  duration: 2000
});
// 显示模态框
uni.showModal({
  title: '提示',
  content: '这是一个模态框',
  success: (res) => {
    if (res.confirm) {
      console.log('用户点击了确定按钮');
    } else if (res.cancel) {
      console.log('用户点击了取消按钮');
    }
  }
});
// 跳转页面
uni.redirectTo({
  url: 'pages/index/index'
});
设备信息 API：uni.getSystemInfoSync 用于获取设备系统信息，如屏幕大小、设备类型等。示例代码：
const systemInfo = uni.getSystemInfoSync();
console.log(systemInfo.windowWidth, systemInfo.windowHeight);
这些 API 只是 uniapp 提供的部分功能，开发者可以根据需要查阅官方文档，了解更多的 API 和使用方法。

3 获取tabBar的参数

在微信小程序中，tabBar 是底部导航栏的一部分，它提供了快速切换小程序页面的功能。如果你想要获取tabBar的相关参数，比如颜色、字体大小、背景颜色等，你需要通过小程序的配置文件app.json来获取这些信息。以下是如何在uniapp中获取tabBar参数的步骤：

打开你的uniapp项目的配置文件app.json。

在tabBar对象中，你可以找到color（文字颜色）、selectedColor（选中时的文字颜色）、backgroundColor（背景颜色）等属性。

你可以根据这些属性来设置你的tabBar的外观。例如，如果你的app.json中的tabBar部分是这样的：
"tabBar": {
  "color": "#7A7E83",
  "selectedColor": "#3cc51f",
  "backgroundColor": "#ffffff",
  "borderStyle": "black",
  "list": [
    {
      "pagePath": "index/index",
      "text": "首页",
      "iconPath": "resources/home.png",
      "selectedIconPath": "resources/home_active.png"
    },
    {
      "pagePath": "other/other",
      "text": "其他",
      "iconPath": "resources/other.png",
      "selectedIconPath": "resources/other_active.png"
    }
  ]
}
你可以通过以下方式在uniapp的页面中获取这些参数：
// 获取app.json中的tabBar参数
const tabBar = getApp().globalData.tabBar;
// 获取tabBar的颜色
const tabBarColor = tabBar.color;
// 获取tabBar选中时的颜色
const tabBarSelectedColor = tabBar.selectedColor;
// 获取tabBar的背景颜色
const tabBarBackgroundColor = tabBar.backgroundColor;
// 在页面的样式中使用这些颜色
.tab-bar {
  color: {{tabBarColor}}; /* 默认文字颜色 */
  background-color: {{tabBarBackgroundColor}}; /* 默认背景颜色 */
}
.tab-bar-selected {
  color: {{tabBarSelectedColor}}; /* 选中时的文字颜色 */
  background-color: {{tabBarBackgroundColor}}; /* 选中时的背景颜色 */
}
请注意，这里的代码示例是在uniapp的页面样式中使用变量。你需要在页面的<style>标签中定义这些变量，并且在小程序的运行环境中确保这些变量已经被正确赋值。另外，如果你需要在页面加载时获取tabBar的参数，你可以在页面的onLoad函数中获取getApp().globalData.tabBar，然后在需要的时候使用这些参数。

4 tabBar安全区兼容

在微信小程序中，tabBar的安全区（Safe Area）是指为了避免内容被系统工具栏（如状态栏和导航栏）遮挡而设置的区域。在iOS设备上，特别是在iPhone X及以上型号中，由于刘海屏的出现，安全区的高度会比传统设备更高。为了兼容不同设备的tabBar安全区，微信小程序提供了safeArea样式属性，你可以使用这个属性来确保你的tabBar在不同设备上都能正确显示。以下是如何在uniapp中兼容tabBar安全区的步骤：

在你的uniapp项目的配置文件app.json中，你可以找到tabBar对象。在这个对象中，你可以设置safeArea属性，它决定了tabBar在顶部是否有安全区域。

你可以通过在tabBar的list数组中设置pagePath、text、iconPath和selectedIconPath等属性来定义你的tabBar上显示的按钮。

在你的uniapp页面中，你可以使用<style>标签来定义tabBar的样式，并且使用safeArea属性来兼容不同设备的安全区。例如，如果你的app.json中的tabBar部分是这样的：
"tabBar": {
  "color": "#7A7E83",
  "selectedColor": "#3cc51f",
  "backgroundColor": "#ffffff",
  "borderStyle": "black",
  "list": [
    {
      "pagePath": "index/index",
      "text": "首页",
      "iconPath": "resources/home.png",
      "selectedIconPath": "resources/home_active.png"
    },
    {
      "pagePath": "other/other",
      "text": "其他",
      "iconPath": "resources/other.png",
      "selectedIconPath": "resources/other_active.png"
    }
  ],
  "safeArea": {
    "top": 0,
    "bottom": 0
  }
}
你可以在你的页面<style>标签中这样使用safeArea：
.tab-bar {
  /* 其他样式 */
  padding-top: constant(safe-area-inset-top); /* 兼容iOS旧设备 */
  padding-top: env(safe-area-inset-top); /* 兼容iOS新设备 */
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容iOS旧设备 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容iOS新设备 */
}
在上面的样式中，safe-area-inset-top和safe-area-inset-bottom分别是顶部和安全区底部的高度。这些值会根据设备的不同而变化，所以它们通常是动态的。你可以通过环境变量env来获取这些动态值，而constant则用于兼容旧设备。请注意，safeArea属性在uniapp中的支持可能会有所不同，确保你在使用时查阅最新的uniapp文档以获取正确的支持信息。

5 开发中怎么获取小程序版本号

在微信小程序中，获取小程序的版本号通常是为了标识和控制小程序的不同版本，以便于开发、测试和发布。微信小程序的版本号格式为主版本号.次版本号.修订号，例如1.9.901、2.44.322、10.32.44等。以下是在开发过程中获取微信小程序版本号的方法：

1. 使用 wx.getAccountInfoSync()

wx.getAccountInfoSync() 是一个同步方法，可以获取到小程序的账号信息，其中包括小程序的版本号。但是，这个方法只能在正式版的小程序中使用，开发版和体验版无法获取版本号。
try {
  const accountInfo = wx.getAccountInfoSync();
  const version = accountInfo.miniProgram.version;
  console.log(version); // 打印出小程序的版本号
} catch (error) {
  console.error(error);
}
2. 自行维护版本号

在开发过程中，你可以在小程序的本地代码中自行定义一个版本号变量，然后在每个页面中都可以访问这个变量。
// 在 app.js 中定义版本号变量
const APP_VERSION = '1.0.0'; // 替换为实际版本号
// 在任何页面中都可以访问 APP_VERSION
console.log('当前小程序版本号：', APP_VERSION);
3. 从服务器获取版本号

如果你在服务器端维护了小程序的版本信息，可以在小程序中通过网络请求从服务器获取最新的版本号。
uni.request({
  url: 'https://your-server.com/version', // 你的服务器端版本号接口地址
  method: 'GET',
  success: (res) => {
    const version = res.data;
    console.log('当前小程序版本号：', version);
  },
  fail: (err) => {
    console.error(err);
  }
});
注意事项

如果你选择从服务器获取版本号，确保服务器端的接口是稳定且可访问的。

在发布正式版小程序时，版本号是唯一的，且不应随意更改，以便于用户和管理。

在不同的开发阶段（如开发版、体验版、正式版），可能需要区分版本号以进行不同的测试和发布管理。在实际开发中，选择哪种方式获取版本号取决于你的具体需求和开发环境。

6 微信小程序的接口调用

在 uniapp 中开发小程序时，调用接口是获取数据和实现功能的重要环节。以下是在 uniapp 中调用接口的一些基本步骤和注意事项：

1. 发起网络请求

uniapp 提供了 uni.request 方法来发起网络请求。这个方法类似于原生的 wx.request，但在 uniapp 中，它可以在所有支持的平台中使用。
uni.request({
  url: 'https://api.example.com/data', // 接口地址
  method: 'GET', // 请求方法，也可以是 POST、PUT、DELETE 等
  data: {
    // 发送给服务器的数据
  },
  header: {
    'Content-Type': 'application/json' // 设置请求的头部信息
  },
  success: (res) => {
    // 请求成功的处理逻辑
    console.log(res.data);
  },
  fail: (err) => {
    // 请求失败的处理逻辑
    console.error(err);
  }
});
2. 处理响应数据

网络请求成功后，服务器会返回数据。你可以通过 success 回调函数来处理这些数据。如果请求失败，可以通过 fail 回调函数来处理错误。

3. 注意事项

确保接口地址是正确的，并且服务器已经准备就绪。

处理可能出现的网络错误，如网络连接失败、服务器无响应等。

根据不同的业务需求，可能需要设置不同的请求参数，如请求方法、请求头等。

如果是POST请求，需要在请求体中传递数据。

注意保护用户隐私，不要在请求中发送敏感信息，如密码等。

4. 跨域问题

如果你的服务器地址和前端小程序不在同一个域中，可能会遇到跨域请求问题。在 uniapp 中，你可以配置全局的跨域设置，或者在请求中手动设置 header 来解决跨域问题。
// 配置全局跨域
uni.setInterceptor(res => {
  // 可以在这里统一处理跨域问题
}, err => {
  // 处理错误
});
// 手动设置请求头部解决跨域
uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  header: {
    'Access-Control-Allow-Origin': '*' // 允许任何来源
    // 其他需要的头部信息
  },
  // ...
});
5. 错误处理

在实际开发中，应该充分考虑错误处理。例如，可以提示用户网络错误，或者在接口返回错误信息时，给出友好的错误提示。

6. 性能优化

调用接口可能会消耗较多的网络资源和时间。因此，应该合理使用接口，比如避免频繁的重复请求，对于一些不需要实时更新的数据，可以考虑缓存策略。通过以上步骤，你可以在 uniapp 中成功地调用接口，并实现小程序的数据交互和功能实现。在实际开发过程中，还需要根据具体业务需求和场景来进行相应的调整和优化。

7 css定位

CSS（层叠样式表）定位是网页设计中用于控制元素在页面上的位置的技术。CSS提供了多种定位机制，主要包括静态定位、相对定位、绝对定位和固定定位。

静态定位（Static）：

默认值，元素按照正常的文档流进行排列。

position: static;

相对定位（Relative）：

相对于其正常位置进行定位。

使用top、right、bottom和left属性来设置元素的位置。

position: relative;

绝对定位（Absolute）：

相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，那么相对于<html>元素进行定位。

脱离正常的文档流，不占据空间。

使用top、right、bottom和left属性来设置元素的位置。

position: absolute;

固定定位（Fixed）：

相对于浏览器窗口进行定位，不随页面滚动而移动。

脱离正常的文档流，不占据空间。

使用top、right、bottom和left属性来设置元素的位置。

position: fixed;

粘性定位（Sticky）：

是相对定位和固定定位的混合体，在页面滚动到某个阈值点之前表现为相对定位，滚动超出阈值点后表现为固定定位。

position: sticky; 使用定位时，还需要注意层叠上下文和堆叠顺序，即当多个元素重叠时，哪个元素显示在顶层。这可以通过z-index属性来控制。选择合适的定位方式对于布局设计非常重要，它决定了元素如何对页面上的其他元素以及用户交互作出响应。在进行网页设计时，应当根据设计需求和页面布局来选择最合适的定位方法。

8 addEventListener

addEventListener方法是JavaScript中用于向元素添加事件监听器的方法。它的基本语法如下：
target.addEventListener(type, listener, options);
或者
target.addEventListener(type, listener, useCapture);
参数说明：

type（必需）：

事件类型字符串，比如click、mousedown、mouseup、keydown、keyup等，不带on前缀。

listener（必需）：

事件触发时调用的函数。当事件发生时，该函数会被传入一个事件对象event作为参数。

options（可选）：

从JavaScript ES6开始，你可以传递一个选项对象作为第三个参数，该对象可以包含以下属性：

capture: 布尔值，表示是否在捕获阶段触发事件监听器，默认为false。

once: 布尔值，表示事件监听器是否在触发一次后移除，默认为false。

passive: 布尔值，表示事件监听器不会调用preventDefault（即不会取消事件的默认行为），默认为false。这主要用于提高滚动事件的性能。

useCapture（可选）：

在不支持options参数的旧版浏览器中，你可以使用一个布尔值作为第三个参数，该参数指示事件是否应该在捕获阶段触发，默认为false。例如，以下是一个添加点击事件监听器的例子：
document.getElementById("myButton").addEventListener("click", function(event){
  console.log("按钮被点击了！");
}, false);
在这个例子中，我们给一个ID为"myButton"的元素添加了一个点击事件监听器，当按钮被点击时，会在控制台打印一条消息。事件监听器在冒泡阶段被触发，因为我们传递的useCapture参数是false。

9 bind多次调用，this的指向哪

在JavaScript中，.bind()方法创建一个新的函数，该函数在调用时其this值被绑定到指定的对象。当你连续调用.bind()多次时，后面的.bind()调用不会影响前面.bind()调用所绑定的this值。下面是一个例子来说明这一点：
function a() {
  console.log(this);
}
var bound = a.bind(obj1).bind(obj2).bind(obj3);
bound(); // 这里的this是指向obj1的
在这个例子中，无论.bind()被调用多少次，bound函数的this值将被永久绑定到第一次调用.bind(obj1)时传递给它的obj1上。后续的.bind(obj2)和.bind(obj3)调用不会产生影响，因为一旦this被绑定，它就不能被更改。因此，无论.bind()被连续调用多少次，this的指向都是由第一次.bind()调用决定的，在这个例子中是obj1。

10 call apply bind

在JavaScript中，call、apply和bind都是函数对象的方法，它们都可以用来改变函数的this指向。下面是它们的区别和用法：

call

call方法允许你为一个函数指定一个this值，并立即执行该函数。

第一个参数是你想要指定的this值。

后续的参数是传递给函数的参数，需要逐个列出。示例：
function greet(name, age) {
  console.log(`Hello, my name is ${name} and I am ${age} years old.`);
}
greet.call({}, 'Alice', 30); // Hello, my name is Alice and I am 30 years old.
apply

apply方法与call方法类似，也是用来指定函数的this值并立即执行函数。

第一个参数是你想要指定的this值。

第二个参数是一个数组，数组中的元素作为参数传递给函数。示例：
greet.apply({}, ['Bob', 25]); // Hello, my name is Bob and I am 25 years old.
bind

bind方法也是用来指定函数的this值，但它不会立即执行函数，而是返回一个新的函数，该函数的this被永久绑定到指定的值。

第一个参数是你想要指定的this值。

后续的参数是传递给函数的参数，可以逐个列出。示例：
const boundGreet = greet.bind({}, 'Charlie');
boundGreet(40); // Hello, my name is Charlie and I am 40 years old.
总结

call和apply都是立即执行函数，而bind是返回一个新的函数。

call和bind接受参数列表，apply接受一个参数数组。

bind允许你预先设置函数的参数，这在函数式编程中非常有用。选择使用call、apply还是bind取决于你是否想立即执行函数以及你如何更方便地传递参数。

11 git 取消合并

在Git中，如果你在合并分支时遇到了问题，想要取消合并，可以使用以下指令：
取消合并（未提交）：如果合并后还没有执行commit操作，可以通过以下命令取消合并：
git merge --abort
这个命令会尝试将合并前的分支状态恢复到合并开始之前的状态。
取消合并（已提交）：如果合并后已经执行了commit操作，但还没有推送到远程仓库，可以通过以下步骤取消合并：
git reset --hard HEAD~1
这个命令会将当前分支回退到合并前的状态，丢弃合并的提交。HEAD~1表示回退到当前分支的前一个提交。
取消合并（已推送）：如果合并后已经推送到远程仓库，就不能简单地使用git merge --abort或git reset来取消合并了。这时，你需要使用更复杂的操作，例如通过创建一个新的反向提交来撤销合并的效果，或者使用git revert命令。这些操作可能会影响到其他协作者，因此在进行这类操作之前，最好与团队沟通并确保大家都理解可能产生的影响。请注意，取消合并操作可能会丢失一些工作，因此在执行之前请确保你已经做好了相应的备份。此外，如果你不确定如何操作，最好是寻求有经验的开发者或者团队的帮助。

12 git 删除未跟踪的文件

在Git中，如果你想删除工作目录中未跟踪的文件和目录，可以使用以下命令：
git clean -f
这里的-f选项表示强制删除，它会删除所有未跟踪的文件，但不会删除未跟踪的目录。如果你还想删除未跟踪的目录，可以使用-df选项：
git clean -df
请注意，git clean命令会永久删除文件，所以在执行之前请确保你不需要这些文件。为了安全起见，你可以先使用-n选项来模拟删除，这样可以看到哪些文件会被删除，而实际上并不会执行删除操作：
git clean -nf  # 模拟删除未跟踪的文件
git clean -ndf # 模拟删除未跟踪的文件和目录
只有在你确认了要删除的文件后，才去掉-n选项执行实际的删除操作。

13 git 怎样重新改变仓库的指向

在Git中，如果你想改变仓库的指向，通常是指改变分支的指向或者HEAD指针的指向。以下是一些常见的情况和相应的Git命令：
改变分支的指向：如果你想要改变某个分支的指向，可以使用git branch命令的-f选项（force）：
git branch -f <branch-name> <new-commit-hash>
其中<branch-name>是你想要改变的分支名，<new-commit-hash>是新的提交的哈希值。
移动HEAD指针：如果你想要移动当前分支的HEAD指针，可以使用git reset命令：
git reset --hard <new-commit-hash>
这个命令会将当前分支的HEAD指针移动到<new-commit-hash>指定的提交，并且工作目录会更新为该提交的状态。
强制更新远程分支的指向：如果你想要强制更新远程分支的指向，可以使用git push命令的--force或-f选项：
git push origin <branch-name> --force
这个命令会强制将本地分支的指向更新到远程仓库，这可能会覆盖远程分支的历史记录，因此需要谨慎使用。请注意，改变仓库的指向，特别是使用--force选项时，可能会导致其他协作者的问题，因为他们的本地分支历史可能会与你推送的新历史不匹配。因此，在执行这些操作之前，最好与团队沟通并确保大家都理解可能产生的影响。

爱猪头的程序猿

关注

20
点赞
踩
16

收藏

觉得还不错? 一键收藏
打赏
0
评论
2024年1月19日

call和apply都是立即执行函数，而bind是返回一个新的函数。call和bind接受参数列表，apply接受一个参数数组。bind允许你预先设置函数的参数，这在函数式编程中非常有用。选择使用callapply还是bind取决于你是否想立即执行函数以及你如何更方便地传递参数。
复制链接

扫一扫