vant组件库 vue及小程序

>

1基础组件：

什么是组件：

<ul>

<li>组件是视图层的基本组成单元。</li>

<li>组件自带一些功能与微信风格的样式。</li>

<li>一个组件通常包括开始标签

和结束标签

，属性

用来修饰这个组件，内容

在两个标签之内。</li>

</ul>

2属性类型

<ul>

<li>Boolean 布尔值 组件写上该属性，不管该属性等于什么，其值都为true

，只有组件上没有写该属性时，属性值才为false

。如果属性值为变量，变量的值会被转换为Boolean类型</li>

<li>Number 数字 1

, 25</li>

<li>String 字符串 "string"</li>

<li>Array 数组 [ 1, "string" ] </li>

<li>Object 对象 { key: value } </li>

<li>EventHandler 事件处理函数名 "handlerName"

是 Page中定义的事件处理函数名</li>

<li>Any 任意属性 </li>

</ul>

3共同属性类型

id , class , style , hidden , data- , bind / catch

4特殊属性

几乎所有组件都有各自定义的属性，可以对该组件的功能或样式进行修饰

5组件列表

基础组件分为以下八大类：

视图容器(View Container)：

view 视图容器 , scroll-view 可滚动视图容器, swiper 滑块视图容器

基础内容(Basic Content)：

icon 图标, text 文字, progress 进度条

表单(Form)：

button 按钮, form 表单， input 输入框， checkbox 多想选择器, radio 单选器， picker 列表选择器, slider 滚动选择器, switch 开关选择器, label 标签

*** 作反馈（Interaction）

action-sheet 上拉菜单

modal 模态d窗

toast 消息提示框

loading 加载提示符

导航Navigation

navigator 应用链接

多媒体(Media)

audio 音频, image ， video 视频

地图

map 地图

画布Canvas

canvas 画布

flex: vt折曲，使收缩； vi玩去，收缩

#使用mpvue 开发小程序过程中 简单介绍一下微信小程序蓝牙连接过程

#在蓝牙连接的过程中部分api需要加定时器延时1秒到2秒左右再执行，原因为何不知道，小程序有这样的要求

#1首先是要初始化蓝牙：openBluetoothAdapter()

```js

if (wxopenBluetoothAdapter) {

wxopenBluetoothAdapter({

        success: function(res) {

            / 获取本机的蓝牙状态 /

            setTimeout(() => {

                getBluetoothAdapterState()

            }, 1000)

        },

        fail: function(err) {

            // 初始化失败

        }

    })

    } else {    

    }

```

#2检测本机蓝牙是否可用：

#  要在上述的初始化蓝牙成功之后回调里调用

```js

getBluetoothAdapterState() {

    var that= this;

    thattoastTitle= '检查蓝牙状态'

wxgetBluetoothAdapterState({

        success: function(res) {

startBluetoothDevicesDiscovery()

},

        fail(res) {

            consolelog(res)

}

})

}

```

#3 开始搜索蓝牙设备：

```js

startBluetoothDevicesDiscovery() {

    var that= this;

    setTimeout(() => {

wxstartBluetoothDevicesDiscovery({

            success: function(res) {

/ 获取蓝牙设备列表 /

                thatgetBluetoothDevices()

},

            fail(res) {

}

})

}, 1000)

}

```

#4 获取搜索到的蓝牙设备列表

# / thatdeviceName 是获取到的蓝牙设备的名称， 因为蓝牙设备在安卓和苹果手机上搜到的蓝牙地址显示是不一样的，所以根据设备名称匹配蓝牙/

```js

getBluetoothDevices() {

    var that= this;

    setTimeout(() => {

wxgetBluetoothDevices({

            services: [],

            allowDuplicatesKey: false,

            interval: 0,

            success: function(res) {

                if (resdeviceslength> 0) {

                    if (JSONstringify(resdevices)indexOf(thatdeviceName) !== -1) {

                        for (let i = 0; i < resdeviceslength; i++) {

                            if (thatdeviceName === resdevices[i]name) {

/ 根据指定的蓝牙设备名称匹配到deviceId /

                                thatdeviceId = thatdevices[i]deviceId;

                                setTimeout(() => {

                                    thatconnectTO();

}, 2000);

};

};

} else {

}

} else {

}

},

            fail(res) {

                consolelog(res, '获取蓝牙设备列表失败=====')

}

})

}, 2000)

},

```

#5连接蓝牙

# 匹配到的蓝牙设备ID 发送连接蓝牙的请求， 连接成功之后 应该断开蓝牙搜索的api，然后去获取所连接蓝牙设备的service服务

```js

connectTO() {

wxcreateBLEConnection({

        deviceId: deviceId,

        success: function(res) {

            thatconnectedDeviceId = deviceId;

/ 4获取连接设备的service服务 /

thatgetBLEDeviceServices();

wxstopBluetoothDevicesDiscovery({

                success: function(res) {

                    consolelog(res, '停止搜索')

},

                fail(res) {

}

})

},

        fail: function(res) {

}

})

}

```

#6 获取蓝牙设备的service服务,获取的serviceId有多个要试着连接最终确定哪个是稳定版本的service 获取服务完后获取设备特征值

```js

getBLEDeviceServices() {

    setTimeout(() => {

wxgetBLEDeviceServices({

            deviceId: thatconnectedDeviceId,

            success: function(res) {

                thatservices= resservices

/ 获取连接设备的所有特征值 /

thatgetBLEDeviceCharacteristics()

},

            fail: (res) => {

}

})

}, 2000)

},

```

#7获取蓝牙设备特征值

# 获取到的特征值有多个，最后要用的事能读，能写，能监听的那个值的uuid作为特征值id，

```js

getBLEDeviceCharacteristics() {

            setTimeout(() => {

wxgetBLEDeviceCharacteristics({

                    deviceId: connectedDeviceId,

                    serviceId: services[2]uuid,

                    success: function(res) {

                        for (var i = 0; i < rescharacteristicslength; i++) {

                            if ((rescharacteristics[i]propertiesnotify || rescharacteristics[i]propertiesindicate) &&

                                (rescharacteristics[i]propertiesread && rescharacteristics[i]propertieswrite)) {

                                consolelog(rescharacteristics[i]uuid, '蓝牙特征值 ==========')

/ 获取蓝牙特征值 /

                                thatnotifyCharacteristicsId = rescharacteristics[i]uuid

// 启用低功耗蓝牙设备特征值变化时的 notify 功能

thatnotifyBLECharacteristicValueChange()

}

}

},

                    fail: function(res) {

}

})

}, 1000)

},

```

#8启动notify 蓝牙监听功能 然后使用 wxonBLECharacteristicValueChange用来监听蓝牙设备传递数据

#接收到的数据和发送的数据必须是二级制数据， 页面展示的时候需要进行转换

```js

notifyBLECharacteristicValueChange() { // 启用低功耗蓝牙设备特征值变化时的 notify 功能

            var that= this;

            consolelog('6启用低功耗蓝牙设备特征值变化时的 notify 功能')

wxnotifyBLECharacteristicValueChange({

                state: true,

                deviceId: thatconnectedDeviceId,

                serviceId: thatnotifyServicweId,

                characteristicId: thatnotifyCharacteristicsId,

                complete(res) {

/用来监听手机蓝牙设备的数据变化/

wxonBLECharacteristicValueChange(function(res) {

//

                        thatbalanceData += thatbuf2string(resvalue)

                        thathexstr += thatreceiveData(resvalue)

})

},

                fail(res) {

                    consolelog(res, '启用低功耗蓝牙设备监听失败')

                    thatmeasuringTip(res)

}

})

},

/转换成需要的格式/

buf2string(buffer) {

                    var arr = Arrayprototypemapcall(new Uint8Array(buffer), x => x)

                    return arrmap((char, i) => {

                        return StringfromCharCode(char);

                    })join('');

},

receiveData(buf) {

return thishexCharCodeToStr(thisab2hex(buf))

},

/转成二进制/

ab2hex (buffer) {

              var hexArr = Arrayprototypemapcall(

                  new Uint8Array(buffer), function (bit) {

                      return ('00' + bittoString(16))slice(-2)

}

)

              return hexArrjoin('')

},

/转成可展会的文字/

hexCharCodeToStr(hexCharCodeStr) {

              var trimedStr = hexCharCodeStrtrim();

              var rawStr = trimedStrsubstr(0, 2)toLowerCase() === '0x' trimedStrsubstr(2) : trimedStr;

              var len = rawStrlength;

              var curCharCode;

              var resultStr= [];

              for (var i = 0; i < len; i = i+ 2) {

                  curCharCode = parseInt(rawStrsubstr(i, 2), 16);

                  resultStrpush(StringfromCharCode(curCharCode));

}

              return resultStrjoin('');

},

```

# 向蓝牙设备发送数据

```js

sendData(str) {

    let that= this;

    let dataBuffer = new ArrayBuffer(strlength)

    let dataView = new DataView(dataBuffer)

    for (var i = 0; i < strlength; i++) {

        dataViewsetUint8(i, strcharAt(i)charCodeAt())

}

    let dataHex = thatab2hex(dataBuffer);

    thiswriteDatas = thathexCharCodeToStr(dataHex);

wxwriteBLECharacteristicValue({

        deviceId: thatconnectedDeviceId,

        serviceId: thatnotifyServicweId,

        characteristicId: thatnotifyCharacteristicsId,

        value: dataBuffer,

        success: function (res) {

            consolelog('发送的数据：' + thatwriteDatas)

            consolelog('message发送成功')

},

        fail: function (res) {

},

        complete: function (res) {

}

})

},

```

# 当不需要连接蓝牙了后就要关闭蓝牙，并关闭蓝牙模块

```js

// 断开设备连接

closeConnect() {

if (thatconnectedDeviceId) {

wxcloseBLEConnection({

            deviceId: thatconnectedDeviceId,

            success: function(res) {

thatcloseBluetoothAdapter()

},

            fail(res) {

}

})

} else {

thatcloseBluetoothAdapter()

}

},

// 关闭蓝牙模块

closeBluetoothAdapter() {

wxcloseBluetoothAdapter({

        success: function(res) {

},

        fail: function(err) {

}

})

},

```

#在向蓝牙设备传递数据和接收数据的过程中，并未使用到read的API 不知道有没有潜在的问题，目前线上运行为发现任何的问题

#今天的蓝牙使用心得到此结束，谢谢

<view class="itemView">用户名：

<input class="input" name="userName" placeholder="请输入用户名"

bindinput ="userNameInput"/>

</view>

<view class="itemView">密 码：

<input class="input" password placeholder="请输入密码"

bindinput="passWdInput" />

</view>

<view class="viewName" style="background-color:#fbf9fe">

<button class="loginBtn" bindtap="loginBtnClick">登录</button>

</view>

Page({

data: {

userName: '',

userPwd:""

}, //获取用户输入的用户名

userNameInput:function(e) {

thissetData({

userName: edetailvalue

})

},

passWdInput:function(e)

输入的密码

loginBtnClick: function (e) {

consolelog("用户名："+thisdatauserName+" 密码：" +thisdatauserPwd);

}

, // 用户点击右上角分享

onShareAppMessage: function () {

}

})

格式调整

界面相关

分割线

标签

一、视图容器(View Container)：

view 视图容器

scroll-view 可滚动视图容器

swiper 可滑动的视图容器

二、基础内容(Basic Content)

icon 图标

text 文字

progress 进度条

三、表单组件(Form)

button 按钮

form 表单

input 输入框

checkbox 多项选择器

radio 单项选择器

picker 列表选择器

slider 滑动选择器

switch 开关选择器

label 标签

四、 *** 作反馈组件(Interaction)

action-sheet 上拉菜单

modal 模态d窗

progress 进度条

toast 短通知

五、导航(Navigation)

navigator 应用内跳转

六、多媒体(Media)

audio 音频

image

video 视频

七、地图(Map)

map 地图

八、画布(Canvas)

canvas 画布

wxml

<import src="/dist/toast/indexwxml" />

<view class="container">

<view class="doc-title">显示</view>

<view class="zan-btns" style="margin-top: 30vh;">

<button class="zan-btn" bindtap="showToast">

点击显示

</button>

</view>

</view>

<template is="zan-toast" data="{{ zanToast }}"></template>

js

var Zan = require('//dist/index');

Page(Objectassign({}, ZanToast, {

data: {},

showToast() {

thisshowZanToast('收费标准每小时3元');

}

}));

效果是下面这样

你可以在网上下一个小程序的ui框架，这样方便很多

现在的小程序获取options值的话,最简单的方式,就是使用 onLoad(生命周期函数--监听页面加载) 来获取了

但是有的时候 需要使用 onShow(生命周期函数--监听页面显示) 来获取 options ,这个时候就获取不到options 值

打印options 会显示   undefined

如何在onshow中获取 options值

首先获取小程序的页面栈

什么是小程序的页面栈,了解一下;

举例 :如果一个网页,你一直点击链接 ,就会一直跳转,(前提没有打开新的页面),你每打开一个页面,就会向页面栈中引入一个当前页面,就形成了一个栈结构,可以从当前的页面,一直返回到第一个页面

同理,小程序也是存在栈结构的,小程序的栈解构,是有限制,最大长度只有10,只保存10个,如果超出10个,就会把第一个页面,释放掉;

1 getCurrentPages( ) 获取页面栈

注意

一定要从传递参数的页面跳转过来, 注意

我个人的 :传递参数页面是pages/user/user/  ,点击跳转的是pages/order/order, 

打印结果

打印出来是一个数组, 其中有标记着自己现在哪一个页面的路径"_route_",找到当前的页面路径;  options就在其中   

注意:我个人传递的参数 是tyoe = 1;  传递参数页面是pages/user/user/  ,跳转的是pages/order/order,  所以options是在pages/order/order中的,也就是数组的下标为1的

 2 获取 options 中的参数

这样就获取到传递的参数了

希望帮助到各位小白了

以上就是关于vant组件库 vue及小程序全部的内容，包括:vant组件库 vue及小程序、uni-app 自定义loading 自定义toast 兼容小程序&APP、微信小程序_组件等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！