WeChat アプレット開発の問題の概要

ミニ プログラム開発チュートリアル このコラムでは、WeChat ミニ プログラム開発におけるいくつかの問題を紹介します

# 推奨 (無料):

ミニ プログラム開発チュートリアル

# WeChat ミニ プログラム開発の問題の概要

#で変数を使用する方法スタイル

• ビデオマスキングの問題
• Barrageが自動的に情報フローをプッシュする
• ソフトキーボードの問題
• Websocketの使用
• weapp.socket.io
  • ミニプログラムでの使い方
ミニプログラムの開発が終了したので、ミニプログラムで発生した問題や問題点をまとめてみましょう。この時期のプログラム開発 解決策、反応ラッシュ！ ！ ！

style で変数を使用する方法

wxss で変数を定義します: width: var(–width–);

js で変数: viewWidth を定義します。これを指定します。変数に必要な値を割り当てます。

wxml では、wxss の変数と js の変数を使用します。 style="–width–: {

{ viewWidth }}px"

ビデオマスキングの問題

ライブブロードキャスト機能を実装する場合、ビデオを覆うために赤い封筒などの処理が必要ですが、このとき、ミニでは z-index 属性の使用が無効であることがわかります。 WeChat 開発者ドキュメントには、マスク機能の実装に使用されるカバービュー、カバー画像、およびその他のコントロールが記載されています。

ここで、カバービューの背景画像属性が無効であることに注意してください。そのため、背景画像を配置したい場合は、カバー画像を使用し、その位置を絶対、上を 0 に設定する必要があります。 0 のままにします。0 にすることもできます。

弾幕が自動的に情報の流れを押し上げます

1 つ目は、スクロールの高さを設定し、スクロールが特定の項目の位置まで自動的にスライドするようにすることです。

    <scroll-view>
        <view>
          <view>{{item.nickName}}：</view>
          <view>{{item.content}}</view>
        </view>
    </scroll-view>

スクロールするスタイルの追加:

.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;}

ミニ プログラムの実装を見ることができますが、これは Web ページよりも明らかに単純です。必要な属性は

scroll-into 1 つだけです。 -view

を実行し、各項目に ID を追加するだけです。 では、純粋な CSS 実装はあるのでしょうか?確かに。 すべてのアイテムをボックスに入れ、ボックスをリストの一番下に揃えて、オーバーフローをスクロールして、現在の効果を実現します。

ソフトキーボードの問題

今回の開発では、入力ボックスをクリックしてソフトキーボードをポップアップさせ、色を選択する機能を実現する必要があります。レンダリングを見てみましょう:

次に、いくつかの問題について考えてみましょう: 1. 色を選択するとき、キーボードはフォーカスを失うと縮小します
WeChat アプレットは
hold-keyboard
Attributes
入力に hold-keyboard="true"
を設定します。 2. ソフト キーボードが自動的にページを押します。ただし、ソフト キーボードでページ全体ではなく入力ボックスを押し上げたいだけです。 この問題を分析します。まず、純粋な CSS ソリューションを検討して、ページを固定に設定しますが、機能しません。次に、ページがポップアップしたときにソフト キーボードの高さを差し引いて元の位置に戻すことを検討します。これには 2 つの問題があります: 1) ソフト キーボードの高さはソフト キーボードが跳ね上がった後でしか取得できないため、ページが落下するときに重大な遅延が発生します; 2) 同じことは機能しません
最終的な解決策
まずは公式ドキュメントを確認してください。WeChat アプレットには
adjust-position
属性
設定 adjust-position="false" が用意されています。 「
、これ 確かにこの時点ではページは押し上げられませんが、必要な入力ボックスを押し上げるにはどうすればよいでしょうか? 入力メソッド パラメーター e.detail.height でソフト キーボードの高さを取得し、入力の高さを e.detail.height の高さに設定できます。 最終コード:

 <cover-view>
   <cover-image></cover-image>
   <cover-view>
     <cover-view></cover-view>
   </cover-view>
 </cover-view>
 
 <view>
	  <input>
     <image></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 はイベントのバブルアップを防ぎます。 WeChat アプレットには、キーボードの高さの変化を監視するための

wx.onKeyboardHeightChange(function callback)
メソッドも提供されていることを言及する価値がありますが、このメソッドは個人的なテストではうまく機能しませんでした。試してみましたが、すぐに破棄されました。 <h1 id="websocket使用">websocket使用</h1> <p>我们都知道 HTTP 协议有一个缺陷：通信只能由客户端发起。那么在这种情况下，如果服务器有连续的状态变化，客户端要获知就非常麻烦。我们只能使用"轮询"，最典型的应用场景就是聊天室了。<br> 轮询的效率低，非常浪费资源。因此，工程师们一直在思考，有没有更好的方法。WebSocket 就是这样发明的。<br> 那么如何在微信小程序中使用websocket呢？先来看看本次的需求：<br> 在观看直播的过程当中，用户会进行聊天，服务器要将用户的弹幕信息推送到每个用户的手机端。</p> <h2 id="weapp-socket-io">weapp.socket.io</h2> <p>weapp.socket.io是基于socket.io的微信程序环境中的客户端，以及socket.io-client浏览器版本的完整功能。<br> 安装方式：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">npm i weapp.socket.io</pre><div class="contentsignin">ログイン後にコピー</div></div> <p>简单使用的代码：</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">&lt;template&gt;     &lt;view&gt;        &lt;button&gt;发送消息&lt;/button&gt;     &lt;/view&gt;&lt;/template&gt;</pre><div class="contentsignin">ログイン後にコピー</div></div> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">// 引入 weapp.socket.io.js import io from '@/util/weapp.socket.io.js';export default {     data() {         return {};     },     onLoad() {         // 建立一个socket连接         const socket =(this.socket = io('https://socket-io-chat.now.sh/'));         /**          * 客户端socket.on()监听的事件：          */         // 连接成功         socket.on('connect', () =&gt; {             console.log('连接成功');         });         // 正在连接         socket.on('connecting', d =&gt; {             console.log('正在连接', d);         });         // 连接错误         socket.on('connect_error', d =&gt; {             console.log('连接失败', d);         });         // 连接超时         socket.on('connect_timeout', d =&gt; {             console.log('连接超时', d);         });         // 断开连接         socket.on('disconnect', reason =&gt; {             console.log('断开连接', reason);         });         // 重新连接         socket.on('reconnect', attemptNumber =&gt; {             console.log('成功重连', attemptNumber);         });         // 连接失败         socket.on('reconnect_failed', () =&gt; {             console.log('重连失败');         });         // 尝试重新连接         socket.on('reconnect_attempt', () =&gt; {             console.log('尝试重新重连');         });         // 错误发生，并且无法被其他事件类型所处理         socket.on('error', err =&gt; {             console.log('错误发生，并且无法被其他事件类型所处理', err);         });         // 加入聊天室         socket.on('login', d =&gt; {             console.log(`您已加入聊天室，当前共有 ${d.numUsers} 人`);         });         // 接受到新消息         socket.on('new message', d =&gt; {             console.log('new message',d);         });         // 有人加入聊天室         socket.on('user joined', d =&gt; {             console.log(`${d.username} 来了，当前共有 ${d.numUsers} 人`);         });         // 有人离开聊天室         socket.on('user left', d =&gt; {             console.log(`${d.username} 离开了，当前共有 ${d.numUsers} 人`);         });     },     methods: {         send(){             // 发送消息             this.socket.emit('new message', '发送消息')          }     }};</pre><div class="contentsignin">ログイン後にコピー</div></div> <h2 id="小程序当中的使用">小程序当中的使用</h2> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"> 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}&amp;token=${token}`);     socket.on('connect', () =&gt; {       this.setData({ socketError: '' });       console.log('connection created.')     });     socket.on('join', user =&gt; {       let { danmulist } = this.data;       danmulist.push({ nickName: user, content: '加入了房间', system: true });       this.setData({ danmulist, onlineUserCount: this.data.onlineUserCount + 1 });     });     socket.on('message', msg =&gt; {       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 =&gt; {       //console.log('alluser', users);       this.setData({ onlineUserCount: users.length });     });     socket.on('logout', users =&gt; {       console.log('alluser', users)       this.setData({ onlineUserCount: this.data.onlineUserCount - 1 });     });     socket.on('getAlluser', ({ type, users }) =&gt; {       console.log('getAlluser', type, users);       if(this.data.isAdmin) {         app.api.lottery_start(type, users).then(x=&gt;{           if(!x.length) {             return wx.showModal({ content: '当前已无符合条件的中奖候选名单，请稍后再试' });           }           wx.showToast({ title: '抽奖成功' });           this.setData({ activeTab: 0 });           this.socket.emit('lotteryStart', type);           this.lottery_result_summary();         }).catch(e=&gt;{           wx.showModal({ title: '抽奖失败: '+e, showCancel: false });         });       }     });     socket.on('setScore', score =&gt; {       const liveIndex = this.data.swiperList.findIndex(x=&gt;x.id == this.data.liveId);       if(this.data.swiperList[liveIndex]) {         this.setData({ [`swiperList[${liveIndex}].score`]: score });       }       console.log('setScore', score)     });     socket.on('lotteryStart', type =&gt; {       console.log('lotteryStart', type)       if(this.data.lotteryStatus == 1) {         app.api.lottery_result(type).then(lotteryResult=&gt;{           this.setData({ lotteryStatus: 2, lotteryResult, time2: 10 });           this.countdown();         });       }     });     socket.on('setliveStep', step =&gt; {       console.log('setliveStep', step)     });     socket.on('error', e =&gt; {       console.error('socket error', e);       wx.showToast({ title: '连接弹幕服务失败', icon: 'none' });       this.setData({ socketError: e + '' });     })     this.socket = socket;     this.setData({ liveTipTime: '' });   },</pre><div class="contentsignin">ログイン後にコピー</div></div> <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/editerView/markdown_views-d7a94ec6ab.css" rel="stylesheet"> <link href="https://csdnimg.cn/release/blogv2/dist/mdeditor/css/style-ba784fbaf8.css" rel="stylesheet"> <blockquote><p>想了解更多编程学习，敬请关注<a href="https://www.php.cn/" target="_blank">php培训</a>栏目！<br></p></blockquote>

以上がWeChat アプレット開発の問題の概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。