WeChatミニプログラム開発ツールのインストール手順を解説

開発ツール設定完了中国テック雑記

中国の国民的アプリ「WeChat」がミニプログラムを発表。

スマホ業界を激変させる中国発の最新トレンド「ミニプログラム」を徹底解説
スマホ業界を大きく揺るがす「ミニプログラムとは何か」について、WeChatミニプログラムを主な事例に、様々な視点から徹底解説

4億人を超えたといわれるユーザー数に比例して、中国では開発者登録するエンジニアも急増。すでに100万人以上が開発者として登録していると発表されています。

本ブログでもWeChat開発者IDの登録方法についてすでに紹介していますが、本記事ではさらに一歩踏み込んで「WeChatミニプログラムの開発ツール」のインストール手順を紹介します。

※本記事の内容は2018年9月時点の内容になります。

WeChatミニプログラム開発ツール、一言まとめ

・WeChat、WeChatミニプログラムの開発者ID登録が事前に必要
・Windows、Macのどちらも対応
・開発ツールで作業した内容をスマホ側ですぐにテストできて便利

WeChatミニプログラム開発ツール、インストール手順

WeChatアプリのインストール、WeChat開発者ID登録

WeChatのインストールおよびWeChat開発者IDの登録がまだの人は、下記ページを参考に登録を済ませてから次に進んでください。WeChatは個人用のIDと開発者IDを紐づける仕様ので、両方を登録しないと開発時の認証が行えず、先に進めなくなります。

WeChatミニプログラム(微信小程序)、開発用ID取得方法を解説
WeChatミニプログラム開発に興味がある人に、開発者アカウント取得の手順について解説

開発ツールのダウンロード

下記ページから、自分のPC環境に合わせた開発ツールのインストール用ファイルをダウンロードしましょう。Windows 64, Windows 32, Mac の3種類が用意されています。

Download latest version (1.02.1809110) | WeChat public doc
the doc for wechat develoers

開発ツールのインストール

ダウンロードしたファイルを実行して、開発ツールのインストールを行います。インストールには結構時間がかかりますが、手順自体は単純です。

ファイルサイズが1GB程度あるので、ストレージの空き容量が少ない人はファイル整理などしてください。

開発ツールインストール1

「下一歩(続ける)」を選択

 

開発ツールインストール2

「我接受(同意)」を選択

 

開発ツールインストール3

インストール場所を指定して、「安装(インストール)」を選択

開発ツールの初期設定

開発ツールと開発者IDの紐づけ

開発ツール初期設定1

開発ツールを実行時するとQRコードが表示されるので、開発者IDと紐づけ済みのWeChatでQRコードをスキャンします。

ミニプログラムの開発ツールを選択

開発者ツール初期設定2

「Mini Program Project」「WeChat Web Project」の2つのボタンが表示されるので、「Mini Program Project」を選択

プログラムIDの設定

開発ツール初期設定3

作成するプロジェクトのIDとデータ保存場所を設定します。今回はtest accountの「Mini Game」を選択、データ保存場所は新しく作ったフォルダを使用しました。

サンプルプログラムの開発画面が開く

開発ツール設定完了

しばらくするとサンプルプログラムの状態で開発ツールが起動します。

開発ツールの機能解説

ここからは、開発ツールの大まかな機能を紹介します。

左側はシミュレータ画面

開発ツール設定完了

開発ツール左側はミニプログラムやミニゲームのシミュレータ画面。ミニゲームのサンプルプログラムは、開発ツール起動時点で動いててちょっと感動です。

右側のフォルダツリーから主人公機の画像データ「Hero.png」を探し、大仏画像に差し替えたところ、無事に主人公機が大仏になりました。マウスやタッチパネルを使った動作テストもできます。

 

WeChat開発ツール画面2

画面上に「画面サイズ」「通信環境」など設定するメニューがあり、通信環境が悪い場合の動作テストなどもできそうです(未確認)。

スマホ側でも動作テスト可能

当然といえば当然ですが、スマホ側でも動作テストが可能です。手順は下記になります。

WeChat開発ツールスマホテスト

・画面上メニューの「Preview」(目のアイコン)をクリック
・「Scan QR Code With WeChat」を選択
・QRコードが表示されるのでWeChatのQRスキャンで読み取り

 

スマホで無事に動作確認ができました。

画面右側はソースコード編集画面

WeChat開発ツール4

右側はソースコードのファイルツリー&エディタ画面です。デバッグ機能などいろいろありそうなんですが、まだ細かく確認できてないので別途記事にできればと思います。

まとめ

以上、WeChatミニプログラムの開発ツールのインストール手順について解説しました。引き続きミニプログラムの開発方法についても記事にまとめていきたいと思います。