藍(lán)牙遙控車微信小程序界面制作要點(diǎn)

時間：2022-09-20 11:19:37

關(guān)鍵字：藍(lán)牙遙控車微信小程序界面

手機(jī)看文章

掃描二維碼
隨時隨地手機(jī)看文章

[導(dǎo)讀]最近制作藍(lán)牙遙控車，需要進(jìn)行小程序界面設(shè)計(jì)，需要對界面進(jìn)行橫屏操作。經(jīng)過查閱發(fā)現(xiàn)沒有單獨(dú)設(shè)置屏幕方向的功能，但是可以設(shè)置整個界面自動識別橫屏和豎屏操作。設(shè)置界面自動切換橫屏和豎屏，在app.json中的window 段中設(shè)置 "pageOrientation": "auto"。

最近制作藍(lán)牙遙控車，需要進(jìn)行小程序界面設(shè)計(jì)，需要對界面進(jìn)行橫屏操作。經(jīng)過查閱發(fā)現(xiàn)沒有單獨(dú)設(shè)置屏幕方向的功能，但是可以設(shè)置整個界面自動識別橫屏和豎屏操作。設(shè)置界面自動切換橫屏和豎屏，在app.json中的window 段中設(shè)置 "pageOrientation": "auto"。

啟動后可以實(shí)現(xiàn)橫屏功能。

由于要做的是小車遙控界面，所以需要設(shè)置小車控制按鈕。首先要做的將按鈕定位到界面左下角。這也是費(fèi)了很大的功夫。通過usermotto1來實(shí)現(xiàn)樣式的控制。

接下來是對左轉(zhuǎn)和右轉(zhuǎn)按鈕的同行控制。通過userinfo來實(shí)現(xiàn)樣式的控制，將兩個按鈕放在同一個div下即可。通過測試發(fā)現(xiàn)這個方法多個按鈕都可以控制在同一行，所以使用同一行控制就可以應(yīng)用此渲染方法。

接下來需要完成按鈕的事件操作，本來想用按鈕長按才進(jìn)行數(shù)據(jù)發(fā)送，但是長按的識別事件并不會一直觸發(fā)這個事件，在一次長按操作下只會觸發(fā)一次，所以并不能一直觸發(fā)進(jìn)行發(fā)送數(shù)據(jù)。因此使用了按鈕按下和按鈕松開事件觸發(fā)操作。在按鈕按下后置位一個標(biāo)志位，進(jìn)行數(shù)據(jù)發(fā)送，這個數(shù)據(jù)需要一直發(fā)，讓小車一直進(jìn)行行駛。只有松開按鈕后才會停止。下圖是針對前進(jìn)按鈕的按下和松開的時間操作函數(shù)。