小程序開發(fā)教程欄目介紹微信小程序開發(fā)的一些問題

推薦（免費(fèi)）：小程序開發(fā)教程

微信小程序開發(fā)問題匯總

• 樣式如何使用變量
• video遮罩問題
• 彈幕自動(dòng)上推信息流
• 軟鍵盤問題
• websocket使用
• • weapp.socket.io
  • 小程序當(dāng)中的使用

小程序開發(fā)告一段落，總結(jié)一下這段時(shí)間小程序開發(fā)遇到的問題及解決方案，react沖沖沖?。?！

樣式如何使用變量

在wxss中，定義變量：width：var(–width–);

在js中，定義變量：viewWidth，并給這個(gè)變量賦予想要的值

在wxml中，使用wxss中的變量和js中的變量：style="–width–: {{ viewWidth }}px"

video遮罩問題

在實(shí)現(xiàn)直播的功能時(shí)，我們需要彈出紅包等遮蓋video的處理，此時(shí)會(huì)發(fā)現(xiàn)，使用z-index屬性在小程序中是無(wú)效的，微信開發(fā)者文檔提供了cover-view，cover-imge等控件實(shí)現(xiàn)遮罩的功能。
這里值得注意的是cover-view中的background-image屬性是無(wú)效的，所以我們要安放背景圖時(shí)需要使用到cover-image，并且將它的position設(shè)置為absolute， top為0， left也為0即可。

彈幕自動(dòng)上推信息流

首先是將這個(gè)scroll的高度定死，讓scroll自動(dòng)滑動(dòng)到某個(gè)item的位置：

????<scroll-view class="danmu-list" scroll-y="true" scroll-into-view="{{&#39;item_&#39; + danmulist.length}}" style="height: {{windowHeight - 890}}rpx">
????????<view id="{{&#39;item_&#39; + (index + 1)}}" wx:for="{{danmulist}}" class="{{item.nickName == username ? &#39;danmu-item owner&#39; : &#39;danmu-item&#39;}}" wx:key="this">
??????????<view class="nickname">{{item.nickName}}：</view>
??????????<view class="content {{ item.system ? &#39;system&#39; : &#39;&#39; }}" style="color: {{ item.system ? &#39;#71f474&#39; : (item.color || &#39;#fff&#39;)}}">{{item.content}}</view>
????????</view>
????</scroll-view>

為scroll添加樣式：

.danmu-list?{
??width:?750rpx;
??height:?290rpx;
??position:?relative;
??padding-top:?27rpx;}.danmu-item?{
??padding:?0?27rpx;}.danmu-item?.nickname?{
??color:?#cdd5ff;
??font-size:?26rpx;
??display:?inline-block;}.danmu-item.owner?.nickname?{
??color:?#ffab00;}.danmu-item?.content?{
??color:?#ffffff;
??font-size:?26rpx;
??display:?inline-block;}

可以看到在小程序上的實(shí)現(xiàn)，明顯比在網(wǎng)頁(yè)上要簡(jiǎn)單，我們只需要一個(gè)scroll-into-view的屬性，并且為每個(gè)item添加一個(gè)id即可。
那么有沒有純css的實(shí)現(xiàn)呢？當(dāng)然。
我們將item都放在一個(gè)盒子中，讓盒子的相對(duì)于list底部對(duì)齊，overflow則進(jìn)行scroll，這樣同樣能實(shí)現(xiàn)現(xiàn)在的效果。

軟鍵盤問題

此次開發(fā)，需要實(shí)現(xiàn)一個(gè)輸入框點(diǎn)擊，軟鍵盤彈起，選擇顏色功能。我們看下效果圖：

那么考慮幾個(gè)問題：
1、選擇顏色時(shí)鍵盤失去焦點(diǎn)會(huì)縮起
微信小程序提供了一個(gè)hold-keyboard屬性

我在input 中設(shè)定了hold-keyboard="true"
2、軟鍵盤彈出時(shí)會(huì)自動(dòng)把頁(yè)面上推，但是我們僅僅想要軟鍵盤把input框上推而不是整個(gè)頁(yè)面。
分析一下這個(gè)問題，首先是考慮純css解決方案，把頁(yè)面設(shè)為fixed，然而不起作用；接下來(lái)考慮頁(yè)面彈起時(shí)減去軟鍵盤的高度讓它恢復(fù)到原位，這會(huì)帶來(lái)兩個(gè)問題：1）軟鍵盤彈起后才能獲取軟鍵盤高度，這樣一來(lái)頁(yè)面的下落會(huì)產(chǎn)生嚴(yán)重的滯后；2）同樣的不起作用
這個(gè)問題最終的解決方案是這樣的：
首先查看官方文檔，微信小程序提供了一個(gè)adjust-position屬性

設(shè)定adjust-position=“false"，此時(shí)的確不會(huì)進(jìn)行頁(yè)面的上推了，但是我們需要的input框上推如何實(shí)現(xiàn)？
我們可以在input的方法參數(shù)e.detail.height中拿到軟鍵盤的高度，設(shè)定input的高度為e.detail.height的高度即可。
最終代碼：

?<cover-view wx:if="{{inputParam.colorShow}}" class="color-check" style="bottom: {{inputParam.bottom + (windowWidth / 750 * 90)}}px">
???<cover-image class="color-background" src="{{assets}}/images/live-index-danmu-send-color-check.png"></cover-image>
???<cover-view class="color-list">
?????<cover-view wx:for="{{colorStatusList}}" wx:key="this" catchtap="checkColor" data-index="{{index}}" class="{{item.checked == 0 ? &#39;color-icon&#39; : &#39;color-icon with-border&#39;}}" style="background-color: {{item.color}}"></cover-view>
???</cover-view>
?</cover-view>
?
?<view class="enterDanmu" style="bottom: {{inputParam.bottom}}px">
	??<input hold-keyboard="true" catchtap catchfocus="enterMessage" bindconfirm="loseColor" bindinput="getInputValue" placeholder="發(fā)個(gè)彈幕唄~"
	     placeholder-style="font-size: 26rpx; color: #09091b" style="color:{{fontcolor}};"
	     value="{{inputParam.inpuentertValue}}" focus="{{inputParam.focus}}" adjust-position="{{false}}"></input>
?????<image catchtap="sendMessageOperation" class="danmu-btn" src="{{assets}}images/live-index-danmu-send.png"></image>
?</view>

checkColor(e)?{
????let?colorStatusList?=?this.data.colorStatusList;
????let?index?=?e.currentTarget.dataset.index;
????let?foncolor?=?colorStatusList[index].color;
????let?inputParam?=?this.data.inputParam
????inputParam.focus?=?true
????if?(colorStatusList[index].checked?==?true)?{
??????colorStatusList[index].checked?=?false
??????foncolor?=?'#09091b'
????}?else?{
??????for?(let?colorIndex?in?colorStatusList)?{
????????colorStatusList[colorIndex].checked?=?false
??????}
??????colorStatusList[index].checked?=?true
????}
????this.setData({
??????colorStatusList:?colorStatusList,
??????fontcolor:?foncolor,
??????inputParam:?inputParam????})
??},

??getInputValue(e)?{
????let?inputParam?=?this.data.inputParam;
????inputParam.inputValue?=?e.detail.value;
????this.setData({
??????inputParam:?inputParam????})
??},

??enterMessage(e)?{
????let?inputParam?=?this.data.inputParam;
????inputParam.colorShow?=?true,
????inputParam.focus?=?true,
????inputParam.bottom?=?e.detail.height????this.setData({
??????inputParam:?inputParam,
????})
??},

??loseColor()?{
????let?inputParam?=?this.data.inputParam;
????inputParam.colorShow?=?false;
????inputParam.focus?=?false;
????inputParam.bottom?=?0;
????this.setData({
??????inputParam:?inputParam,
????})
??},

??sendMessageOperation(e)?{
????let?inputParam?=?this.data.inputParam;
????if?(inputParam.inputValue?!=?'')?{
??????this.socket.emit('message',?inputParam.inputValue,?this.data.fontcolor);
??????app.api.send_message(this.data.liveId,?this.data.fontcolor,?inputParam.inputValue);
??????inputParam.inputValue?=?'';
??????inputParam.colorShow?=?false
??????inputParam.focus?=?false
??????inputParam.bottom?=?0
??????this.setData({
????????inputParam:?inputParam,
??????})
??????console.log("sendMessageOperation")
????}?else?{
??????inputParam.inputValue?=?'';
??????inputParam.colorShow?=?false
??????inputParam.focus?=?false
??????this.setData({
????????inputParam:?inputParam,
??????})
????}

??}

至于說上面的catchtap則很好理解了，當(dāng)我們要點(diǎn)擊任意處導(dǎo)致失去焦點(diǎn)時(shí)，必定要在外層綁定bindtap事件，那么此處就需要使用catchtap阻止事件的冒泡。
值得一提的是，微信小程序也提供了一個(gè)wx.onKeyboardHeightChange(function callback)方法來(lái)監(jiān)聽鍵盤的高度變化，但是親測(cè)這個(gè)方法并沒有很好用，嘗試了一下就棄之不用了。

websocket使用

我們都知道 HTTP 協(xié)議有一個(gè)缺陷：通信只能由客戶端發(fā)起。那么在這種情況下，如果服務(wù)器有連續(xù)的狀態(tài)變化，客戶端要獲知就非常麻煩。我們只能使用"輪詢"，最典型的應(yīng)用場(chǎng)景就是聊天室了。
輪詢的效率低，非常浪費(fèi)資源。因此，工程師們一直在思考，有沒有更好的方法。WebSocket 就是這樣發(fā)明的。
那么如何在微信小程序中使用websocket呢？先來(lái)看看本次的需求：
在觀看直播的過程當(dāng)中，用戶會(huì)進(jìn)行聊天，服務(wù)器要將用戶的彈幕信息推送到每個(gè)用戶的手機(jī)端。

weapp.socket.io

weapp.socket.io是基于socket.io的微信程序環(huán)境中的客戶端，以及socket.io-client瀏覽器版本的完整功能。
安裝方式：

npm?i?weapp.socket.io

簡(jiǎn)單使用的代碼：

<template>
????<view class="content">
???????<button type="primary" @click="send">發(fā)送消息</button>
????</view></template>

//?引入?weapp.socket.io.js?import?io?from?'@/util/weapp.socket.io.js';export?default?{
????data()?{
????????return?{};
????},
????onLoad()?{
????????//?建立一個(gè)socket連接
????????const?socket?=(this.socket?=?io('https://socket-io-chat.now.sh/'));

????????/**
?????????*?客戶端socket.on()監(jiān)聽的事件：
?????????*/

????????//?連接成功
????????socket.on('connect',?()?=>?{
????????????console.log('連接成功');
????????});
????????//?正在連接
????????socket.on('connecting',?d?=>?{
????????????console.log('正在連接',?d);
????????});
????????//?連接錯(cuò)誤
????????socket.on('connect_error',?d?=>?{
????????????console.log('連接失敗',?d);
????????});
????????//?連接超時(shí)
????????socket.on('connect_timeout',?d?=>?{
????????????console.log('連接超時(shí)',?d);
????????});
????????//?斷開連接
????????socket.on('disconnect',?reason?=>?{
????????????console.log('斷開連接',?reason);
????????});
????????//?重新連接
????????socket.on('reconnect',?attemptNumber?=>?{
????????????console.log('成功重連',?attemptNumber);
????????});
????????//?連接失敗
????????socket.on('reconnect_failed',?()?=>?{
????????????console.log('重連失敗');
????????});
????????//?嘗試重新連接
????????socket.on('reconnect_attempt',?()?=>?{
????????????console.log('嘗試重新重連');
????????});
????????//?錯(cuò)誤發(fā)生，并且無(wú)法被其他事件類型所處理
????????socket.on('error',?err?=>?{
????????????console.log('錯(cuò)誤發(fā)生，并且無(wú)法被其他事件類型所處理',?err);
????????});
????????//?加入聊天室
????????socket.on('login',?d?=>?{
????????????console.log(`您已加入聊天室，當(dāng)前共有?${d.numUsers}?人`);
????????});
????????//?接受到新消息
????????socket.on('new?message',?d?=>?{
????????????console.log('new?message',d);

????????});
????????//?有人加入聊天室
????????socket.on('user?joined',?d?=>?{
????????????console.log(`${d.username}?來(lái)了，當(dāng)前共有?${d.numUsers}?人`);

????????});
????????//?有人離開聊天室
????????socket.on('user?left',?d?=>?{
????????????console.log(`${d.username}?離開了，當(dāng)前共有?${d.numUsers}?人`);
????????});
????},
????methods:?{
????????send(){
????????????//?發(fā)送消息
????????????this.socket.emit('new?message',?'發(fā)送消息')?
????????}
????}};

小程序當(dāng)中的使用

?initWebSocket(live)?{
????if(this.socket)?{
??????this.socket.disconnect();
??????this.socket?=?null;
????}
????if(live.step?!=?'直播中')?{
??????return?this.setData({?liveTipTime:?live.start_time?});
????}
????const?username?=?this.data.username;
????const?timestamp?=?Math.floor(Date.now()/1000/60/10);
????const?token?=?`gz.${timestamp}.${username}`;
????const?socket?=?io(?`${socketHost}/chat?id=${this.data.liveId}&token=${token}`);
????socket.on('connect',?()?=>?{
??????this.setData({?socketError:?''?});
??????console.log('connection?created.')
????});
????socket.on('join',?user?=>?{
??????let?{?danmulist?}?=?this.data;
??????danmulist.push({?nickName:?user,?content:?'加入了房間',?system:?true?});
??????this.setData({?danmulist,?onlineUserCount:?this.data.onlineUserCount?+?1?});
????});
????socket.on('message',?msg?=>?{
??????let?{?danmulist?}?=?this.data;
??????danmulist.push({?nickName:?msg.user,?content:?msg.content,?color:?msg.color?||?'#fff'?});
??????this.videoContext.sendDanmu({?text:?msg.content,?color:?msg.color?||?'#fff'?})
??????this.setData({?danmulist?});
??????console.log(msg)
????});
????socket.on('alluser',?users?=>?{
??????//console.log('alluser',?users);
??????this.setData({?onlineUserCount:?users.length?});
????});
????socket.on('logout',?users?=>?{
??????console.log('alluser',?users)
??????this.setData({?onlineUserCount:?this.data.onlineUserCount?-?1?});
????});
????socket.on('getAlluser',?({?type,?users?})?=>?{
??????console.log('getAlluser',?type,?users);
??????if(this.data.isAdmin)?{
????????app.api.lottery_start(type,?users).then(x=>{
??????????if(!x.length)?{
????????????return?wx.showModal({?content:?'當(dāng)前已無(wú)符合條件的中獎(jiǎng)候選名單，請(qǐng)稍后再試'?});
??????????}
??????????wx.showToast({?title:?'抽獎(jiǎng)成功'?});
??????????this.setData({?activeTab:?0?});
??????????this.socket.emit('lotteryStart',?type);
??????????this.lottery_result_summary();
????????}).catch(e=>{
??????????wx.showModal({?title:?'抽獎(jiǎng)失敗:?'+e,?showCancel:?false?});
????????});
??????}
????});
????socket.on('setScore',?score?=>?{
??????const?liveIndex?=?this.data.swiperList.findIndex(x=>x.id?==?this.data.liveId);
??????if(this.data.swiperList[liveIndex])?{
????????this.setData({?[`swiperList[${liveIndex}].score`]:?score?});
??????}
??????console.log('setScore',?score)
????});
????socket.on('lotteryStart',?type?=>?{
??????console.log('lotteryStart',?type)
??????if(this.data.lotteryStatus?==?1)?{
????????app.api.lottery_result(type).then(lotteryResult=>{
??????????this.setData({?lotteryStatus:?2,?lotteryResult,?time2:?10?});
??????????this.countdown();
????????});
??????}
????});
????socket.on('setliveStep',?step?=>?{
??????console.log('setliveStep',?step)
????});
????socket.on('error',?e?=>?{
??????console.error('socket?error',?e);
??????wx.showToast({?title:?'連接彈幕服務(wù)失敗',?icon:?'none'?});
??????this.setData({?socketError:?e?+?''?});
????})
????this.socket?=?socket;
????this.setData({?liveTipTime:?''?});
??},

想了解更多編程學(xué)習(xí)，敬請(qǐng)關(guān)注php培訓(xùn)欄目！

以上是匯總微信小程序開發(fā)問題的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！