全ての記事

WeChat Mini-Program開発 1 - 準備

2018-03-04 @sunderls

wechat mini-program

みんさん、WeChatってご存知ですか。

簡単にいうと中国でのLINEですね。一年前の2016年下旬、WeChatはMini-Program(小程序 シャオ チャン シュ )ってプラットフォームを公開しました。

当時私はレビューを書いてましたー「wechat「小程序」について」、 個人的な感想をまとめると:

  1. 開発者にはある程度いいか、よくはない
  2. 小さいアプリでは試す価値があり、ちゃんとしたアプリでは完全にnativeで作ったほうが良いかと

今も同じ観点を持っています。が、「小さいアプリ」を作るきっかけになって、まさに自分がMini-Programを本気で始めました。

ここ開発手順や会った問題とかもシリーズとして残します。

なぜ react-nativeにしない?

確かに最近React-Nativeを使ってNative Appを出しました。記事シリーすはこちら

でも今回のアプリをMini-Programにした理由があります

  1. React-Nativeでも開発コストが割と大きい、色々問題がある。いまだにAndroid対応してなくて、mini-programにしたら省ける。
  2. 今回作るのは小さいアプリで、プロトタイプとも言えるので、わざわざNative Appにしなくても良いかと
  3. Social Graphが欲しい、Native Appを出すと、集客には大変になる。そもそもSocial Graph向けのアプリなので、Mini-Programが最適
  4. ユーザーが増えたらNative Appに誘導するのも可能

まずはアカウント作成

スタートガイドに書いてる通り、 まず新規のMini-Programを登録しておく必要がある。

登録リンクは>こちら

そこにメールアドレスとパスワードを設定したら、仮登録のメールがくるはず、そこのリンクを踏めば本格の登録が始まる。

タイプを「個人」にする

もし企業だったら「企業」にすればいいですが、自分は個人にしました

個人にするため:

  1. 中国身分証IDが必要:「個人」オプションは中国だけ公開してる
  2. 中国電話番号が必要:これは認証コードとか受けるためのもの
  3. 中国の銀行アカウントと連携してるWeChatアカウントが必要:めんどくさいけど、身分を証明するためですね。

もし身分証とかなければ、企業オプションで通すのもいい気がする。

Mini-Programを一個作る

以上の手順が通ったら、Mini-Programの本気開発ができる。

一つのアカウントでは一つのMini-Programしか持つことができないので、ちゃんと名前とか決めましょう。

  1. アプリの名前は正式公開するまで二回変更できる。公開したら年に二回公開できるので、乱れに名前をつけることは避けましょう。
  2. アプリのアイコン公開するまで二回変更できる。公開したら月に5回更新できる。

作り終わったら、詳細ページではApp IDが得られる。

開発IDEをダウンロードする

ここに開発ツールをダウンロードする。

インストールして開いたら

二つのオプションがありまして:

  1. Mini-Programの開発
  2. OA-Accountのデバッグ

このIDEはMini-Program専用ではないです。早速左のボタンを押しましょう。

新規プロジェクトを作る。

先できたMini Programe App IDを入力して、テンプレートのチェックボックスを入れて、「確定」押すとローカルのプロジェクトが作成されます。

前よりちゃんとできてるIDEですね、みるとわかるが、Chrome DevToolを利用してる。

ソースフォールダーを開いたら、そちらにページが二つありますね。トップとLogs

トップページの構成はこんな感じ:

  1. index.js => js(logic)
  2. index.wxml => html(template)
  3. index.wxss => css(style)

早速いじりましょう、トップページに表示してる{{moto}}初めてのMini-Programにしましょう。

motoindex.jsのstateに管理されてますので、そっちをいじる

Page({
  data: {
    motto: '初めてのMini-Program'
  }
});

saveしたら、自動的に更新され、文言も変わりました。

よかった!今日はここまで、次回を楽しみに!