微信 on MoeJue's Blog

ミニプログラムアーキテクチャ

Fri, 17 May 2019 06:59:47 +0000

皆さんがミニプログラムをどのように書いているかは分かりませんが、数ヶ月前にWeChatミニプログラムを書いていた時、自分で考えたアーキテクチャ、あるいはフレームワークと呼べるものがあります。 WeChatネイティブのアーキテクチャは次のようになっています。

├── app.js ├── app.json ├── app.wxss ├── pages │ │── index │ │ ├── index.wxml │ │ ├── index.js │ │ ├── index.json │ │ └── index.wxss │ └── logs │ ├── logs.wxml │ └── logs.js └── utils

なぜWeChatネイティブの書き方を使わないのか？ミニプログラムはスマホアプリに似ていて、tabBarがありますよね。WeChat公式のtabBarはapp.jsonでグローバルに設定されます。一般的な開発では何の問題もありませんが、複雑なtabBarを実装する場合、公式のネイティブな方法では実現できず、動的に読み込むこともできません。例えば、ある動画アプリの中央にある撮影・録画機能のようなものです。これは、公式が提供するtabBarを使えず、自作する必要があることを意味します。最初の私のアプローチは、ネイティブの構造を維持しつつ、tabBarだけを自作するというものでした。そのため、ページのコードはすべて1つのファイルに書き、デフォルトで最初の画面を表示し、他は非表示にします。ページを切り替える際に、対応するページを表示し、他を非表示にして、データを動的にレンダリングします。しかし、これには問題がありました。小規模なプロジェクトなら大した問題はありませんが、大規模なプロジェクトでコード量が膨大になると、すべてを1つのファイルに書くのは後のメンテナンスが困難になります。そのため、この方法は最終的に却下されました。

その後、ページの切り替え方法を（wx.switchTabなどを使った）画面遷移に変更し、異なるページのコードを別々のファイルに分けました。しかし、まだ問題がありました。切り替え時に画面がちらつくのです。ページを切り替えるたびに、まるで新しいウェブページを開くかのように、tabBarが再レンダリングされるため、ちらつきが発生します。これも却下です。

そこで、現在の全く新しいアーキテクチャ方式が生まれました： /pages/index/以下のファイルをすべてエントリーファイル（JSエントリー、CSSエントリー、ビューエントリー）として定義します。異なるページのファイルは、管理しやすいように、やはり別の場所に置きます。新しくtemplateというフォルダを作成し、異なるページ間のコードを格納します。その構造は公式の単一ページの構造と同じです。ルートディレクトリのapp.jsはグローバル関数を格納するために使用し、他のページからはgetApp()で呼び出すだけです。 JSのエントリーファイル

const app = getApp();
var index_js = require("../../template/index/index.js");
var types_js = require("../../template/types/types.js");
var Global_Data = [];
Page({
    data: {
        active: 0,
        show: {
            index: true,
            types: false,
            course: false,
            user: false
        }
    },

    onLoad(options) {
        this.setData({
            Global_Data: index_js.getData()
        })
    },

    // 下部ナビゲーションの切り替え
    tabbar_onChange(event) {
        var key = '';
        this.data.show = {
            index: false,
            types: false,
            course: false,
            user: false
        };
        console.log(event)
        switch (event.detail) {
            case 0:
                key = 'index';
                Global_Data = index_js.getData();
                break;
            case 1:
                key = 'types';
                Global_Data = types_js.getData()
                break;
            case 2:
                key = 'course';
                Global_Data = index_js.getData();
                break;
            case 3:
                key = 'user';
                Global_Data = index_js.getData();
                break;
        }
        this.data.show[key] = true;
        console.log(Global_Data)
        this.setData({
            show: this.data.show,
            Global_Data: Global_Data
        })
    },
});

wxmlエントリーファイル

WeChatでログイン

Fri, 05 Apr 2019 09:29:45 +0000

ドキュメント：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421135319

WeChatの認証ログインは、QQやSinaなどのプラットフォームの認証ログインとほぼ同じで、いずれもOAuth2.0認証方式を採用しています。
WeChatの認証は2種類に分かれています：

サイレント認証
ポップアップ認証、ユーザーの手動同意が必要

2種類のscopeの違いについて

snsapi_baseをscopeとして開始されるウェブ認証は、ページにアクセスしたユーザーのopenidを取得するためのもので、サイレント認証であり、自動的にコールバックページにリダイレクトされます。ユーザーは直接コールバックページ（通常は業務ページ）にアクセスしたように感じます。
snsapi_userinfoをscopeとして開始されるウェブ認証は、ユーザーの基本情報を取得するためのものです。この認証はユーザーの手動同意が必要ですが、一度同意すれば、公式アカウントをフォローしていなくても、認証後にそのユーザーの基本情報を取得できます。

ユーザー管理関連のAPIにおける「ユーザー基本情報取得API」は、ユーザーが公式アカウントとメッセージのやり取りをするか、フォローした後のイベントプッシュがあって初めて、ユーザーのOpenIDに基づいて基本情報を取得できます。このAPIを含む他のWeChat APIは、すべて対象ユーザー（openid）が公式アカウントをフォローしている場合にのみ、正常に呼び出すことができます。

具体的には、ウェブ認証のフローは4つのステップに分かれています：

ユーザーを認証ページに誘導し、同意を得てcodeを取得する
codeを使用してウェブ認証用のaccess_tokenを取得する（基本サポートのaccess_tokenとは異なる）
必要に応じて、開発者はウェブ認証用のaccess_tokenを更新し、期限切れを回避する
ウェブ認証用のaccess_tokenとopenidを使用してユーザーの基本情報を取得する（UnionIDメカニズムをサポート）

以下はカプセル化されたWeChat操作クラスです。access_tokenとticketを保存するために2つのデータテーブルを使用します。これらには有効期限があり、1日あたりのリクエスト数に上限があるため、開発者は自身で保存する必要があります。

<?php
/**
*   WeChat操作テーブル
*   wxtoken テーブル構造
*   id
*   access_token
*   addtime
*   wxticket テーブル構造
*   id
*   ticket
*   addtime
*/
class WX {
	private $appid;
	private $appserect;
	private $curl;
	private $msg;
	protected $errs = array(
		'-1' => 'システムがビジーです。開発者はしばらくしてから再試行してください',
		'0' => 'リクエスト成功',
		'40001' => 'AppSecretが間違っているか、この公式アカウントのものではありません。開発者はAppSecretが正しいことを確認してください',
		'40002' => 'grant_typeフィールドの値がclient_credentialであることを確認してください',
		'40164' => 'APIを呼び出したIPアドレスがホワイトリストにありません。APIのIPホワイトリストで設定してください。',
	);
	function __construct($appid, $appserect) {
		$this->appid = $appid;
		$this->appserect = $appserect;
		$this->curl = new Curl();
	}
	/*
	WeChatウェブ認証ログイン 公式アカウント設定 - 機能設定 - ウェブ認証ドメインでの設定が必要
	第一歩：ユーザーが認証に同意し、codeを取得
	scope : snsapi_base openidのみ取得可能、直接リダイレクト
	snsapi_userinfo
	*/
	public function getCode($redirect_uri, $scope = 'snsapi_userinfo',$state = '1') {
		$url = "https://open.weixin.qq.com/connect/oauth2/authorize?appid={$this->appid}&redirect_uri={$redirect_uri}&response_type=code&scope={$scope}&state={$state}#wechat_redirect";
		header("Location:{$url}");
		exit;
	}
	/*
	第二歩：codeを使用してウェブ認証用のaccess_tokenを取得
	*/
	public function getAccessTokenByCode($code) {
		$url = "https://api.weixin.qq.com/sns/oauth2/access_token?appid={$this->appid}&secret={$this->appserect}&code={$code}&grant_type=authorization_code";
		// exit($url);
		// $curl = new Curl();
		$result = $this->curl->doGet($url);
		if (!$result) {
			// $this->curl->getError()
			$this->msg = "トークンの取得に失敗しました";
			return false;
		}
		$result = json_decode($result, true);
		if ($result['errcode']) {
			$this->msg = $result['errmsg'];
			return false;
		}
		return $result;
	}
	// 第三歩：access_tokenを更新（必要な場合） code経由でopenidを取得 $type 0サイレント認証 1ポップアップ認証
	public function getUserInfo($code, $type = 0, $lang = 'zh_CN ') {
		$result = $this->getAccessTokenByCode($code);
			if (!$result) {
			return false;
		}
		$member = C::t(PT_USER)->getByOpenid($result['openid']);
	if ($member) {
		return $member;
	} else {
		if ($type) {
			$url = "https://api.weixin.qq.com/sns/userinfo?access_token={$result['access_token']}&openid={$result['openid']}&lang={$lang}";
			// $return = $this->curl->doGet($url);
			// このAPIは挙動がおかしく、強制的にファイルヘッダーを表示します
			$return = file_get_contents($url);
			if (!$return) {
				$this->msg = 'ユーザー情報の取得に失敗しました';
				return false;
			}
			$return = json_decode($return, true);
			if (!$return) {
				$this->msg = 'ユーザー情報の取得リターンに失敗しました';
				return false;
			}
			// file_put_contents('ccc.txt',print_r($return,true),FILE_APPEND);
			$data = array(
				'openid' => $return['openid'],
				'name' => $return['nickname'],
				'sex' => $return['sex'],
				'province' => $return['province'],
				'city' => $return['city'],
				'country' => $return['country'],
				'img' => $return['headimgurl'],
				'bindtel' => 0,
			);
		} else {
			$data = array(
				'openid' => $result['openid'],
				'username' => "WeChatユーザー_" . random(6,1)
			);
		}
		$name = rand(100000, 1000000000);
		$e = $name . "@qq.com";
		$password = $e;
		$id = UserAddEdit(0, $data['username'], $password, $e,10,0,"", $msg);
		if ($id <= 0) {
			$this->msg = $msg;
			return false;
		}
		C::t(PT_USER)->update($data, $id);
		$member = C::t(PT_USER)->get($id);
		return $member;
		}
	}
	/*
	公式アカウント セキュリティセンターでIPホワイトリストを設定
	公式アカウントのグローバルでユニークなAPI呼び出し資格情報。公式アカウントが各APIを呼び出す際にはaccess_tokenを使用する必要があります。開発者は適切に保存する必要があります。access_tokenの保存には少なくとも512文字のスペースを確保してください。access_tokenの有効期間は現在2時間で、定期的に更新する必要があります。重複して取得すると、前回取得したaccess_tokenが無効になります。
	*/
	public function getAccessToken($type) {
		$addtime = TIMESTAMP - 7200;
		$url = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={$this->appid}&secret={$this->appserect}";
		$row = C::t(PT_WXTOKEN)->getNew($addtime, $type);
		if ($row) {
			return $row['access_token'];
		} else {
			$result = $this->curl->doGet($url);
			if (!$result) {
				$this->msg = "トークンコンテンツを取得できません";
				return false;
			}
			$result = json_decode($result, true);
			if (!$result) {
				$this->msg = "トークンコンテンツの解析に失敗しました";
				return false;
			}
			if ($result['access_token']) {
				C::t(PT_WXTOKEN)->addToken($result['access_token'], $type);
				return $result['access_token'];
			} else {
				$this->msg = "トークンの取得に失敗しました";
				return false;
			}
		}
	}
	// JSチケットを取得 公式アカウント設定 - 機能設定 - JSインターフェースセキュアドメインでの設定が必要
	public function getJsTicket() {
		$addtime = TIMESTAMP - 7200;
		$row = C::t(PT_WXTICKET)->getNew($addtime);
		if ($row) {
			return $row['ticket'];
		} else {
			$token = $this->getAccessToken();
			if (!$token) {
				return false;
			}
			$url = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token={$token}&type=jsapi";
			$result = $this->curl->doGet($url);
			if (!$result) {
				$this->msg = "JSチケットを取得できません";
				return false;
			}
			$result = json_decode($result, true);
			if (!$result) {
				$this->msg = "JSチケットコンテンツの解析に失敗しました";
				return false;
			}
			if ($result['ticket']) {
				C::t(PT_WXTICKET)->addTicket($result['ticket']);
				return $result['ticket'];
			} else {
				$this->msg = "JSチケットの取得に失敗しました";
				return false;
			}
		}
	}
	// js sdk チケット署名 現在のウェブページのURL、#およびそれ以降の部分は含まない
	public function jsSign($data) {
		// 1.署名対象のすべてのパラメータをフィールド名のASCIIコード順（辞書順）でソートする
		ksort($data);
		// 2.URLキー・バリューペアの形式（つまりkey1=value1&key2=value2…）で文字列string1に連結する。元の値を使用し、URLエンコードは行わない
		$string1 = $this->ToUrlParams($data);
		// echo "string1:{$string1}<br/>";
		// 3.string1をsha1で暗号化する
		$sign = sha1($string1);
		// echo "signature:{$sign}<br/>";
		return $sign;
	}
	// メッセージ内容を取得
	public function getMsg() {
		return $this->msg;
	}
	/**
	* パラメータをURLパラメータ形式にフォーマットする
	*/
	public function ToUrlParams($data) {
		$buff = "";
		foreach ($data as $k => $v) {
			if ($k != "sign" && $v != "" && !is_array($v)) {
				$buff .= $k . "=" . $v . "&";
			}
		}
		$buff = trim($buff, "&");
		return $buff;
	}
}
?>

// WeChatログイン
function wxlogin() {
	global $_G,$identifier,$config,$wx;
	if (!$_G['uid']) {
		if ($_GET['state']) {
			//コールバック
			$member = $wx->getUserInfo($_GET['code']);
			if (!$member) {
				exit($wx->getMsg());
			}
			if (!function_exists("setloginstatus")) {
				include_once libfile('function/member');
			}
			// ログイン状態を設定$wx
			setloginstatus($member, 2592000);
			checkfollowfeed();
			$_G['uid'] = $member['uid'];
			$_G['member'] = $member;
		} else {
			//認証をリクエスト パラメータをエンコード
			$redirect = urlencode(getProtocol() . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']);
			$wx->getCode($redirect, 'snsapi_base');
		}
	}
}
function getProtocol() {
	return is_HTTPS() ? 'https://' : 'http://';
}
function is_HTTPS() {  if ($_SERVER['HTTPS'] === 1 || $_SERVER['HTTPS'] === 'on' || $_SERVER['SERVER_PORT'] == 443) {
		return true;
	}
	return false;
}

WeChat JSAPI 決済

Sat, 30 Mar 2019 09:30:21 +0000

以前からWeChat関連の業務を行っていましたが、新しい技術ではないものの、これまで触れる機会がなく、いくつかの落とし穴にはまりました。そこで、時間を取って整理し、記録しておきます。 WeChat Payは全部で7種類あり、それぞれ：支払いコード決済、JSAPI決済、Native決済、APP決済、H5決済、ミニプログラム決済、顔認証決済です。今回の業務で使用したのはWeChat JSAPI決済です。ユーザーがWeChatスキャン、公式アカウントのフォローなどの方法で販売者のH5ページに入り、WeChat内でJSSDKを呼び出して支払いを完了します。

ドキュメント：https://pay.weixin.qq.com/wiki/doc/api/index.html

SDK：[https://pay.weixin.qq.com/wiki/doc/api/micropay.php?chapter=11_1

](https://pay.weixin.qq.com/wiki/doc/api/micropay.php?chapter=11_1)JSAPI決済は、WeChat内のブラウザで開くことでWeChat Payを起動できます。効果は以下の図の通りです。インターフェースコードを添付します。コードではテンプレートエンジンを使用しています。 html：

JavaScript：

// 投票 var offset = {$activity[‘offset’]}; $(’#tips’).html(‘正在给{$competition[‘code’]}号赠送{$prices[0]}钻=’+({$prices[0]}*offset)+‘票’); $(’#vote’).click(function(){ $.post(’/index/index/detailed.html?cid={$cid}&aid={$aid}’,{ formhash :’{FORMHASH}’, submit:‘1’, type:1, openid:’{$_G[‘member’][‘openid’]}’ },function(res){ alert(res.msg); if (res.code == 0) { $(’.box-1 span’).text(res.data.all); $(’.box-2 span’).text(res.data.rank); $(’.box-3 span’).text(res.data.up + ‘票’); } }); }) /* jQuery对象级别プラグイン拡張 */ $.fn.extend({ /* 単選框 */ hlRadio:function () { var radioEl=$(this); radioEl.click(function () { var price = 0; price = $(‘input:radio:checked’).val(); $(’#price’).val(’’); $(’#tips’).html(‘正在给{$competition[‘code’]}号赠送’+price+‘钻=’+(price*offset)+‘票’); radioEl.siblings(“div”).removeClass(“active”); $(this).siblings(“div”).addClass(“active”); }); }, }); $(“input[name=‘price’]”).hlRadio(); $(’#price’).bind(‘input propertychange’, function(){ var price = 0; price = $(’#price’).val(); $(’#tips’).html(‘正在给{$competition[‘code’]}号赠送’+price+‘钻=’+(price*offset)+‘票’); })