wechat mini program wiki
1.0.0
中国のトップメッセージングアプリWeChatは、ミニプログラムというかなり過激なものを展開した。ダウンロードやインストールを必要としない組み込みアプリ。開いて、使用して、共有して、完了です。
これらのアプリがどれほど実用的であるかについては、大きな議論があり、多くのクリックベイトがあります...実際、開発者に提供されるフレームワークは初期段階にすぎず、まだ制限があり、正直言って少しイライラします。それにもかかわらず、テンセントはこのチャネルの導入に前例のないリソースを投資し、勢いを高め、先行者に機会を与えています。私たちは、これらのハッカーが勇気を持って試してみれば、すぐに成功する可能性があると信じています。
できるだけ早く WeChat に導入したいサービスのアイデアはありますか? JavaScript の基本的な知識があり、このフレームワークを試してみたいですか?ドキュメントの Google 翻訳で迷った場合は、何が可能か不可能かを解読するために少し強化する必要がありますか?こんにちは、ようこそ。
公式ドキュメントを参照して自分の方法を見つけるのは簡単ではありません。実際、何かを成し遂げるには多くの試行錯誤、オープンソース コードの調査、そして多くの仮定が必要です。あなたは壁に頭をぶつけてきました。わかりました。
私たちの使命は、創造的な起業家が優れたテクノロジー製品を構築できるよう支援することです。小さな一歩を踏み出すお手伝いをさせていただきます。
以下の内容はドキュメントの翻訳ではないため、すぐに古くなります。これは、誰でも簡単に始められ、クールな WeChat ミニプログラムを迅速に構築できるよう支援するという私たちの貢献にすぎません。今すぐやってください。
ミニプログラムに取り組んでいますか？あなたの作品を共有したい場合、私たちのスタッフに会いたい場合、助けを求めたい場合は、ぜひ私たちにご連絡ください。
貢献したい場合は、ここにプル リクエストを送信するか、shanghai(at)lewagon.com で提案を求めてください。
このオリジナル作品は、ル ワゴンの卒業生であるエイドリアン ペレグリ (バッチ #30) によって、ティボー ジェナイテイ (ドライバー チャイナ) とステファン デルガド (バッチ #61) のサポートを受けて書かれたものです。
登録プロセスは、特に素晴らしい中国の行政界についての経験がない場合、非常に困難です。 WeChat の認証プロセスには時間がかかります。落ち着いてください。
WeChat ミニプログラムの登録から開発リリースまで、基本的に次の手順を実行する必要があります。
ミニプログラムを企業として登録するために必要な資料のリストは次のとおりです。
ミニプログラム プロジェクトの登録方法と作成方法については、この包括的な英語マニュアルに従うことをお勧めします: Medium 記事、またはこの公式 WeChat ドキュメント (最終更新日: 08/02/2017) を確認してください。
IDE (統合開発環境) は、アプリケーションを作成するためのプログラミング ツールのセットです。これは、コード エディター、コンパイラー、デバッガーで構成されており、単一のグラフィカル ユーザー インターフェイスからアクセスできます。
ここから WeChat IDE をダウンロードします: Mac、Windows 64、Windows 32
ここでは、WeChat IDE をマスターして最大限に活用するための簡単なチュートリアルを示します。
コード エディターの横にファイルのツリーが表示され、左側にシミュレーターがあり、アプリのプレビューが表示されます。 
開発中にタスクを実行するためのボタンの完全なリストを次に示します。
1. プロファイル:プロファイルをクリックして IDE からログアウトします。 2. コード編集3. デバッグ/検査:以下を参照してください。 4. プロジェクト情報:以下を参照してください。 5. コンパイラー:ビューの自動更新が機能しない場合にアプリをコンパイルするのに役立ちます。 
6. シーン値7. キャッシュ8. シャットダウン:作業中のプロジェクトを終了し、別のプロジェクトに進みます。 9. シミュレーターを非表示にします。 10. デバイス:ミニプログラムの応答性をテストするためのデバイスのリストが表示されます。 11. Wi-Fi、4G、3G、2G で作業できます。 12. 樹木を非表示にする13. ファイルを管理する:フォルダーまたはファイルを検索、追加、削除します。
デバッガー/インスペクター:このツールは IDE の重要な部分であり、古き良きChrome DevToolsに似ています。
1. 上部バーネットワーク:このパネルは、リクエストとソケットの問題、またはページ読み込みパフォーマンスをデバッグするためのものです。ストレージ:キャッシュ内のすべてのデータにアクセスできます。 AppData:現在のプロジェクト データを表示するために使用されます。パネル内のデータを直接編集してプレビューすることができます。 Wxml:ページのすべての要素をその場で検査および編集できます。センサー:モバイル デバイスの位置とパフォーマンスをシミュレートして、重力検知をデバッグできます。
2. [ソース] パネル[ソース] パネルには、現在のプロジェクト スクリプト ファイルが表示されます。
3. コンソール コンソールは、診断情報をログに記録することでコードにどのようなエラーがあるかを知らせ、配置したconsole.log()などとしてページ内の JavaScript と対話します。
プロジェクト情報:このページには、AppID、ディレクトリ情報などの現在のプロジェクトの詳細が表示されます。プレビュー オプションをクリックすると、QR コードをスキャンした後、携帯電話でミニプログラムを直接テストできます。
注:携帯電話でミニプログラムをテストしているときに、デバイスでデバッガー ツールを直接有効にすることができます。
このセクションでは、 WeChat が提供する「クイックスタート」の構造 (定型文) と、このフレームワークに準拠するために必要な基本事項を紹介します。
WeChat クイックスタート.zip をダウンロードします。
クイックスタート樹木:
。
§── app.js
§── app.json
§── app.wxss
§──ページ
│ §──インデックス
│ │ §──index.js
│ │ §──index.json
│ │ §──index.wxml
│ │ └──index.wxss
│ └──ログ
│ §── logs.js
│ §── logs.json
│ §── logs.wxml
│ └── logs.wxss
└──ユーティリティ
━── util.js
このボイラープレートのインデックス ページには、現在のユーザー プロファイルの情報を含むウェルカム ページが表示されます。アバターをクリックすると、現在のミニプログラム ログを表示する新しいページにリダイレクトされます。
WeChat ミニプログラムは「アプリ」ファイルから始まります (下のスクリーンショットを参照)。これらのファイルはミニプログラムのルート ディレクトリであり、したがってミニプログラムの入り口となります。 (こちらは WeChat の公式ドキュメントです)。
app.js はスクリプト コードであり、ミニプログラムのグローバル ロジックです。 MP のライフサイクル関数を設定および操作したり、グローバル変数を宣言したり、API を呼び出したりすることができます。
Code snippet of the "app.js" file.
// app.js
App ( {
onLaunch : function ( ) {
// API call to get data from the local cache
var logs = wx . getStorageSync ( 'logs' ) || [ ]
logs . unshift ( Date . now ( ) )
wx . setStorageSync ( 'logs' , logs )
} ,
// Get user information
getUserInfo : function ( cb ) {
var that = this
if ( this . globalData . userInfo ) {
typeof cb == "function" && cb ( this . globalData . userInfo )
} else {
// Call login interface
wx . login ( {
success : function ( ) {
wx . getUserInfo ( {
success : function ( res ) {
that . globalData . userInfo = res . userInfo
typeof cb == "function" && cb ( that . globalData . userInfo )
}
} )
}
} )
}
} ,
// Global variable
globalData : {
userInfo : null
}
} )app.json は、ミニプログラム全体のグローバル構成です。 MP (ミニプログラム) ページのパス、MP ウィンドウ スタイルを構成し、ネットワーク タイムアウトを設定し、構成をデバッグできます。
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/logs/logs"
] ,
"window" : {
"backgroundTextStyle" : "gray" ,
"navigationBarBackgroundColor" : "#fff" ,
"navigationBarTitleText" : "Hello World" ,
"navigationBarTextStyle" : "black"
}
}注: app.jsonファイルではコメントは許可されません。
app.wxss は、ミニプログラムのグローバル スタイル シートです。ここで共通のスタイルルールを宣言する必要があります。
WeChat クイックスタートの2 ページは次のとおりです。
Pagesフォルダーは、ミニプログラム ページを保存または作成する場所です。作成する各ページには、次の 2 つのファイルを含める必要があります。
作成する各ページにさらに 2 つのファイルを追加できます。
ページ構成用の.jsonファイル。
インターフェイスのスタイル シートの.wxssファイル。
ルール:ミニプログラムの各ページは 4 つの異なるファイル拡張子 (js ; json ; wxml ; wxss) で構成できますが、名前は同じである必要があります。
詳細:新しいページには常に.jsファイルと少なくとも.wxmlファイルが含まれます。 .jsonファイル拡張子は、この特定のページのウィンドウ構成をオーバーライドする場合にのみ使用されます。ページにスタイルシートを追加する場合は、 .wxssを追加します。
クイックスタート プロジェクトの各ページで何が起こるかを見てみましょう。
Code snippet of the "index.js" file.
// index.js
// Get application instance
var app = getApp ( )
Page ( {
data : {
motto : 'Hello World' ,
userInfo : { }
} ,
// Event that redirect user to logs page
Tapped : function ( ) {
console . log ( "tapped" ) ;
wx . navigateTo ( {
url : '../logs/logs'
} )
} ,
onLoad : function ( ) {
console . log ( 'onLoad' )
var that = this
// Call the application instance to get data
app . getUserInfo ( function ( userInfo ) {
// Updates userInfo data
that . setData ( {
userInfo : userInfo
} )
} )
}
} )コメントの抜粋:
Page()関数で呼び出され、ユーザー情報を収集します。Page()関数を登録してdata:データをビューに動的にバインドします。Tapped機能は、現在のユーザーをログ ページにリダイレクトします。onLoad関数はユーザー情報を取得し、 userinfoデータを更新します。 Code snippet of the "logs.js" file.
// logs.js
var util = require ( '../../utils/util.js' )
Page ( {
data : {
logs : [ ]
} ,
onLoad : function ( ) {
console . log ( wx . getStorageSync ( 'logs' ) )
this . setData ( {
logs : ( wx . getStorageSync ( 'logs' ) || [ ] ) . map ( function ( log ) {
return util . formatTime ( new Date ( log ) )
} )
} )
}
} )コメントの抜粋:
formatTime呼び出すためにutil.js が必要です。Page()関数を登録し、 data:を設定します。onLoad関数は、キャッシュwx.getStorageSync('logs')から現在のユーザー ログを取得します。次に、 util.jsの require によって提供されるformatTimeでログをレンダリングします。 Code snippet of the "utils.js" file.
function formatTime ( date ) {
var year = date . getFullYear ( )
var month = date . getMonth ( ) + 1
var day = date . getDate ( )
var hour = date . getHours ( )
var minute = date . getMinutes ( )
var second = date . getSeconds ( )
return [ year , month , day ] . map ( formatNumber ) . join ( '/' ) + ' ' + [ hour , minute , second ] . map ( formatNumber ) . join ( ':' )
}
function formatNumber ( n ) {
n = n . toString ( )
return n [ 1 ] ? n : '0' + n
}
module . exports = {
formatTime : formatTime
}注記：
Utils には、他の場所で必要になる可能性のあるインポートされたライブラリが保存されます (この例では、log.js に util.js が必要です)。上記のコード スニペットでは、ログの日付を適切に表示するために、 util.jsでformatTime関数が定義されています。
ここまでで、各ページに 2 つのレイヤーがあることが分かりました。
論理レイヤー (.js):ビュー レイヤーからトリガーされたイベントを受信しながら、データを処理してビュー レイヤーに送信します。
ビュー レイヤー (.wxml/.wxss):ビュー レイヤーのイベントを論理レイヤーに送信しながら、論理レイヤーによって処理されたデータをビューに表示します。
ミニプログラムのライフサイクルは、アプリケーション サイクルとページ サイクルの 2 つのサイクルに分類できます。 App()ライフサイクルはミニプログラムの開始点と終了点ですが、 Page()ライフサイクルはユーザーがミニプログラムを参照するときにアクティブ化されます。
ミニプログラムの登録にはApp()関数を使用します。 MP のライフサイクル機能を指定するパラメータとしてオブジェクトを受け取ります。
コメント:
onLaunch関数をトリガーするミニプログラムを開き、MP を初期化します。onShow関数がトリガーされます。onHide関数は、現在のユーザーがミニプログラムを終了するとトリガーされます。 Code snippet of the "App()" life cycle functions.
App ( {
onLaunch : function ( ) {
// Do something when launch.
} ,
onShow : function ( ) {
// Do something when show.
} ,
onHide : function ( ) {
// Do something when hide.
} ,
onError : function ( msg ) {
console . log ( msg )
} ,
globalData : 'I am global data'
} ) WeChat フレームワークは、 App()のインスタンスであるgetApp()というグローバル関数を提供します。
Code snippet "getApp()" function.
// .js
var appInstance = getApp ( )
console . log ( appInstance . globalData ) // I am global data getApp()関数は、 Page()関数内でApp()関数を定義できないという単純な理由で便利です。アプリ インスタンスにアクセスするには、 getApp()関数を呼び出す必要があります。
ページの登録にはPage()関数を使用します。ページの初期データ、ライフサイクル関数、イベント ハンドラーなどを指定するオブジェクトをパラメーターとして受け取ります。
コメント:
onLoad関数を呼び出します。onShow関数が呼び出されます。onShow関数はonReady呼び出してビューをレンダリングします。onShow関数はビューを直接レンダリングします。onHide 、ミニプログラムが別のページにジャンプするとトリガーされます。onUnload関数は、 wx.redirectTo()およびwx.navigateBack()を使用してページを終了するときに呼び出されます。または、現在のページが再起動されるときは、 wx.reLaunch 。 Code snippet of "Page()" life cycle functions.
Page ( {
data : {
text : "This is page data."
} ,
onLoad : function ( options ) {
// Do some initializations when page load.
} ,
onReady : function ( ) {
// Do something when page ready.
} ,
onShow : function ( ) {
// Do something when page show.
} ,
onHide : function ( ) {
// Do something when page hide.
} ,
onUnload : function ( ) {
// Do something when page close.
} ,
// Event handler
viewTap : function ( ) {
this . setData ( {
text : 'Set some data.'
} )
}
} )
App()ライフサイクルが完了すると、 onLoad初めて呼び出すことによってページが読み込まれますが、呼び出されるのは 1 回だけです。
ミニプログラムがバックグラウンド (アプリのライフ サイクル) からフォアグラウンド (ページのライフ サイクル) まで実行されているとき、最初にApp() onShow関数を呼び出し、次にフォアグラウンドに切り替えるときにPage() onShow関数を呼び出します。
WeChat の推奨事項:
App()関数は再利用できないため、 app.jsに一度登録する必要があります。getCurrentPages()ページがまだ生成されていない場合は、 onLaunchを呼び出さないでください。getApp()使用すると、 App() のインスタンスを取得できますが、ライフサイクル関数はApp()関数の呼び出しを試みません。 ミニプログラムのセットアップはシンプルで、カスタマイズが必要な場合の時間とストレスを軽減できるように設計されています。
WeChat では、 app.json 構成を5 つの部分に分割しています。
このパートでは、この完全なapp.json セットアップ例を詳しく説明します。
Code snippet "app.json complete setup" example
{
"pages" : [
"pages/index/index" ,
"pages/form/form" ,
"pages/wagon/wagon" ,
] ,
"window" : {
"navigationBarBackgroundColor" : "#D03232" ,
"navigationBarTextStyle" : "white" ,
"navigationBarTitleText" : "Le Wagon" ,
"backgroundColor" : "#eeeeee" ,
"backgroundTextStyle" : "light" ,
"enablePullDownRefresh" : true
} ,
"tabBar" : {
"backgroundColor" : "#FFFFFE" ,
"borderStyle" : "#D3D3D3" ,
"selectedColor" : "#D03232" ,
"color" : "#131313" ,
"list" : [ {
"pagePath" : "pages/index/index" ,
"iconPath" : "image/form.png" ,
"selectedIconPath" : "image/form-hover.png" ,
"text" : "Form"
} , {
"pagePath" : "pages/wagon/wagon" ,
"iconPath" : "image/about.png" ,
"selectedIconPath" : "image/about-hover.png" ,
"text" : "About"
} ]
}
}app.jsonのpagesの役割は、ミニプログラムのすべてのルートを定義することです。この項目の構成は必須であり、文字列の配列を受け取ります。親ページ フォルダー内の各サブフォルダーとファイルは、ルーティング パスに対応します。
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/form/form" ,
"pages/wagon/wagon"
]
}ヒント:ルート パスを"pages"に追加するたびに、IDE は作成したパスに対応するフォルダーとファイルを自動的に作成します。
WeChat フレームワークには、いくつかのルーティング ロジックが備わっています。
ルーティングモードの説明:
初期化:ミニプログラムが起動されると、最初のページがonLoadおよびonShow関数によってロードされます。
新しいページを開く:新しいページを開くと、現在のページが非表示になり、 wx.navigateTo使用して別のページにジャンプします。舞台裏では、最初のページはonHide関数の呼び出しによって非表示になり、 onLoadおよびonShow を呼び出して他のページにジャンプします。 
ページ リダイレクト: onUnload を呼び出して現在のページを閉じ、 onLoad関数とonShow関数を呼び出すwx.redirectToを使用してアプリ内のページにジャンプします。
ページリターン: onUnload現在のページを呼び出し、 onLoad関数を呼び出してから、 onShow呼び出してターゲット ページを表示します。
再読み込み、 wx.reLaunch : すべてのページを閉じて、現在のページを再読み込みします。 ※一部のAndroid端末では動作しません。
タブの切り替え、 wx.switchTab : onUnload、onHide、および onShow を使用して、ある tabBar ページから別の tabBar ページにジャンプし、他のすべての非 tabBar ページを閉じるか非表示にします。タブ切り替えの考えられるすべてのシナリオを発見します。
タブの切り替え、ナビゲーション制限:
WeChat の推奨事項:
navigateTo 、 redirectTo非 tabBar ページのみ開くことができます。 - switchTab tabBar ページを開いて表示することしかできません。 - reLaunchすべてのページで使用できます。 getCurrentPages() : この関数は、現在のページ スタックのインスタンスを取得するために使用されます。これは、ページスタック順序の配列として与えられます。配列の最初の項目は最初のページ、最後の項目は現在のページです。
tabBarその名の通り、上部または下部のタブバーを構成するアイテムです。 tabBar は、最小 2 つ、最大 5 つのタブを収容するtabBarです。
Code snippet of the "app.json" file.
{
"tabBar" : {
"backgroundColor" : "#FFFFFE" ,
"borderStyle" : "#D3D3D3" ,
"selectedColor" : "#D03232" ,
"color" : "#131313" ,
"list" : [ {
"pagePath" : "pages/index/index" ,
"iconPath" : "image/form.png" ,
"selectedIconPath" : "image/form-hover.png" ,
"text" : "Form"
} , {
"pagePath" : "pages/wagon/wagon" ,
"iconPath" : "image/about.png" ,
"selectedIconPath" : "image/about-hover.png" ,
"text" : "About"
} ]
}
}属性の表示:
tabBar listキーを使用するには、配列の各要素にオブジェクトが必要です。
List属性値は次のとおりです。
TabBar 属性の説明: 
WeChat の推奨事項:
tabBar位置を上部に設定してもアイコンを表示できませんでした。tabBarのアイコンの制限サイズは、40kb、81px*81px です。ウィンドウ項目は、ミニプログラムのタイトルと共通のウィンドウ スタイルを設定するために使用されます。
Code snippet of the "app.json" file.
"window" : {
"navigationBarBackgroundColor" : "#D03232" ,
"navigationBarTextStyle" : "white" ,
"navigationBarTitleText" : "Le Wagon" ,
"backgroundColor" : "#eeeeee" ,
"backgroundTextStyle" : "light" ,
"enablePullDownRefresh" : true ,
}ウィンドウ属性の説明:
| 属性 | タイプ | デフォルト値 | 説明 |
|---|---|---|---|
| ナビゲーションバー背景色 | 16 進数の色 | #000000 | ナビゲーションバーの背景色 |
| ナビゲーションバーテキストスタイル | 弦 | white | ナビゲーション バーのタイトルの色、 blackまたはwhite |
| ナビゲーションバータイトルテキスト | 弦 | ナビゲーションバーのタイトル | |
| ナビゲーションスタイル | 弦 | default | ナビゲーション バーのスタイル、 defaultまたはcustom 。ナビゲーション バーのスタイルをカスタマイズするには、 customを使用します。 |
| 背景色 | 16 進数の色 | #ffffff | アプリケーションの背景色。例: プルして更新するときに表示される背景色は、 <page>要素の色には影響しません。 |
| 背景テキストスタイル | 弦 | dark | 引っ張ってテキスト スタイルを更新しますdarkまたはlight |
| 背景色トップ | 弦 | #ffffff | ウィンドウの上部の背景色。 iOS でのみサポートされています |
| 背景色底 | 弦 | #ffffff | ウィンドウの下部の背景色。 iOS でのみサポートされています |
| イネーブルプルダウンリフレッシュ | ブール値 | false | アプリ全体でプルして更新を有効または無効にします。 |
| 到達距離下の距離 | 番号 | 50 | onReachBottom()コールバックをトリガーするページの下部からの距離を設定します。 |
| ページの向き | 弦 | portrait | 画面回転サポートを設定します。 auto 、 portrait 、 landscapeをサポートします。 |
アプリケーションのデフォルトの方向は、 app.json構成ファイルのwindowのpageOrientationを使用して構成できます。この属性は 3 つの値をサポートします。
autoに設定すると、ミニ プログラムがポートレート モードとランドスケープ モードの両方で動作できるようになります。portraitに設定します。landscapeに設定します。 "enablePullDownRefresh": true上記のようにグローバルapp.jsonで設定する必要があります。その後、ミニプログラム ページでonPullDownRefresh()を呼び出すことができます。
Code snippet of the "Enable pull down refresh in a page" file.
// .js
Page ( {
// Pull down the trigger event
onPullDownRefresh ( ) {
// Stop the dropdown refresh
wx . stopPullDownRefresh ( )
}
} ) WeChat では、各ページ内の上部ナビゲーション バーのタイトルを変更することができます。
Code snippet of the "change navbar title" file.
// .js
Page ( {
// Loading spinner when page loads
onload : function ( ) {
wx . showNavigationBarLoading ( )
} ,
// Change navigation bar title
onShow : function ( ) {
wx . setNavigationBarTitle ( {
title : 'My new navabar title' ,
success : function ( res ) {
console . log ( res )
}
} )
}
} )ネットワーク タイムアウトは、さまざまなネットワーク リクエストで提供される場合があります。さらに詳しく知りたい場合は、WeChat ドキュメントへのリンクを参照してください。
ここに WeChat ドキュメントへのリンクがあります。
WXML は、 HTML に似た WeChat マークアップ言語です。コンポーネントの基本ライブラリとイベント システムを組み合わせて、動的なページを構築します。
WeChat イベント システムは、ビュー レイヤーへの論理応答を処理する古典的な JavaScript イベントのように動作します。
以下の表は、開発時にWXML と HTMLの間で直面する重要な違いを示しています。
<block>についての詳しい説明:
<block>はコンポーネントではなく、単なるパッケージング要素です。ページ内でのレンダリングは行わず、コントロール プロパティのみを受け入れます。
注:すべてのコンポーネントと属性は小文字です。
ミニプログラム フレームワークでは、開発者が DOM を使用して WXML 要素を制御することはできません。代わりに、データ バインディング メソッドを使用してビュー レイヤー (.wxml ファイル) を更新します。
WeChat の要件に準拠するには、 Page()関数内でdata属性をJSON 形式で初期化する必要があります。データ バインディング技術により、ビュー レイヤー内でデータを動的に更新できます。
Page()関数の先頭でdata初期化することをお勧めします。
Code snippet "data binding" example.
<!-- .wxml -->
< view > {{text}} </ view >
< view > {{array[0].msg}} </ view > // .js
Page ( {
data : {
text : 'init data' ,
array : [ { msg : '1' } , { msg : '2' } ]
}
}ビュー層に渡される動的data:対応するPage()関数のデータ属性から取得されます。
データ バインディング構文:データ バインディングでは、Mustache 構文 (二重中括弧) を使用して変数をラップします。この構文は、ロジックを使用しないテンプレート エンジン分析です。一言で言えば、とても便利で使いやすいです！
WeChat は、データ バインディングの使用に関して多くの可能性を提供します。コンポーネントの属性、プロパティ、文字列演算、算術演算、データ パスおよび配列に対してデータ バインディングを使用する機会があります。
wx:forコントロール プロパティは、論理レイヤー (.js ファイル) から配列をバインドし、それをループしてデータを割り当てます。
Code snippet "wx:for" example.
<!-- .wxml -->
< view wx:for =" {{array}} " >
{{index}}: {{item.message}}
</ view > // .js
Page ( {
data : {
array : [ {
message : 'foo'
} , {
message : 'bar'
} ]
}
} ) <view wx:for>と同様に、 <block wx:for>を使用して複数行のブロックをレンダリングできます。 (上記の WXML テーブルのブロックを参照してください)。
Code snippet "block wx:for" example.
<!-- .wxml -->
< block wx:for =" {{array}} " wx:for-item =" array-item " wx:key =" key " >
< view class =" card " >
< view class =" card-description " >
</ view >
</ view >
</ block >上記のコードの詳細については、この Github リポジトリを参照してください。
その他のリソース:
wx:forと同様に、 wx:if条件ステートメントを定義し、ブロックをレンダリングするかどうかを決定するために使用されます。
Code snippet "wx:if" example.
<!-- .wxml -->
<!-- Add additional conditions wx:elif ; wx:else -->
< view wx:if =" {{length > 5}} " > 1 </ view >
< view wx:elif =" {{length > 2}} " > 2 </ view >
< view wx:else > 3 </ view > // .js
Page ( {
data : {
length : 10
}
} )条件文ブロック内に複数のタグを表示したい場合は<block wx:if>を使用できます。
<!-- .wxml -->
< block wx:if =" {{true}} " >
< view > view1 </ view >
< view > view2 </ view >
</ block > wx:if WeChat ドキュメントをさらに詳しく調べてください。
テンプレートを使用すると、ミニプログラムのさまざまなファイルで何度も再利用するコード スニペットを定義できます。
WXML テンプレート項目には独自のスコープがあり、渡すデータのみを使用できます。
まず、テンプレートを宣言するには、その名前を定義する必要があります。
Code snippet "template" example.
<!-- .wxml -->
< template name =" msgItem " >
< view >
< text > {{index}}: {{msg}} </ text >
< text > Time: {{time}} </ text >
</ view >
</ template >
<!-- Call the template -->
< template is =" msgItem " data =" {{item}} " />後で同じファイル内でテンプレートを呼び出す場合は、 is属性とテンプレート名を値として使用して、必要なテンプレートを宣言します。また、 data属性を使用してデータをテンプレートに渡すことを忘れないでください。
// .js
Page ( {
data : {
item : {
index : 0 ,
msg : 'this is a template' ,
time : '2017-05-18'
}
}
} ) 新しいファイルですでに定義されているテンプレートを宣言するには、まずそれをインポートする必要があります。
Code snippet "define a template in a specific file" exemple
<!-- item.wxml -->
< template name =" item " >
< text > {{text}} </ text >
</ template > Code snippet "import and call the template in index.wxml" exemple
<!-- index.wxml -->
< import src =" item.wxml " />
< template is =" item " data =" {{text: 'forbar'}} " />WeChat のドキュメントの詳細については、こちらをご覧ください。
データの初期化およびライフサイクル関数に加えて、フレームワークではイベント処理関数を定義できます。
WXML 要素 (イベント ハンドラー) がイベントをトリガーし、論理層がイベント オブジェクトをパラメーターとして受け取るようにイベント ハンドラーをバインドします。
Code snippet "event handler" example.
<!-- .wxml -->
< button type =" primary " bindtap =" add " > Incrementation: {{count}} </ button > // .js
Page ( {
data : {
count : 1
} ,
add : function ( e ) {
this . setData ( {
count : this . data . count + 1
} )
}
} ) setData() :この関数は、次にビュー層に送信される論理層内のデータを更新します。 setData()関数はオブジェクトをパラメータとして受け取り、 this.dataをデータ パスとして使用してキー値を更新します。
バインディング イベントには多くの種類があり、ほとんどのコンポーネントにはバインディング イベントの独自の定義があります。
コンポーネントバインディングイベント:
bindsubmit 。bindinput 。bindscroll 。 Code snippet "form binding event" example.
<!-- form.wxml -->
< form bindsubmit =" bindFormSubmit " >
<!-- Form inputs -->
< button type =" primary " form-type =" submit " > Submit </ button >
</ form > // form.js
// Form submission function
Page ( {
bindFormSubmit : function ( e ) {
// Treatment
}
} )古典的なバインディング イベント:
bind+event_typecatch+event_type Code snippet "data binding illustration" example.
< button bindtap =" ontap " type =" primary " > Tap < button /> Page ( {
ontap : function ( ) {
console . log ( 'tap' ) ;
}
} )使用される 2 つの一般的なバインディング イベントは、 bind+event_typeとcatch+event_typeです。 catch イベントは、バブリング イベントを防ぐイベントです。
バブリング イベントの概念: JavaScript を使用しない人向けに、別の要素にネストされた要素でイベントが発生したときにバブリング イベントを定義できます。親ノードとネストされた要素の両方が、その特定のイベントのイベント ハンドラーとして登録されます。ネストされた要素の親ノードはcatch+event_typeを使用する必要があります。これにより、イベントが祖先要素にバブリングするのを防ぎます。
Code snippet "counteract bubbling effect with catchtap" example.
<!-- .wxml -->
< view id =" outter " bindtap =" handleTap1 " >
outer view
< view id =" middle " catchtap =" handleTap2 " >
middle view
< view id =" inner " bindtap =" handleTap3 " >
inner view
</ view >
</ view >
</ view > // .js
Page ( {
handleTap1 : function ( e ) {
console . log ( 'outter' )
} ,
handleTap3 : function ( e ) {
console . log ( 'inner' )
} ,
handleTap2 : function ( e ) {
console . log ( 'middle' )
}
} )主に、要素をネストし、バインドする要素の親ノードを表示したくない場合に使用されます。
Code snippet "tap and longtap event binding" example.
<!-- index.wxml -->
< button bindtap =" ontap " type =" primary " > Tap < button />
< button bindlongtap =" onlongtap " type =" primary " > Long tap < button /> // index.js
Page ( {
ontap : function ( ) {
console . log ( 'tap' ) ;
} ,
onlongtap : function ( ) {
console . log ( 'longtap' ) ;
}
} )ここでは、ミニプログラムの共有を可能にするための実践的なヒントを紹介します。 WeChat では、ミニプログラムを共有する 2 つの方法が開かれます。
ページの...上隅をクリックすると表示されるドロップダウン メニュー内の進むボタンを有効にすることができます。
ミニプログラムのページ内に進むボタンを作成します。これにより、共有プロセスがよりユーザーフレンドリーになります。
どちらのバージョンでも、フレームワークは MP ヘッダーのスクリーンショットを含むミニプログラム カードを自動的に転送します。
このボタンを有効にするには、 onShareAppMessageというPage()関数を使用する必要があります。
Code snippet "Enable the forward button of the drop-down menu" example.
// index.js
onShareAppMessage : function ( ) {
return {
title : 'Le Wagon coding school' ,
path : 'pages/index/index'
}
} ,この関数では、前方カードの上部に表示されるタイトルと現在のページのパスを定義する必要があります。タイトルを追加するのを忘れた場合、WeChat はデフォルトでタイトルを追加します (ミニプログラム名)。
制限事項:この場合に定義できるのは、イベントonShareAppMessageのみです。 「進む」ボタンはフレームワーク自体によって作成されます。
この機能を使用すると、開発者はボタン プロパティopen-typeとその値'share'を使用して、ページ内に特定の進むボタンを作成できます。
Code snippet "Create a forward button within the page" example.
<!-- about.wxml -->
< view bindtap =" onShareAppMessage " >
< button class =" share-btn " open-type =" share " type =" primary " > Share </ button >
</ view >最初のケースとは異なり、 onShareAppMessage関数をトリガーするイベント ハンドラーを作成する必要があります。この関数は、 wx.showShareMenuを呼び出し、パラメータとしてwithShareTicketを渡します。
// about.js
Page ( {
onShareAppMessage : function ( ) {
console . log ( 'share' )
wx . showShareMenu ( {
withShareTicket : true
} )
}
} )注:どちらのバリアントもPage()関数を使用しています。これは、関数を宣言する特定のページを共有していることを意味します。
WeChat は、フレンドリーで効率的かつ一貫したユーザー エクスペリエンスを構築することを目指しています。それを実現するために、WeChat 公式デザイン チームは WeUI リポジトリを提供します。この基本的なフロントエンド ライブラリ(WeUI) は、WeChat のネイティブなビジュアル エクスペリエンスと一致しています。 WeUI は、 Bootstrap と同様に、WeChat フロントエンド ライブラリとして理解できます。これには、ボタン、セル、ダイアログ、進行状況、トースト、記事、アクションシート、アイコンなどのコンポーネントの大規模なセットが含まれています。
便利な Github リポジトリ:
npmを通じてWeUI リポジトリをローカルにダウンロードします。
npm install weui-wxss
ダウンロードされたコードには、WeUI ソース コードと WeUI に基づくミニプログラム サンプルが含まれています。
WeChat IDE で WeUI ミニプログラム サンプルを開いてみましょう。
WeUIスタイルをapp.wxssにインポートして、ミニプログラムで WeUI スタイルを使用できるようにします。
@import "style/weui.wxss" ;
WeChat の設計ガイドラインの詳細については、ここで完全なドキュメントを参照してください。
WXSS には CSS のほぼすべての機能が含まれています。 app.wxssで定義されているスタイル シートは、各ページで識別される共通のスタイル ルールです。特定のページで定義されているスタイル シートは、現在のページでのみ機能するローカル スタイルであるため、 app.wxssで使用されている同じセレクターを上書きします。 WXSS と CSS には、次の2 つの大きな違いがあります。
WXSSではrpx （レスポンシブピクセル）を単位として使用します。画面の幅に応じてピクセルを調整できます。従来のpx単位を引き続き使用できます (WeChat の方法ではありません)。 (1rpx = 0.5px ; 1px = 2rpx)
アウトバウンド スタイル シートをインポートするには、 @importステートメントの後に相対パスと ; を続けて使用します;声明の最後に。
Code snippet "@import" example.
/* app.wxss*/
@import "outbound.wxss" ;WeChat フレームワークは、カスケード セレクターなどの多くの標準CSSセレクターをサポートできません。
サポートされているセレクター:
WeChat の推奨事項:
WeChat フレームワークは開発者に大規模な基本コンポーネントのセットを提供します。コンポーネントの完全なリストはここにあります。
<navigator> HTML のアンカーです。あるページから別のページにリンクするために使用されます。 navigator 要素の最も重要な属性はopen-typeです。
Code snippet "navigator" example.
<!-- .wxml -->
< view class =" btn-area " >
< navigator url =" /pages/index/index " hover-class =" navigator-hover " > text </ navigator >
< navigator url =" /pages/form/form " open-type =" redirect " hover-class =" other-navigator-hover " > text </ navigator >
< navigator url =" /pages/index/index " open-type =" switchTab " hover-class =" other-navigator-hover " > tab switching </ navigator >
</ view >ナビゲーター属性の説明:
オープンタイプの値の説明:
WeChat ドキュメントのピッカー コンポーネントは、デフォルトのクラシック セレクター、時刻セレクター、日付セレクターの 3 つのセレクターに分かれています。
以下の使用例は日付ピッカーに基づいていますが、ロジックは別のピッカーでも同じです。
Code snippet "date picker" example.
<!-- .wxml -->
< picker mode =" date " value =" {{date}} " start =" 2015-09-01 " end =" 2020-09-01 " bindchange =" bindDateChange " >
< view class =" picker " >
Now the date is {{date}}
</ view >
</ picker > // .js
Page ( {
data : {
date : '2017-05-20'
} ,
bindDateChange : function ( e ) {
this . setData ( {
date : e . detail . value
} )
}
} )日付セレクターの属性:
スイッチは、オンとオフの 2 つの状態を備えた視覚的な切り替えです。
Code snippet "switch" example.
<!-- .wxml -->
< view class =" body-view " >
< switch checked bindchange =" switch1Change " />
< switch bindchange =" switch2Change " />
</ view > // .js
Page ( {
switch1Change : function ( e ) {
console . log ( 'switch1 a change event occurs with the value' , e . detail . value )
} ,
switch2Change : function ( e ) {
console . log ( 'switch2 a change event occurs with the value' , e . detail . value )
}
} )スイッチ属性:
トーストは、ユーザーに通知するために簡単なコンポーネントと自動期限切れのコンポーネントを表示するために使用される非モーダル要素です。
以下のコード スニペットでは、フォームの送信を偽装して、トーストがどのように機能し、表示されるかを示しています。
Code snippet "spinner btn and toast" example.
<!-- .wxml -->
< form bindsubmit =" bindFormSubmit " >
< button type =" primary " form-type =" submit " loading =" {{loading}} " > Send </ button >
</ form >上記のコード スニペットでは、フォームを送信する目的で動的ボタンを作成しました。ボタンをクリックすると、読み込みスピナーによってアニメーションが表示されます。
次に、 wx.showToast API を使用してトーストを表示し、ユーザーに通知します。
Page ( {
data : {
loading : false
} ,
bindFormSubmit : function ( e ) {
// Enable loading animation on send btn
this . setData ( {
loading : ! this . data . loading
} )
// Loading toast
wx . showToast ( {
title : 'Sending...' ,
icon : 'loading' ,
duration : 1500
} )
}
} )モーダル ボックスを使用すると、ページ上に小さな要素をオーバーレイできます。モーダル ボックスの主な利点は、従来のウィンドウ ポップアップやページのリロードを使用する必要がなくなることです。
モーダル ボックスが一般的に使用される状況カテゴリは 5 つあります。
Code snippet "modal to inform" example.
wx . showModal ( {
title : 'Modal title' ,
content : 'Modal content ' ,
confirmText : "Ok" ,
showCancel : false ,
success : function ( res ) {
console . log ( 'success' )
}
} )モーダルパラメータ:
mapコンポーネントはネイティブ コンポーネントであり、属性の長いリストがあります。主な属性について説明します。詳細については、WeChat ドキュメントへのリンクを参照してください。
map属性リスト:
Code snippet "map component" example.
< map id =" map " longitude =" 113.324520 " latitude =" 23.099994 " scale =" 14 " controls =" {{controls}} " bindcontroltap =" controltap " markers =" {{markers}} " bindmarkertap =" markertap " polyline =" {{polyline}} " bindregionchange =" regionchange " show-location style =" width: 100%; height: 300px; " > </ map >WeChat が API を通じて提供している位置ベースのサービスについて知りたい場合は、Wiki の位置ベースのサービスの部分を参照してください。
WeChat の推奨事項:
wx.getLocation typeをgcj02として指定する必要がありますこのセクションでは、アプリのデータを永続化し、データベース上のデータを取得する場合に実行する必要があるさまざまな手順を説明することを目的としています。初心者でも簡単にインストールできる Leancloud.cn を選択しました。
最初に説明します。以下の例は、単純なフォームを通じてフィードバックを収集することを目的としたミニプログラムに基づいています。このミニプログラムは、収集されたデータを Leancloud.cn に保存します。 DBに格納されているデータを取得して表示する方法を説明します。この 2 番目のセクション (データの取得) を説明するために、Leancloud に保存されているすべてのレビューを表示する新しいページを作成しました。
このチュートリアルの作成に使用したプロジェクトの Github リポジトリは次のとおりです。
仕様:
Code snippet "create a form" example.
<!-- pages/form/form.wxml -->
< form bindsubmit =" bindFormSubmit " >
< view > About the workshop </ view >
< view > Generally how was this workshop? </ view >
< text > Hints: takeaway, speed, time, location, people... </ text >
< view >
< textarea name =" review " maxlength =" -1 " />
</ view >
<!-- Refer to the Github repository above if you want the complete form -->
< button type =" primary " form-type =" submit " > Send </ button >
</ form >上記のようにフォームの構造が作成されたら、次にフォームの送信によってトリガーされるイベントを作成する必要があります。
//pages/form/form.js
Page ( {
data : {
loading : false ,
} ,
// Form Submission
bindFormSubmit : function ( e ) {
// Local storage
var review = e . detail . value . review
// ...
}
} )ローカル ストレージ: bindFormSubmit関数では、フォームのユーザー入力をローカルで収集できるかどうかをテストする目的で、ユーザーの入力をローカル変数に割り当てました。
インストールを開始する前に、開発中の場合は、WeChat IDE 内のプロジェクト インターフェイスの最後のチェックボックスをオンにして、ドメイン名をホワイト リストに登録してください。特定のデバッグが必要な場合は、この Leancloud チュートリアルに従ってください。
Leancloud のセットアップを開始するには、まず Leancloud でアカウントを作成します。
ミニプログラムで Leancloud をインストールして初期化する準備ができたので、ドキュメントに従って2 段階のプロセスを実行できます。
appIdとappKey追加することによるアプリの初期化。 // app.js
// Require Leancloud library (the av-weapp-min.js file you just add).
const AV = require ( './utils/av-weapp-min.js' ) ;
// Initialization of the app
AV . init ( {
appId : 't6hUVJfOwjHuWXuD9OE06rxxxxxxxxxxxx' ,
appKey : 'HndT17mJ7wAIxsv8uxxxxxxxxxx' ,
} ) ;迷った場合は、プロジェクトの Github リポジトリを参照してください。
まず、 modelという名前の新しいフォルダーを作成し、このフォルダーにform.jsファイルを追加します。永続化したいオブジェクトの種類（この場合はフォーム）に従ってファイルに名前を付けます。この手順は必須ではありませんが、ファイルを整理しておくことができます。
オブジェクトを作成しましょう。作成したばかりのform.jsファイルで、 util.jsにインストールしたav-weapp-min.jsを要求し、それをAV定数に割り当てます。次に、 Formオブジェクトをインスタンス化します。
Code snippet "require Leancloud and create an object" example.
// model/form.js
const AV = require ( '../utils/av-weapp-min.js' ) ;
class Form extends AV . Object {
}
// Register object
AV . Object . register ( Form , 'Form' ) ;
// Export object
module . exports = Form ; Formオブジェクトをインスタンス化したので、論理層 (ここでは form.js) にデータをカプセル化するフォーム オブジェクトを作成し、フォームの送信後にユーザーをリダイレクトします。
Code snippet "bindFormSubmit function" example.
const AV = require ( '../../utils/av-weapp-min.js' ) ;
const form = require ( '../../model/form.js' ) ;
// pages/form/form.js
bindFormSubmit: function ( e ) {
// Local storage
console . log ( e )
var review = e . detail . value . review
// ...
// Leancloud permissions
var acl = new AV . ACL ( ) ;
acl . setPublicReadAccess ( true ) ;
acl . setPublicWriteAccess ( true ) ;
// Leancloud storage
setTimeout ( function ( ) {
new Form ( {
review : review
// ...
} ) . setACL ( acl ) . save ( ) . catch ( console . error ) ;
// Redirect user
wx . reLaunch ( {
url : '/pages/wagon/wagon?form=1'
} ) ;
} , 2000 ) ;
}
} )コード スニペットの概要:
binFormSubmit関数内に、Leancloud が作成して永続化したいオブジェクトを介して読み書きできるようにする権限を追加しました。Formオブジェクトにデータをカプセル化し、フォームが送信されたときにユーザーをリダイレクトする関数setTimeout定義しました。注: setACL(acl)は Leancloud の組み込みプロパティです。
これまでのところ、すべてがミニプログラム内で行われていますが、今後行われることは、Leancloud ダッシュボード内で収集されたデータの投影です。
Formクラスなど、作成したクラスオブジェクトを追加します。収集されたデータがLeanCloudダッシュボード内に持続することを確認するためにテストします。
まず、このセクションの背景を思い出させてください。新しいページに、 LeanCloudで収集して持続したレビューのリストを表示したいと思います。チュートリアルの最初のセクションに従ったと思います（上記を見た場合）。
仕様:
reviewという新しいページを作成します。それでは、新しいレビューページとリダイレクトを行うボタンを作成して、ページを確認しましょう。 （ヒント： app.jsonにルートパスを追加するだけで、フレームワークは新しいページフォルダーとファイルを単独で作成します）。
<!-- index.wxml -->
<!-- CTA redirects to review page -->
< view class =" cta-margin " >
< navigator url =" /pages/review/review " class =" btn-index " > Reviews </ navigator >
</ view >次のステップは、LeanCloudに保存されているデータを取得して表示することです。
Code snippet "fetch data stored on Leancloud and displays it" example.
<!-- review.wxml -->
< block wx:for =" {{forms}} " wx:for-item =" form " wx:key =" objectId " >
< text data-id =" {{form.objectId}} " >
{{form.review}}
</ text >
< text >
- {{form.name}}
</ text >
</ block >上記では、WXを使用してリストレンダリングブロックを作成しましたwx:forレビューを作成する人の各レビューと名前を表示します。
// pages/review/review.js
// Require leancloud and object
const AV = require ( '../../utils/av-weapp-min.js' ) ;
const Form = require ( '../../model/form.js' ) ;
// Fetch data from Leancloud
Page ( {
data : {
forms : { }
} ,
onReady : function ( ) {
new AV . Query ( 'Form' )
. descending ( 'createdAt' )
. find ( )
. then ( forms => this . setData ( { forms } ) )
. catch ( console . error ) ;
} ,
} )コードスニペットデブリーフ：
AVオブジェクトでクエリを実行しています。formsアレイをセットアップすることにより、作成日に従って各フォームを整理します。このユースケースでは、LeanCloudに収集するデータを局所的に保存する方法と、LeanCloudから保存されているデータを取得する方法がわかりました。
LeanCloudドキュメントを読むか、LeanCloud、GitHubリポジトリによって作成されたLeanTodoミニプログラムを確認することをお勧めします。
生産中のときは、WeChatプラットフォーム内でLeanCloudドメイン名を構成する必要があります。このLeanCloudチュートリアルに従ってください。
wx.getUserInfoを介してアクセスできるすべてのユーザー情報：
wx . getUserInfo ( {
success : function ( res ) {
var userInfo = res . userInfo
var nickName = userInfo . nickName
var avatarUrl = userInfo . avatarUrl
var gender = userInfo . gender //sex => 0: unknown ; 1: male ; 2：female
var province = userInfo . province
var city = userInfo . city
var country = userInfo . country
}
} ) wechat "QuickStart"（WeChat bulerPlate）は、 app.jsファイルにgetUserInfo機能を提供します。名前が示すように、この関数はユーザー情報を取得するためのものです。この機能を段階的に見てみましょう。
一般的な説明:
getUserInfo関数にはパラメーターCBがあり、これも関数です。globalDataのuserInfoがnullでない場合、 getUserInfo関数のIfブロックは渡されます。userInfoはnullで、 getUserInfo関数はログインインターフェイスを呼び出します。 // app.js
App ( {
getUserInfo : function ( cb ) {
var that = this
if ( this . globalData . userInfo ) {
typeof cb == "function" && cb ( this . globalData . userInfo )
} else {
// Login interface call
wx . login ( {
success : function ( ) {
wx . getUserInfo ( {
success : function ( res ) {
that . globalData . userInfo = res . userInfo
typeof cb == "function" && cb ( that . globalData . userInfo )
}
} )
}
} )
}
} ,
globalData : {
userInfo : null
}
} )最初のケース、 userInfo form globalDataはnullではありません
IF条件ステートメントは、 getUserInfo userInfo取得するためにcb引数が渡されたかどうかを判断することを目的としています。
CBパラメーターが関数であるかどうかはどのように把握しますか？
// index.js
var app = getApp ( )
Page ( {
data : {
userInfo : { } ,
} ,
onLoad : function ( ) {
console . log ( 'onLoad' )
var that = this
app . getUserInfo ( function ( userInfo ) {
that . setData ( {
userInfo : userInfo
} )
} )
}
} index.jsのこのonLoad関数を見てみましょう
onLoad関数は、アプリインスタンスでgetUserInfo機能を呼び出します。userInfo更新するパラメーターとして定義します。globalDataに更新されたuserInfoを渡します。2番目のケース、userInfoはnullです
userInfoがnull getUserInfo関数の場合、ログインインターフェイスを呼び出すelseステートメントを返します。getUserInfoが呼び出され、上記のifとして行動します。現在のユーザーがすでにログインしている場合、ユーザー情報はonLaod関数を呼び出すindex.jsページを介してglobalDataに割り当てられます。そして、同じロジックが適用されます。
WeChatミニプログラムには、APIにキャッシュのメカニズムがあります。実際、各ミニプログラムには独自のローカルキャッシュストレージがあります。
リマインダー：キャッシュストレージは、迅速にアクセスするデータを保存するために使用されます。リクエストは、DBを要求するために使用された元のサーバーと比較してクライアントに近いローカルキャッシュからリクエストが満たされるため、ユーザーの待機時間を短縮します。
キャッシュストレージは、キャッシュにデータを保存する2つの種類の方法を提供します。
wx.setStorage ： wx . setStorage ( { key : 'name' , data : 'Thibault' } ) ; wx.setStorage BuildパラメーターJSONとして、保存されたキーとデータを指定するキーであるキーを指定して、保存するキー値を指定します。
wx.setStorageSync ： wx . setStorageSync ( 'name' , 'Thibault' ) ; wx.setStorageSync構文はより単純で、パラメーターが直接渡されます。着信コールバック関数を介してデータを取得できます。
WeChatは、キャッシュに関する3つの主要なアクションを提供します。
wx.setStorage 、またはwx.setStorageSyncにデータを保存します。wx.getStorage 、またはwx.getStorageSyncのデータをお読みください。wx.clearStorage 、またはwx.clearStorageSyncの明確なデータ。wx.removeStorage 、またはwx.removeStorageSyncのデータを削除します。 Code snippet "set cache (synchronous method)" exemple 。
<!-- index.wxml -->
< input style =" input " placeholder =" Input data " bindinput =" inputEvent " />
< button type =" warn " bindtap =" saveToCache " > Save data to cache </ button >
< button type =" primary " bindtap =" jumpToPage " > Jump to another page </ button > // index.js
Page ( {
data : {
inputInfo : ''
} ,
jumpToPage : function ( ) {
wx . navigateTo ( {
url : "../show/show"
} ) ;
} ,
inputEvent : function ( e ) {
console . log ( e . detail . value )
this . setData ( {
inputInfo : e . detail . value
} )
} ,
saveToCache : function ( ) {
wx . setStorage ( { key : 'inputInfo' , data : this . data . inputInfo ,
success : function ( res ) {
console . log ( res )
}
} )
}
} ) Code snippet "Fetch data from the cache and display data in a new page (synchronous method)" exemple 。
<!-- show.wxml -->
< view > Data you saved to cache:{{inputInfo}} </ view > // show.js
Page ( {
data : {
inputInfo : ''
} ,
onLoad : function ( options ) {
var that = this ;
wx . getStorage ( {
key : 'inputInfo' ,
success : function ( res ) {
console . log ( res )
that . setData ( {
inputInfo : res . data ,
} )
}
} )
}
} )wx.scanCode APIを使用して、クライアントコードスキャナーUIを呼び出すことができます。 QRコードをスキャンすることを目的として、CTAボタンを介してWeChatスキャナーに直接アクセスできます。
Code snippet "call up client code scanner" example.
<!-- .wxml -->
< view class =" btn-area " >
< button bindtap =" bindScan " > Scan </ button >
</ view > // .js
bindScan: function ( ) {
console . log ( 'scanner' )
wx . scanCode ( {
success : ( res ) => {
console . log ( res )
}
} )
}WeChat APIは、ロケーションベースのサービスの完全なセットを提供します。
wx.chooseLocation表示する場所を選択します。wx.getLocation現在のユーザーの場所を取得します。wx.openLocation buit-inのマップビューに場所を表示します。wx.createMapContextマップをパーソナライズします。 Code snippet "get location" example.
<!-- .wxml -->
< button type =" primary " bindtap =" listenerBtnGetLocation " > Get location </ button > // .js
listenerBtnGetLocation: function ( ) {
wx . getLocation ( {
type : 'wgs84' ,
success : function ( res ) {
var latitude = res . latitude
var longitude = res . longitude
var speed = res . speed
var accuracy = res . accuracy
console . log ( res )
}
} )
}上記では、 wx.getLocation使用して、緯度と経度を取得することで現在のユーザーの位置を取得しました。
wx.getLocation詳細：ユーザーがミニプログラムを離れますが、チャットの上に表示される場合は、mini-programを表示する場合、 wx.getLocationに電話をかけ続け、ユーザーの場所を継続的に取得できます。
WeChatビルトインマップに現在のユーザーの場所を表示： wx.openLocation API Callは、上記で作成したlistenerBtnGetLocation関数から得た場所を表示するために、WeChatビルトインマップビューを開くことを可能にします。
注： wx.openLocation API呼び出し、ユーザーを新しいマップウィンドウにリダイレクトします。
Code snippet "display the current user location" example.
// .js
listenerBtnGetLocation: function ( ) {
wx . getLocation ( {
type : 'wgs84' ,
success : function ( res ) {
var latitude = res . latitude
var longitude = res . longitude
wx . openLocation ( {
latitude : latitude ,
longitude : longitude ,
scale : 28
} )
}
} )
}WeChat Image APIは4つの可能性を提供します。
wx.chooseImageアルバムやカメラから画像を選択します。wx.previewImageアプリにアップロードする前に画像をプレビューします。wx.getImageInfo画像情報（高さ、幅、パス、SRC）を取得します。wx.saveImageToPhotosAlbumで、画像をミニプログラムからアルバムに保存します。以下の例では、 wx.chooseImageを使用してユーザーアルバムまたはカメラを呼び出すことを目的として、 listenerBtnChooseImageという関数を作成します。次に、 wx.getImageInfo使用して画像情報を取得します。
Code snippet "upload an image from album or camera" example.
<!-- .wxml -->
< button type =" primary " bindtap =" listenerBtnChooseImage " > Upload Image </ button >
<!-- Display the image user upload -->
< image src =" {{src}} " mode =" aspecFill " bindlongtap =" imgLongTap " /> // .js
Page ( {
data : {
src : [ ]
} ,
listenerBtnChooseImage : function ( ) {
var that = this
// Upload an image
wx . chooseImage ( {
count : 1 ,
sizeType : [ 'original' , 'compressed' ] ,
sourceType : [ 'album' , 'camera' ] ,
success : function ( res ) {
console . log ( 'success' )
that . setData ( {
src : res . tempFilePaths
} )
// Get image info
wx . getImageInfo ( {
src : res . tempFilePaths [ 0 ] ,
success : function ( res ) {
console . log ( res . width )
console . log ( res . height )
console . log ( res . path )
}
} )
}
} )
}
} )ページに画像ができたので、画像を長いタッピングして、ミニプログラムから現在のユーザーアルバムに画像を保存しましょう。
Code snippet "long tap the image to save it within user album" example.
<!-- .wxml -->
< image src =" {{src}} " mode =" aspecFill " bindlongtap =" imgLongTap " /> // .js
Page ( {
data : {
src : [ ]
} ,
listenerBtnChooseImage : function ( ) {
var that = this
// Upload an image
wx . chooseImage ( {
count : 1 ,
sizeType : [ 'original' , 'compressed' ] ,
sourceType : [ 'album' , 'camera' ] ,
success : function ( res ) {
console . log ( 'success' )
that . setData ( {
src : res . tempFilePaths
} )
// Get image info
wx . getImageInfo ( {
src : res . tempFilePaths [ 0 ] ,
success : function ( res ) {
console . log ( res . width )
console . log ( res . height )
console . log ( res . path )
}
} )
}
} )
} ,
// Longtap function
imgLongTap : function ( ) {
// Save image to album
wx . saveImageToPhotosAlbum ( {
filePath : this . data . src ,
success ( res ) {
wx . showToast ( {
title : 'Save' ,
icon : 'success' ,
duration : 1500
} )
console . log ( 'success' )
}
} )
}
} )Wechat Network APIは、一般的なHTTPSリクエスト、WebSocket、アップロード、およびダウンロードを提供します。
wx.request標準のHTTPSリクエストを作成します。wx.uploadFile 、任命されたサーバーにファイルをアップロードします。wx.downloadFile任命されたサーバーからファイルをダウンロードします。 
以下の例には、1つの関数と1つのイベントハンドラーがあります。それぞれ、 addNewPostとonPullDownRefreshの名前が記載されているように、 wx.requestコールを使用して新しい投稿を追加して投稿を取得できるはずです。
Code snippet "making a POST HTTPS request" example.
<!-- .wxml -->
<!-- Add Posts -->
< input confirm-type =" send " bindconfirm =" addNewPost " placeholder =" Add a new post! " /> // .js
Page ( {
data : {
posts : [ ]
} ,
addNewPost : function ( e ) {
var that = this
var message = e . detail . value
// Add a new post
wx . request ( {
url : 'example.php' , // just an example address
method : 'post' ,
data : {
post : {
content : message
}
} ,
header : {
'content-type' : 'application/json'
}
} )
}
} )投稿したので、ビューレイヤーに表示して表示します。簡単にするために、onpulldownrefreshを利用して新しい投稿をリロードします。
Code snippet "making a GET HTTPS request" example.
<!-- .wxml -->
<!-- Display Posts -->
< block wx:for =" {{posts}} " wx:for-item =" post " >
< text > {{post.content}} </ text >
</ block >
<!-- Add Posts -->
< input confirm-type =" send " bindconfirm =" addNewPost " placeholder =" Add a new post! " /> // .js
Page ( {
data : {
posts : [ ]
} ,
addNewPost : function ( e ) {
var that = this
var message = e . detail . value
// Add a new post
wx . request ( {
url : 'example.php' , // just an example address
method : 'post' ,
data : {
post : {
content : message
}
}
} )
} ,
// onPullDownRefresh must first be enabled in the config.
onPullDownRefresh : function ( ) {
var that = this
// by default the request is a GET.
wx . request ( {
url : 'example.php' ,
header : {
'content-type' : 'application/json'
} ,
success : {
that . setData ( {
posts : res . data // Set the Page data for posts to the response data.
} )
}
} )
}
} ) 私たちが問題や質問に遭遇したミニプログラムの作成パスに沿って、私たちはあなたと共有したいと思っています。あなたが共有したいいくつかの問題がある場合は、私たちに連絡してください。
WECHATでは、ICPライセンスを持っているAPIのみが許可されているため、西洋諸国でよく知っているAPIのほとんどを忘れることができます。
これが中国で利用可能なAPIのディレクトリです。チェックしてください。
background-image:プロパティを使用できません画像ressourcesは、 CSSの背景画像を介して取得できませんbackground-image: url(../../images/banner.png); 。私はそれが恐ろしいことを知っていますが、私たちはそれに対処しなければなりません。
このフラストレーションをバイパスするには、2つの方法があります。
CSSのbackground-image:ただし、リアルティブパスを使用することはできません。Base64で画像をエンコードしてから、 background-image: url(base64 image); 。 Base64で画像をエンコードするツールを次に示します。
または、 <image>タグを使用して、 <image>タグ属性のようなmodeで画像を扱うことができます。 WeChatには13のモード、9は切断モード、4つはズームモードです。これが文書化へのリンクです。
RPXは、WeChatミニプログラムの単位であるレスポンシブピクセルの略です。公式の定義によると、 rpx適応画面幅に基づいています。
実際、RPXユニットは、 「ルートEM」を表すremユニットに基づいています。なぜemユニットはしないのですか？
emユニットは、親のフォントサイズに関連しており、複利の問題を引き起こします。 remユニットは、複合問題（フォントサイジングデューティ）を導き出すルート要素に関連しています。
ただし、 rpxユニットに戻るには、 RPXの利点は次のとおりです。
ミニプログラムに取り組んでいますか？あなたがあなたの仕事を共有したいなら、私たちに連絡してください、私たちの乗組員に会い、助けを求めてください！
貢献したい場合は、ここからプルリクエストを送信するか、上海（at）lewagon.comで提案をお願いします！
