Uniapp公式アカウントのワンタイムサブスクリプションメッセージ（フロントエンドコードとバックエンドコードを含む）

リマインダー: uniapp を 1 回限りのパブリックアカウントサブスクリプションメッセージとして使用する場合、最初に思い浮かぶのは、WeChat オープンドキュメント (https://developers.weixin.qq.com/doc/offiaccount/Message_Management/One-) を表示することです。 time_subscription_info.html) を作成し、インターネットで関連情報を検索すると、簡単な小さな機能のように感じますが、2 ～ 3 日かけて実行しました。フロントエンドとバックエンドの両方を実行したので、記録します。ネチズンの参考記事ですが、記事の途中で私が遭遇した落とし穴がいくつかありますが、これは本当にやりすぎで、詐欺です。

アプリケーションシナリオ

開発者は、WeChat ユーザーが 1 回限りのサブスクリプションメッセージ認証を通じてサードパーティのモバイルアプリケーション (アクセス手順) または公式アカウントを認証できるようにし、承認された WeChat ユーザーに 1 つのサブスクリプションメッセージを送信する機会を得ることができます。認定された WeChat ユーザーは公式アカウントをフォローする必要はありません。WeChat ユーザーが認証するたびに、開発者はメッセージを 1 回送信する権限を取得できます。(注: 同じシーン値で同じユーザーが複数の権限を付与しても発行権限は累積されず、発行できるのは 1 つだけです。複数のアイテムをサブスクライブするには、異なるシーンのシーン値が必要です)

メッセージ送信先のご案内：公式アカウントをフォローしている方は公式アカウントセッションへ、公式アカウントをフォローしていない方はサービス通知へメッセージが送信されます。

公式アカウントまたは Web ページは 1 回限りのサブスクリプションメッセージプロセスを使用し、次の 2 つの部分に分かれています。

ユーザー認証 (フロントエンド)
メッセージの送信 (バックエンド)

実際の動作とコード

WeChat公式アカウントがメッセージを購読する権限を持っていることを前提として（認証された公式アカウントには権限があり、公式プラットフォームにログインしてインターフェース権限リストを表示できます）、ユーザーに次のリンクを開くように誘導します。 WeChat クライアントの場合:

https://mp.weixin.qq.com/mp/subscribemsg?action=get_confirm&appid=wxaba38c7f163da69b&scene=1000&template_id=1uDxHNXwYQfBmXOfPJcjAS3FynHArD8aWMEFNRGSbCc&redirect_url=http%3a%2f%2fsupport.qq.com&reserved=test#wechat_redirect

まずはフロントエンドのコードを見てみましょう。

auth() {
    
    
				let redirect_url = encodeURIComponent("用户同意接收后跳转的地址，注意需要加到公众号后台业务域名里边");
				let appId = 'appId自己替换哦';
				let scene = 1000（可以自己随便定义）;
				let template_id = '申请的订阅消息模板id，也需要注意不是在订阅通知里看模板id，是在接口权限里的一次性订阅消息那看模板id';
				window.location.href =
					`https://mp.weixin.qq.com/mp/subscribemsg?action=get_confirm&appid=${
    
    appId}&scene=${
    
    scene}&template_id=${
    
    template_id}&redirect_url=${
    
    redirect_url}#wechat_redirect`;
			},

次に、リダイレクトされたページでパラメーター (おそらくパラメーター) を受け取ります。openid=OPENID&template_id=TEMPLATE_ID&action=ACTION&scene=SCENE
パラメータはここで取得し、バックグラウンドで保存できます。これは、さまざまなテンプレートのサブスクリプションメッセージに適しています。

if (options) {
    
    
            const {
    
    
                openid,
                action,
                scene
            } = options;
			this.$request(this.$api.Weike.subscribe, {
    
    
               openid: openid,
               action:action,
               scene:scene
             }).then(res => {
    
    
                //授权成功的处理
                 uni.showToast({
    
    
                    title: res.data.msg,
                    icon: 'none'
                 });
             });
        }

バックグラウンドコードは次のとおりです。
WeChatMsgParam は管理に便利な私が作成したエンティティクラスです。

@Data
@Builder
@NoArgsConstructor
@AllArgsConstructor
public class WeChatMsgParam {
    
    
    private String userId;
    private String pubopenId;	//	用户的openid
    private Integer bidTotal; //发送消息的参数，根据需求自己改
    private Integer callTotal;//发送消息的参数，根据需求自己改
}

次にメッセージを送ります

public void sendWxMpTemplateMessage(WeChatMsgParam weChatMsgParam) {
    
    
        RestTemplate restTemplate = new RestTemplate();
        String url = "https://api.weixin.qq.com/cgi-bin/message/template/subscribe?access_token=" + redisUtil.get("access_token");
        String templateId = "xxx";
        com.alibaba.fastjson.JSONObject jsonObject = new com.alibaba.fastjson.JSONObject();
        jsonObject.put("touser", weChatMsgParam.getPubopenId());
        jsonObject.put("template_id", templateId);
        jsonObject.put("title", "xxx");
        jsonObject.put("scene", "1000");

        Map<String, Map> data = new HashMap<>();
        Map<String, String> first = new HashMap<>();
        first.put("value", "信息："+weChatMsgParam.getBidTotal()+"条\n"+"信息："+weChatMsgParam.getCallTotal()+"条");
        first.put("color", "#000000");
        data.put("content", first);
        jsonObject.put("data", data);

        ResponseEntity<String> responseEntity =
                restTemplate.postForEntity(url, jsonObject, String.class);
        System.out.println(responseEntity.getBody());
    }

タイハン

これで終わりですので、以下にまとめてみましょう。

フロントエンドは、redirect_url パラメータであるリダイレクトアドレスに関するものです。ドキュメントで説明されている UrlEncode を使用すると、エラーが報告されます。結合された URL が # などの特殊文字で切り捨てられないように、encodeURIComponent を使用する必要があります。エラーは、vue がこのメソッドをサポートしていないか、バージョンに互換性がないことが考えられます。
redirect_url は、パスを付けずにバックグラウンドでビジネスドメイン名に追加する必要があります
一日中私を苦しめたもう 1 つの大きな落とし穴は、フロントエンドがハッシュモードに注意を払うことです。パラメータが間違って結合され、パラメータを認識できません。転送された URL を処理して対応するパラメータを取得するか、履歴モードを使用できます。何も必要はありません。十分です
バックグラウンドでメッセージを送信するときに 43101 が返された場合は、ユーザーがメッセージを購読していないか、送信したパラメーターに問題がある可能性があります。慎重に確認してください。最後に、テンプレートメッセージが私によって承認された場合、メッセージを購読するために公式アカウントを使用したくないです

実行結果

ここに画像の説明を挿入