WeChat ミニ プログラム 0.11.122100 バージョン アップデート詳細のご紹介

0.11.122100アップデートの概要

• 4つの新しいAPI、2つの新しいコンポーネントを追加

• 10のコンポーネントプロパティを拡張し、6つのコンポーネントイベントを追加

• 数十のAPIとコンポーネントのバグを修正し、いくつかのインタラクティブエクスペリエンスを最適化

• 開発者ツールは新しいAPIとコンポーネントのデバッグサポートを追加します

• 開発者ツールはWeChat支払いのデバッグサポートを追加します
  

詳細な更新ログは次のとおりです:


基本ライブラリの更新

• A新しい API wx.switchTab の詳細

• 新しい API wx.scanCode

• 新しい API wx.createMapContext

• 新しい API wx.createCanvasContext

• 新しい API wx.showToast 呼び出しパラメータ マスク

• 共有コンテンツをカスタマイズするための新しいページメソッド Page.onShareAppMessage

• A 新しいフレームワークメソッド App.onError

• A 新しいページ設定 disabelScroll

• A コンポーネントを追加しました

• A カスタマーサービスセッションボタンを表示するために使用される コンポーネントを追加しました

• A コンポーネント属性 openType を追加しました

• A を追加しました;checkbox/> コンポーネント属性 color

• A 追加 コンポーネント属性 カーソル間隔

• A textarea/> コンポーネント属性のカーソル間隔

• A コンポーネント属性を追加

• A コンポーネント属性 hover-class を追加

• -view/> コンポーネント属性scroll-x、scroll-yの動的変更のサポート

• A コンポーネントイベントbindtapbindmarktapbindcontrolstapbindregionchangeを追加しました

• A 新しいコンポーネントイベントbindconfirm

A 新しい コンポーネント イベント bindingtimeupdate

• A 新しい コンポーネント イベント bindingconfirm

• A コンポーネントイベントbindlongtapを追加しました

• A AudioContext.setSrc( ) Context APIを追加しました

• A New CanvasContext context

• A New CanvasContext.arc() Context API

• A New CanvasContext.fillRect() コンテキスト API

• A 新しい CanvasContext.drawingRect () コンテキスト API

• A CanvasContext.createLinearGradient() コンテキスト API を追加しました

• A CanvasContext.createCircularGradient() コンテキスト API を追加しました

• A スクロールを表現するための コンポーネントを追加しました

• U API wx.getSystemInfo を更新するときのページのスクロールを禁止します プラットフォームの戻りパラメータを追加します

• U API を更新するとき wx.downloadFileコードが 200 または 304 の場合、tmpFilePath が返されます

• U API wx.showModal を更新すると、パラメータconfirmText cancelText の単語制限が呼び出されます

• U WXML データセットを更新すると、サポート オブジェクトと配列が返されます

• U update コンポーネント属性モードのオプションの幅を修正

• U 更新 コンポーネント属性範囲が ObjectArray タイプのサポートを追加

• U 更新 lt;radio/>デフォルトのスタイル

• U CanvasContext.save() を更新 CanvasContext.restore () Context API ブラシ スタイルを保存

• U CanvasContext.arc() を更新 Context API パラメータ調整、eAngle の追加、反時計回り、スイープ角度の削除

• U を最適化します

• U で を最適化します

• U を最適化します; コンポーネントのクリック体験

• F Android で wx.request メソッドが大文字の値しか使用できない問題を修正

• F iOS で wx.uploadFile がヘッダーを設定できない問題を修正

• F iOSでwx.getLocation type=gcj02が有効にならない問題を修正

• F アプレット終了後もwx.showToastが表示されたままになる問題を修正

• F 問題を修正wx.showModal の戻りパラメータが Android と iOS で一致しない

• F wx.showModal の内容が長すぎる場合や、タイトルが空の場合にレイアウトが乱れる問題を修正しました。 showModal cancelTextとconfirmTextが空でデフォルト値が表示されない

F wx.showModal中にキーボードがポップアップして閉じられない問題
F wx.getImageInfoがhttpを取得できない問題を修正しました。 Android で画像をリンクする

• F タブバーの表示により画面の高さが不一致になる wx.getSystemInfo の問題を修正しました

• F Android でダウンロード後に wx.downloadFile が画像を表示できない問題を修正しました

• F wx.request が応答しない問題を修正しましたリクエストに対してデータが正しくエンコードされる問題を修正

• F iOSのApp.onLaunchでwx.loginにコールバックがない問題を修正

• F wx.createAnimationContextがtransformOrigin例外を設定しアニメーションが続行できない問題を修正次のステップへ

• F wx.navigateTo wx.redirectTo iOSでPage.onLoadが呼び出せない問題を修正

• F catchブロックイベントのデフォルト動作が無効である問題を修正

• F iOS での setInterval パラメータの受け渡しエラーによりページがフリーズする問題を修正

• F onReachBottom が複数回トリガーされる問題を修正

• F テキストノードの子孫があるときにエラーが発生する問題を修正

• F の問題を修正しました ラベルが有効にならない

• F スプラッシュ画面の上部または下部にスライドする問題を修正します

• F iOS で イベントが有効にならない問題

• F iOS で
• F text/> の埋め込みはクラスとスタイルを動的に更新しません

• F が無効になっている問題を修正しました

• F の無効なフォーカス属性の問題を修正しました

• F 初期値が未定義の場合に が異常に表示される問題を修正します

• F プレースホルダーのゴースト問題を修正します

• F ; フォーカス前後の色が異常になる問題を修正

• F の位置が異常になる問題を修正

• F ピッカーを開いた後に動作しない ブラーイベントをトリガーする問題を修正 <textarea> で自動高さを設定する際の高さ変更の問題を修正 の破棄例外の問題を修正; ビデオ/> を有効にするには Android の全画面ボタンを 2 回クリックする必要がある問題を修正

; 複数のページで同じ ID を使用すると競合する問題を修正しました
• F drawImage が正常に表示できない問題を修正

• F bindingload イベントの setData が無限ループを引き起こす問題を修正

• F ビューへのスクロールの失敗 問題

• F
  submit が入力コンテンツを取得できない問題を修正しました

• D リダイレクト属性は間もなく削除されます

• D wx.createContext インターフェースは間もなく削除されます

• D 属性はすぐに削除されます。focus 属性を直接使用してください

• D

• 開発者ツール 基本機能
A wx.switchTab のデバッグサポートを追加しました
A wx.startRecord wx.stopRecord wx.playVoice wx.pauseVoice wx を追加しました。 stopVoice API デバッグ サポート
A WeChat 支払いのデバッグ サポートを追加
A QR コード スキャン デバッグ サポートを追加

• 
  

  A app.json を追加 ページ ファイルの重複定義は送信プレビュー エラーのヒントにつながる

Aシミュレータに画像をロードする際のネットワークエラーを追加 プロンプト情報

• A コンパイル時に初期化ページとパラメータを設定する機能を追加

• A プレビューを送信する際に初期化ページとパラメータを設定する機能を追加

• F データを別のページで表示するように appdata パネルを最適化し、動的な更新とコード モード表示をサポートします

• F 音楽が再生されていないときに wx.getBackgroundAudioPlayerState が返らない問題を修正します

• F wx の問題を修正します.getBackgroundAudioPlayerState がステータスを正しく取得しない

• F wxml パネルのいくつかの状況を修正する ホワイトスクリーンの問題を修正する

• F wxml パネルの属性をコピーできず、コピーにキャリッジリターンがある問題を修正する

• F wxmlパネルの単一テキストノードの表示が整列していない問題

• F app.jsonを修復 タブバーの位置を上に設定した場合、シミュレータで間違った表示がされる問題

• F 外部ボタンの誤クリック問題を修正devtools と editor のリンク

• F キャッシュが原因で wx.requst がリクエストを送信できない問題を修正しました

更新の詳細は次のとおりです:


wx.switchTab(OBJECT)

tabBar ページにジャンプし、他のすべての非 tabBar ページを閉じます
OBJECT パラメータの説明:
[tr]パラメータ タイプの必須の説明[/tr] ]の後にパラメータを置くことはできません。 successfailcomplete サンプルコード:{ "tabBar": { "list": [{ "pagePath": "index", "text": "Homepage" },{ "pagePath": "other", " text": "Other" }] }}wx.switchTab({ url: '/index'})

url	String	は、ジャンプする必要があるtabBarページへのパスです(ページはapp.jsonのフィールドで定義する必要があります)。パス
Function	No	成功したインターフェース呼び出しのコールバック関数
Function	No	失敗したインターフェース呼び出しのコールバック関数
Function	No	のコールバック関数インターフェイス呼び出しの終了 (成功または失敗した呼び出し) が実行されます)

wx.scanCode(OBJECT)

呼び出しクライアント コード スキャン インターフェイスを呼び出し、コードが正常にスキャンされた後に対応するコードを返します。
オブジェクト パラメーターの説明の結果:
[tr]パラメーターの種類に必要な説明[/tr]

successfailcomplete 成功の戻りパラメータの説明: [tr]パラメータの説明[/tr]

Function	No	インターフェイスはコールバック関数を正常に呼び出します。戻り内容の詳細については、戻りパラメータの説明を参照してください。
Function	No	失敗したインターフェース呼び出しのコールバック関数
Function	No	インターフェース呼び出しの終了時のコールバック関数(呼び出しが失敗した場合に実行されます)成功または失敗)

結果サンプルコード: wx.scanCode({ success: (res ) => { console.log (res) }})

コードの内容

onShareAppMessage

Page に onShareAppMessage 関数を定義して、ページの共有情報を設定します。

このイベントハンドラーが定義されている場合のみ、右上隅のメニューに「共有」ボタンが表示されます
ユーザーが共有ボタンをクリックすると呼び出されます
このイベントには次のものが必要ですカスタマイズ用のオブジェクトを返す

• 
  

  カスタム共有フィールド
[tr]フィールドの説明のデフォルト値[/tr]

titledescパスで始まるフルパスである必要があります サンプルコード: Page({ onShareAppMessage: function () { return { title : 'カスタム共有タイトル'、説明: 'カスタム共有説明'、パス: '/page/user?id=123' } }})

タイトルを共有	現在のアプレット名
説明	現在のアプレット プログラム名
共有パス	現在のページのパス、/

wx.showToast(OBJECT)

メッセージプロンプトボックスを表示
OBJECTパラメータの説明:
[tr]パラメータ タイプの必須説明[/tr]

titleicondurationmasksuccessfailサンプルコード: wx.showToast({ title: 'success', icon: 'success'、duration: complete 2000})

String	は、	プロンプト
String	No	アイコンのみの内容です「成功」、「読み込み中」をサポート
Number	No	遅延時間（ミリ秒）、デフォルト: 1500、最大10000
Boolean	No	透明を表示するかどうかマスク、タッチ侵入の防止、デフォルト: false
Function	No	成功したインターフェース呼び出しのコールバック関数
Function	No	失敗したインターフェース呼び出しのコールバック関数
関数	いいえ	インターフェース呼び出し終了時のコールバック関数（呼び出しが成功または失敗した場合に実行されます）

onShareAppMessage

Page で onShareAppMessage 関数を定義して、ページの共有情報を設定します。

このイベントハンドラーが定義されている場合のみ、右上隅のメニューに「共有」ボタンが表示されます
ユーザーが共有ボタンをクリックすると呼び出されます
このイベントには次のものが必要ですカスタマイズ用のオブジェクトを返す

• 
  

  カスタム共有フィールド
[tr]フィールドの説明のデフォルト値[/tr]

titledescパスで始まるフルパスである必要がありますサンプルコード:
Page({ onShareAppMessage: function () { return { title: 'カスタマイズされた共有のタイトル', desc: 'カスタマイズされた共有の説明', パス: '/page/user?id=123' } }})




wx.createCanvasContext(canvasId)

定義

キャンバス描画コンテキストを作成します(canvasIdを指定します)
ヒント: この描画コンテキストは、対応する



パラメータにのみ作用します。
[tr]パラメータの型の説明[/tr]

タイトルを共有	現在のアプレット名
説明	現在のアプレット プログラム名
共有パス	現在のページのパスは、/

canvasIdStringキャンバス表現、で定義されたcanvas-idを渡します

新しいコンポーネント:


audioContext

audioContext は、audioId を通じて コンポーネントにバインドされており、これを通じて対応する コンポーネントを操作できます。
AudioContextオブジェクトのメソッドリスト:
[tr]メソッドパラメータの説明[/tr]
setSrcsrcオーディオアドレスplayNonePlaypause なし Pauseseekposition指定された位置、単位sにジャンプサンプルコード: 再生現在の再生時間を 14 秒に設定します戻る 最初に戻る// audio.jsPage({ onReady: function (e) { // wx.createAudioContext を使用してオーディオ コンテキスト コンテキストを取得します this.audioCtx = wx.createAudioContext('myAudio') this.audioCtx.setSrc(' http ://ws.stream.qqmusic.qq.com/M500001VfvsJ21xFqb.mp3?guid=ffffffff82def4af4b12b3cd9337d5e7&uin=346897220&vkey=6292F51E1E384E06DCBDC9AB7C49FD713D632D313AC 4 858BACB8DDD29067D3C601481D36E62053BF8DFEAF74C0A5CCFADD6471160CAF3E6A&fromtag=46') this.audioCtx.play() }、データ: { src: '' }、audioPlay: 関数() { this.audioCtx.play() }、audioPause: function () { this.audioCtx.pause() }、audio14: function () { this.audioCtx.seek(14) }、audioStart: function () { this .audioCtx.seek(0) }})



picker-view

埋め込みページスクロールセレクター
[tr]属性名型デフォルト値説明[/tr]
value数値配列配列内の数値は、ピッカー ビュー内のピッカー ビュー列の選択された項目を順番に表します (添字は 0 から始まります)。数値がピッカー ビュー列オプションの長さより大きい場合、最後の項目が選択されています。 indicator-styleStringセレクターの中央にある選択したボックスのスタイルを設定しますbindchangeEventHandle変更イベントをトリガーします値が変化するときスクロール、event.detail = {value: value}; value は、picker-view の picker-view-column のどの項目が現在選択されているかを示す配列です (添え字は 0 から始まります)注: コンポーネントのみを配置でき、他のノードは表示されません。


picker-view-column

はにのみ配置でき、その子ノードの高さはピッカービューの選択ボックスの高さと一致するように自動的に設定されます
サンプルコード:
{{年}}年{{月}}日ビュー> "幅: 100 %; 高さ: 300px;" value="{{value}}" bindingchange="bindChange"{{item}}年{{item}}月 {{item}}date const date = 新しい日付( )const years = []const months = []const days = []for (let i = 1990; i Canvas の強化

• A CanvasContext コンテキストを追加

• A CanvasContext.arc() コンテキスト API を追加

• A CanvasContext.fillRect() コンテキスト API を追加

• 新しいコンテキスト API

• 新しいコンテキスト API

• 新しいコンテキスト API
  

createCircularGradient

定義

円形のグラデーション カラーを作成します。
ヒント: 開始点は円の中心にあり、終了点はリングにあります。
ヒント: 少なくとも 2 つのグラデーション ポイントを指定するには、addColorStop() を使用する必要があります。



Parameter

[tr]パラメータの型定義[/tr]

x	Number	x円の中心の座標
y	Number	y中心の座標円の
r	数値	円の半径

例

const ctx = wx.createCanvasContext('myCanvas')// 円形の勾配を作成しますconst grd = ctx.createCirc ularGradient(75, 50, 50)grd.addColorStop ( 0, 'red')grd.addColorStop(1, 'white')// gradientctx.setFillStyle(grd)ctx.fillRect(10, 10, 150, 80)ctx.draw( )




createLinearGradient

定義

線形グラデーション カラーを作成します。
ヒント: 少なくとも 2 つのグラデーション ポイントを指定するには、addColorStop() を使用する必要があります。



パラメータ

[tr]パラメータの型定義[/tr]x0数値始点のx座標y0数値始点のy座標x1 数値終点のx座標y1数値終点のy座標

例

const ctx = wx.createCanvasContext('myCanvas ')/ /線形グラデーションconstを作成します grd = ctx.createLinearGradient(0, 0, 200, 0)grd.addColorStop(0, 'red')grd.addColorStop(1, 'white')// gradientctx.setFillStyle(grd)で塗りつぶします)ctx.fillRect(10, 10 , 150, 80)ctx.draw()

ストロークRect

定義

長方形（塗りつぶされていない）を描画します。
ヒント: setFillStroke() を使用して長方形の線の色を設定します。設定されていない場合、デフォルトは黒です。



Parameter

[tr]パラメータタイプ範囲説明[/tr]
xNumberx 長方形パスの左上隅の座標yNumber 長方形のパスの左上隅のY座標幅数値長方形のパスの幅高さ数値長方形のパスの高さ


例

const ctx = wx.createCanvasContext('myCanvas')ctx.setStrokeStyle('red')ctx.strokeRect(10, 10, 150, 75)ctx.draw()


fillRect

定義

長方形を塗りつぶします。
ヒント: setFillStyle() を使用して、四角形の塗りつぶしの色を設定します。設定されていない場合、デフォルトは黒です。



Parameter

[tr]パラメータタイプの説明[/tr]

x	Number	x 長方形パスの左上隅の座標
y	Number	y長方形パスの左上隅 座標
幅	数値	長方形パスの幅
高さ	数値	長方形パスの高さ

例

const ctx = wx.createCanvasContext('myCanvas') ctx.setFillStyle('red')ctx.fillRect(10, 10, 150, 75)ctx.draw()




arc

Definition

Draw弧。
ヒント: 円を作成するには、arc() メソッドを使用して、実際のラジアンが 0 で、終了ラジアンが 2 * Math.PI であることを指定できます。
ヒント: キャンバスに円弧を描くには、ストローク() メソッドまたは fill() メソッドを使用します。



パラメータ

[tr]パラメータタイプの説明[/tr]xNumberx円の座標yNumbery円の座標r sAngleeAngle反時計回り

数値	円の半径
数値	開始円弧、単位ラジアン(3時位置)
数値	終了円弧
ブール値	オプション。ラジアンの方向が反時計回りか時計回りかを指定します。デフォルトは false (時計回り) です。

例

const ctx = wx.createCanvasContext('myCanvas')// 座標を描画ctx.arc(100, 75, 50, 0, 2 * Math.PI)ctx.setFillStyle('#EEEEEE' )ctx.fill()ctx.beginPath()ctx.moveTo(40, 75)ctx.lineTo(160, 75)ctx.moveTo(100, 15)ctx.lineTo(100, 135)ctx.setStrokeStyle('#AAAAAA ')ctx.ストローク()ctx.setFontSize(12)ctx.setFillStyle('black')ctx.fillText('0', 165, 78)ctx.fillText('0.5*PI', 83, 145)ctx.fillText ('1*PI', 15, 78)ctx.fillText('1.5*PI', 83, 10)// 点を描画ctx.beginPath()ctx.arc(100, 75, 2, 0, 2 * Math.PI )ctx.setFillStyle('lightgreen')ctx.fill()ctx.beginPath()ctx.arc(100, 25, 2, 0, 2 * Math.PI)ctx.setFillStyle('blue')ctx.fill() ctx.beginPath()ctx.arc(150, 75, 2, 0, 2 * Math.PI)ctx.setFillStyle('red')ctx.fill()// arcctx.beginPath()ctx.arc(100, 75, 50, 0, 1.5 * Math.PI)ctx.setStrokeStyle('#333333')ctx.stroke()ctx.draw()
arc(100, 75, 50, 0, 1.5 * Math.PI) 3 つの主要な座標は次のとおりです:


緑: 円の中心 (100, 75)

• 赤: 開始円弧 (0)

• 青: 終了円弧 (1.5 * Math.PI)

• 
  

Canvas 上の描画

内のすべての描画は JavaScript で行う必要があります:
WXML: (特別な宣言がない限り、この WXML を次の例のテンプレートとして使用します。繰り返しはありません) )
JS: (次の例では onLoad に JS を置きます)
const ctx = wx. ctx.setFillStyle('red')ctx.fillRect(10, 10, 150, 75)ctx.draw()


ステップ 1: Canvas 描画コンテキストを作成する

まず、Canvas 描画コンテキスト CanvasContext を作成する必要があります。
CanvasContext はミニ プログラムに組み込まれたオブジェクトであり、いくつかの描画メソッドがあります:
const ctx = wx.createCanvasContext('myCanvas')


ステップ 2: 描画の説明に Canvas 描画コンテキストを使用します

次に、何を行うかを説明しましょうCanvas に描画します。
描画コンテキストの塗りつぶしの色を赤に設定します:
ctx.setFillStyle('red') fillRect(x, y, width, height) メソッドを使用して長方形を描画し、設定したばかりの赤で塗りつぶします:
ctx。 fillRect(10, 10 , 150, 75)


ステップ 3: Draw

今説明を描画することを コンポーネントに伝えます:
ctx.draw()

以上がWeChat ミニ プログラム 0.11.122100 バージョン アップデート詳細のご紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。