【蓝牙小程序】项目记录

项目文档：https://esp-document.icce.top/

vant 组件库文档：https://vant-ui.github.io/vant-weapp/#/home

         https://vant.pro/vant-weapp/#/home (国内）

① rpx（响应式像素）与px（像素）的主要区别

rpx（响应式像素）与px（像素）的主要区别在于它们的适应性和定义方式。‌

1. ‌定义和用途‌：

   • ‌px（像素）‌：是最常见的单位，表示屏幕上的实际像素点。在不同设备上，px会根据屏幕的分辨率进行换算，因此在不同设备上显示效果可能会有差异‌。
   • ‌rpx（响应式像素）‌：是微信小程序中引入的单位，主要用于适配不同尺寸的手机屏幕。rpx可以根据屏幕宽度进行自适应缩放，通常用于布局和字体大小的设置‌。

2. ‌自适应性和兼容性‌：

   • ‌px‌：是固定长度单位，不能很好地适应不同分辨率的手机屏幕，因此在不同设备上显示效果可能会有较大差异‌。
   • ‌rpx‌：可以自适应手机分辨率，适配当前机型，能够在不同设备上保持一致的布局效果‌

3. ‌换算关系‌：

   • ‌px‌：在不同设备上，px的值是固定的，不会随屏幕尺寸变化而变化‌。
   • ‌rpx‌：规定屏幕宽为750rpx，1rpx在不同设备上等于不同的物理像素数。例如，在iPhone6上，1rpx等于0.5px‌。

4. ‌使用场景‌：

   • ‌px‌：通常用于固定宽度的元素，如边框、阴影等具有固定尺寸的元素‌。

 

 

② 组件是什么？子组件如何发消息给父组件

 

一.  创建和使用组件

　　1.  自己定义组件（组件也是包含: js，json，wxml，wxss的页面文件）

　　2.  在需要使用该组件的页面中，添加组件信息

 

创建组件

　　1.  在根目录，创建components文件夹，用来存放组件的子文件夹。

　　2.  可以在components中创建子文件夹，用来作为自定义组件，子文件夹中包含：js,  wxml,  json,  wxss

声明组件

　　1.  在需要使用自定义组件的页面. json文件中，在usingComponents对象中增加组件声明　　　

{
    "usingComponents": {
            "Tabs": "../../components/Tabs/Tabs"
    }
}

在其它页面中使用组件

在.html中使用该组件的标签

<Tabs>...</Tabs>

二.  父组件向子组件传传递数据：通过 属性 来传递

微信小程序中 父组件向子组件传递数据

　　　　1.  父组件中，.html 中使用子组件标签：<标签名>...</标签名>； 使用标签属性绑定数据： <标签名  属性名='{{变量名}}'></标签名>

　　　　2.  子组件中，.js 文件中Components对象里的属性：properties，用来获取父组件传递来的数据

properties:{
    属性名：{
        type：String  /  Array / ...　　# 数据类型
        value：‘ ’/   [] /  ...  　　# 默认值
    }
}

三.  子组件向父组件传递数据： 通过 绑定事件  来传递

　　1. 微信小程序中,  子组件向父组件发送事件,传递数据

　　　　1.  子组件.js中，在某个子组件事件中，通过 this.triggerEvent('自定义事件名',  数据) 绑定一个  事件名 和 数据

　　　　事件名x(){

　　　　　　this.triggerEvent('事件名y',  数据)

　　　　}

　　　　2.  父组件.html中， 使用组件标签来接收绑定的事件和数据，<标签名  bind事件名=“父组件内定义一个事件”>...</标签名>，数据可以在父组件中定义的事件中，通过参数 e 来提取。

 

③ 字符数组如何转换为json

 

 

 

参考资料：

1. 《微信小程序--自定义组件 + 小程序和Vue的父子组件数据传递》 作者：黑无常

2.