总结微信小程序开发问题(关于微信小程序开发的问题)

小程序开发教程专栏介绍微信小程序开发的一些问题

推荐(免费):小程序开发教程微信小程序开发问题总结风格如何使用可变视频遮罩问题弹幕自动推送信息流软键盘问题websocket使用weapp.socket.io小程序开发已经告一段落。总结这段时间小程序开发遇到的问题和解决方法。反应过来！！！

如何在wxss中使用样式的变量，定义变量:width:var(–width-)；

在js中，定义变量:viewWidth，并将所需的值赋给该变量。

在wxml中，使用wxss和js中的变量:style = –width –: { { view width } } px ；

在实现直播的功能时，我们需要弹出一个红包来覆盖视频。这个时候我们会发现在小程序中使用z-index属性是无效的。微信开发者文档提供了覆盖-视图、覆盖-imge等控件的功能来实现蒙版。这里值得注意的是，cover -视图中的background-image属性是无效的，所以我们在放置背景图片时需要使用cover-image，并将其位置设置为absolute，top为0，left为0。

弹幕自动向上推信息流首先固定好这个卷轴的高度，让卷轴自动滑动到一个物品的位置:

ltscroll -view class = ；danmu -list ；scroll -y = ；true scroll -into -view = ；{{'item _ # 39+Dan mulist . length } } ；style = 高度:{ { window height -890 } } rpx ； gt lt视图id = {{'item _ # 39+(index+1)} } ；wx:for = ；{ { danmulist } } class = {{item.nickName ==用户名？'danmu -项目所有者 # 39；: 'danmu -item # 39；} } wx:key = ；这 gt ltview class = 昵称 gt{{item .昵称} }: lt；/view gt； ltview class = content {{ item.system？'系统 # 39；: ''} } style = color: {{ item.system？'# 71f474 # 39:(item.color | | # 39# fff # 39)} } gt{ { item.content } } lt/view gt； lt/view gt； lt/scroll -view gt；为滚动添加样式:

. danmu -list { width:750 rpx；身高:290rpx位置:相对；padding -top:27 rpx；} . danmu -item { padding:0 27 rpx；}.danmu-item。昵称{ color:# cdd 5 ff；font -size:26 rpx；显示:inline -block；}.danmu-item.owner。昵称{ color:# ffab 00；}.danmu-item。content { color:# ffffff；font -size:26 rpx；显示:inline -block；}你可以在小程序上看到实现，明显比网页上简单。我们只需要一个scroll-into-view的属性，并为每个条目添加一个id。那么有没有纯css的实现呢？当然可以。我们把所有的条目放在一个盒子里，把盒子和列表的底部对齐，滚动溢出，也可以达到现在的效果。

软键盘问题本次开发需要实现一个输入框点击，软键盘弹出和颜色选择功能。我们来看看效果图:然后考虑几个问题:1。选择颜色时，键盘会失去焦点并收缩。微信小程序提供了一个hold -键盘属性我设置hold -键盘= 输入中。true 2.软键盘弹出时会自动向上推页面，但我们只是希望软键盘向上推输入框而不是整个页面。要分析这个问题，首先考虑纯css方案，把页面设置成固定的，但是不行；接下来考虑在页面弹出时减去软键盘的高度来恢复到原来的位置，这样会带来两个问题:1)软键盘弹出后才能得到软键盘的高度，会造成页面下降的严重滞后；2)同样不行。这个问题的最终解决方法如下:首先查一下公文。微信小程序提供了一个adjust-position属性 set adjust -position = "false "此时确实不会进行页面推送，但是如何实现我们需要的输入框的推送呢？我们可以在方法参数e.detail.height of input中获取软键盘的高度，并将输入的高度设置为e.detail.height的高度.最终代码:

ltcover -view wx:if = ；{ { inputParam.colorShow } } class = color -检查 style = 底部:{ { input param . bottom+(window width/750 * 90)} } px ； gt ltcover -image class = ；颜色-背景 src = { { assets } }/images/live -index -danmu -send -color -check . png ； gt lt/cover -image gt； ltcover -view class = ；color -list ； gt ltcover -view wx:for = ；{ { colorStatusList } } wx:key = ；这 catchtap = 检查颜色 data -index = ；{ { index } } class = {{item.checked == 0？'color -icon # 39；: '带-边框的color -图标 # 39；} } style = background -color:{ { item . color } } ； gt lt/cover -view gt； lt/cover -view gt； lt/cover -view gt； ltview class = enterDanmu style = 底部:{ { inputParam.bottom } } px gt ltinput hold -keyboard = ；true catchtap catchfocus = 输入消息 bindconfirm = loseColorbindinput = getInputValue placeholder = 发个弹幕~ placeholder -style = ；font -size:26 rpx；color:# 09091 b ；style = 颜色:{ { fontcolor } }"value = { { input param . input entvalue } } ；焦点= { { inputParam.focus } } adjust -position = ；{ { false } } gt lt/input gt； ltimage catchtap = sendMessageOperation class = 丹木-BTN ；src = { { assets } } images/live -index -danmu -send . png ； gt lt/image gt； lt/view gt；check color(e){ let colorStatusList = this . data . colorStatusList；设index = e . current target . dataset . index；let fon color = colorStatusList[index]。颜色；设input param = this . data . input param input param . focus = true if(colorStatusList[index])。checked = = true){ colorStatusList[index]。checked = false foncolor = # 39# 09091b # 39} else { for(let colorStatusList中的colorIndex){ colorStatusList[colorIndex]。checked = false } colorStatusList[index]。checked = true } this . setdata({ colorStatusList:colorStatusList，fontcolor: foncolor，inputParam: inputParam }) }，getinput value(e){ let input param = this . data . input param；输入参数.输入值= e . detail . value；this . setdata({ input param:input param })}，enter message(e){ let input param = this . data . input param；inputParam.colorShow = true，inputParam.focus = true，input param . bottom = e . detail . height this . setdata({ input param:input param，}) }，lose color(){ let input param = this . data . input param；inputParam.colorShow = falseinputParam.focus = falseinput param . bottom = 0；this . setdata({ input param:input param，}) }，sendmessage operation(e){ let input param = this . data . input param；if (inputParam.inputValue！= ''){ this . socket . emit( # 39；消息 # 39；，inputParam.inputValue，this . data . font color)；app . API . send _ message(this . data . live id，this.data.fontcolor，input param . input value)；input param . input value = # 39；'；input param . color show = false input param . focus = false input param . bottom = 0 this . setdata({ input param:input param，})console . log( ；sendMessageOperation )} else { input param . input value = # 39；'；input param . colorshow = false input param . focus = false this . setdata({ input param:input param，}}})至于上面的catchtap，很好理解。当我们要点击任意位置而失去焦点时，必须在外层绑定bindtap事件，所以我们需要在这里使用catchtap来防止事件冒泡。值得一提的是，微信小程序还提供了一个wx.onkeyboardheightchange(函数回调)的方法来监测键盘的高度变化，但是亲测的方法用处不大，所以试了一试就放弃了。

websocket的使用我们都知道HTTP协议有一个缺陷:通信只能由客户端发起。在这种情况下，如果服务器有连续的状态变化，客户端知道就很麻烦了。我们只能用“投票”最典型的应用场景是聊天室。轮询效率低下，浪费资源。因此，工程师们一直在思考是否有更好的方法。WebSocket就是这样被发明出来的。那么如何在微信小程序中使用websocket呢？我们先来看看这个需求:看直播过程中，用户会聊天，服务器会把用户的弹幕信息推送到每个用户的手机上。

Weapp.socket.ioweapp.socket.io是基于socket.io的微信程序环境中的客户端，socket . io-客户端浏览器版本的完整功能。安装方法:

Npiweapp.socket.io简单代码:

lt模板 gt ltview class = 内容 gt lt按钮类型= 主要 @ click = 发送 gt发送消息

这几篇文章你可能也喜欢：

• 手把手指导你在小程序中实现保存图片的功能（小程序申请保存图片到相册）
• 如何在小程序中创建页面二维码
• 小程序如何动态制作小程序码分析（如何在小程序中动态生成小程序二维码图片）
• 如何解决小程序中的重启跳转错误（小程序重启）
• 教你如何部署微信小程序并上线（如何在线部署小程序）

本文由主机参考刊发，转载请注明：总结微信小程序开发问题(关于微信小程序开发的问题) https://zhujicankao.com/81556.html