WeChat ミニプログラムの録画の落とし穴 (開発)

TodayWeChat ミニ プログラム開発チュートリアル 列には、全員が参加できる WeChat ミニ プログラムの落とし穴が記録されています。

最近、会社の最初の小規模プログラムの開発に参加しました。開発経験は基本的に Webview に基づくハイブリッド開発に似ています。公式の強力な API を呼び出すことができます。 , しかし、落とし穴や慣れない場所もあります。この記事では、実用性の観点から開発プロセス中に発生したいくつかの問題を記録します:

1. 混乱を招くスタイルの優先順位

ボタン コンポーネントを使用する場合、クラスで幅を設定する必要がないことがわかりました。以下のコードを貼り付けてください:

.my-button{  width: 140rpx;  height: 60rpx;  line-height: 60rpx;  padding: 0;
}复制代码

WeChat デバッグ ツールで調査した結果、ユーザー エージェントのスタイル優先度は、実際には自分たちで作成したスタイル クラスよりも大きいことがわかりました。これは基本的には発生しません。ブラウザ

解決策は実際には比較的簡単で、サフィックス ! important または style="width:140rpx" を追加するだけです。修正後 もう一度効果を見てみましょう:

! important を追加した後、幅の実際の効果はすでに予想通りの結果になっていますが、WeChat デバッグ ツールでは依然としてユーザー エージェント スタイルが優先されることが示されており、これはデバッグ ツールのバグと見なす必要があります。

2. 通常の UI コンポーネントのカプセル化、パラメータ定義は面倒です

一般に、ボタンなどの UI ビジュアル ドラフトの基本コンポーネントには、背景色やフォントなどの特定のスタイルがあります。ミニ プログラムの Component 関数を使用して、それをコンポーネントにカプセル化し、デフォルトのスタイルを記述し、外部からの受信クラスを受け取ることで、その後の開発を容易にすることができます。

React には <tag></tag>この書き方、つまりコンポーネントは props を処理せずに受け取り、渡すだけです。しかし、ミニプログラムはこの書き方をサポートしていません（検索しても無駄で、公式ドキュメントにも説明がありません）。

これは、プロパティの button コンポーネントでサポートされているすべてのパラメータをリストする必要があることを意味します:

properties: {
    classes: {
      type: String,
      value: '',
    },
    type: {
      type: String,
      value: 'default',
    },
    plain: {
      type: Boolean,
      value: false,
    },
    size: {
      type: String,
      value: 'default',
    },
    ......
  },复制代码

3. グローバル スタイル セレクター*Disabled

*{
  box-sizing: border-box;
}复制代码

アプレットがこのタイプのセレクターを無効にしているため、上記のコードはコンパイル時にエラーを報告します。特定の理由についての大胆な推測: 比較的広いスコープを持つこのタイプのセレクターは、カスタム コンポーネントのスタイル分離と競合しますか? ?

それでは、ミニ プログラムにグローバルなユニバーサル スタイルを追加するにはどうすればよいでしょうか?使用するすべてのタグを手動で記述することしかできないようです。幸いなことに、インターネット上には、投稿できる既製のコードがあります:

view,scroll-view,swiper,swiper-item,movable-area,movable-view,cover-view,cover-image,icon,text,rich-text,progress,button,checkbox-group,checkbox,form,input,label,picker,picker-view,radio-group,radio,slider,switch,textarea,navigator,functional-page-navigator,image,video,camera,live-player,live-pusher,map,canvas,open-data,web-view,ad{  box-sizing: border-box;
}复制代码

4. カスタム コンポーネント、bind:tap を 2 回呼び出します

ボタンなどの基本コンポーネントをカプセル化する場合、次の記述は避けてください:

onTap(e) {  if (!this.data.disabled && !this.data.loading) {    this.triggerEvent('tap', e.detail)
  }
},复制代码

<button></button>复制代码

この方法でカプセル化されたコンポーネントは 2 つのタップ イベントをトリガーします。1 つはアプレット自体によってトリガーされ、もう 1 つはtriggerEvent によってトリガーされます。

クリックなど、ミニ プログラムに組み込まれていないイベント タイプを変更できます:

onTap(e) {  if (!this.data.disabled && !this.data.loading) {    this.triggerEvent('click', e.detail)
  }
},复制代码

タップ イベントのバブリングを防ぐことも解決できます:

<button></button>复制代码

5 . wxml で Boolean を使用します () 型変換を行います

たとえば、コンポーネントで String 型パラメータを監視します。空でない場合はテキスト ラベルが表示され、それ以外の場合は表示されません:

// player.wxml<text>{{ leftText }}</text>复制代码

// index.wxml<player></player>复制代码

この書き方leftText フィールドは当然渡されていますが、テキストタグが表示されないままです 書き方変更後:

// player.wxml<text>{{ leftText }}</text>复制代码

これは正しいですそして私たちの期待に応えます。

すごいですよね？

6. InnerAudioContext が Seek メソッドを呼び出した後、onTimeUpdate コールバックは無効になります。

InnerAudioContext はオーディオの再生に使用されます。これに onTimeUpdate を渡します。現在の再生の進行状況を取得するコールバック。

ただし、再生のために指定された位置にジャンプするために seek メソッドが呼び出されるとき、onTimeUpdate は呼び出されなくなります。

実際、ミニ プログラム コミュニティの多くの人がこの問題について言及しています。約 1 年半かかりましたが、WeChat チームはまだ修正していません。修正するには、一時的に妥協する方法しか使用できません。解決策は実際には非常に簡単です。 :

progressOnChange(e) {  if (this.properties.src && this.data.innerAudioContext) {    const innerAudioContext = this.data.innerAudioContext;
    innerAudioContext.pause();
    innerAudioContext.seek(innerAudioContext.duration * e.detail.value / 100);    setTimeout(() => {
      innerAudioContext.play();
    }, 500);
  }
},复制代码

まず再生を一時停止し、次に seek メソッドを実行し、約 500 ミリ秒の遅延を設定して play# を呼び出します。 ＃＃ 方法。

7. InnerAudioContext による持続時間の取得のタイミングの問題

オーディオが再生される前に持続時間を取得したかったのですが、それは不可能です。## の呼び出しに関するオンライン情報がいくつかあります。 #onPlay

、onCanplay のステートメントはあまり信頼できません。解決策の 1 つは次のとおりです: <pre class="brush:php;toolbar:false">innerAudioContext.onCanplay(() =&gt; {  setTimeout(() =&gt; {    this.setData({      durationStr: secondToTimeStr(innerAudioContext.duration) || '--:--',     });   }, 500); });复制代码</pre>

setTimeout

が適切なミリ秒数は言うまでもありません。設定しても実機では無効です。 したがって、私は今でも

onTimeUpdate

:<pre class="brush:php;toolbar:false">innerAudioContext.onTimeUpdate(() =&gt; {  this.setData({    durationStr: secondToTimeStr(innerAudioContext.duration) || '--:--'   }) });复制代码</pre> を使用しています。

onTimeUpdate

を毎回計算するのはパフォーマンスに非常に負荷がかかると思われる場合は、次のようにすることができます。実装は 1 回だけカウントされます。 <h3 id="设置页面背景色">8. 设置页面背景色</h3> <p>当前页面的json文件中有个backgroundColor字段，但是设置后无效，后面发现这个字段表示的不是可见区域的背景色，而是页面下拉时窗口的背景色。</p> <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/529/532/783/1603097603322059.png?x-oss-process=image/resize,p_40" class="lazy" title="1603097603322059.png" alt="WeChat ミニプログラムの録画の落とし穴 (開発)"></p> <p>如果需要设置页面背景色，可以通过page标签的样式设置：</p> <pre class="brush:php;toolbar:false">page{  background: #f9fafb; }复制代码</pre> <p>待更新...</p> <blockquote><p><strong>相关免费学习推荐：</strong><a href="https://www.php.cn/xiaochengxu.html" target="_blank"><strong>微信小程序开发教程</strong></a></p></blockquote>

以上がWeChat ミニプログラムの録画の落とし穴 (開発)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。