著作権に関する声明: この記事はブロガーのオリジナル記事であり、CC 4.0 BY-SA 著作権契約に従い、転載する場合は元のソースリンクとこの声明を添付してください。
この記事へのリンク: https://blog.csdn.net/qq_44718932/article/details/126130702
uniapp WeChat アプレット サブスクリプション メッセージ送信サービス通知
会社のニーズにより、小規模プログラムの学習が終了したばかりで、ライブ通知用の WeChat 小規模プログラムの開発を依頼されました。Vue を学習した後、uniapp を使用して開発することにしました。wx のネイティブ文法を学習した後はほとんど忘れていました。uniapp を使用してコードを作成する過程で多くの問題に遭遇しましたが、このブログを通じて全体的な実装アイデアといくつかの小さな落とし穴を共有します。ブログ全体では、プロセス全体と独自のリクエスト メソッドの作成方法を完全に理解できるように、段階的なアプローチを採用しています。最終的な効果を達成するには、段階的に実行してください。
実装アイデア:
まず、この要件を実現する最も直接的な方法は、wx の公式ドキュメントで関連ドキュメントと API の概要を検索し、wx アプレットの公式ドキュメントでサブスクリプション ニュースを検索して、アプレット
購読メッセージは次のタイプに分類できます。
1. 一次性订阅消息
ワンタイム購読メッセージは、ユーザーがミニプログラムを使用した後のフォローアップサービスリンクの通知問題を解決するために使用されます。ユーザーが個別に購読した後、開発者は対応するサービス メッセージを無制限に送信でき、各メッセージは個別に購読または購読解除できます。
- 長期購読のお知らせ
メッセージの 1 回限りのサブスクリプションは、ミニ プログラムのほとんどのサービス シナリオのニーズを満たすことができますが、オフラインの公共サービスの分野には、飛行機の遅延など、1 回限りのサブスクリプションでは満たせないシナリオがあり、複数の通知を送信する必要があります。フライトのリアルタイムの状況に応じて送信されます。サービスを容易にするために、長期購読メッセージを提供しており、ユーザーが一度購読すると、開発者は長期間にわたって複数のメッセージを送信できます。
現在、長期購読ニュースは政務・民生、医療、交通、金融、教育などのオフライン公共サービスのみに提供されており、将来的には他のオフライン公共サービス事業にも順次対応していく予定だ。
- デバイスのサブスクリプションメッセージ
デバイス サブスクリプション メッセージは特別なタイプのサブスクリプション メッセージで、長期サブスクリプション メッセージ タイプに属し、使用する前に「デバイス アクセス」を完了する必要があります。
デバイス サブスクリプション メッセージは、デバイスが手動介入を必要とする特定のイベント (デバイスの障害、機器の供給不足など) をトリガーしたときに、ユーザーにメッセージ通知を送信するために使用されます。詳細については、「デバイス サブスクリプション メッセージのドキュメント」を参照してください。
ここでは、自分のニーズに応じて選択できますが、通常は 1 回限りの購読メッセージです。公式 Web サイトのドキュメントによると、詳細について補足します。
実装手順:
1. テンプレート ID を取得する
WeChat パブリック プラットフォームでテンプレート ID を手動で設定して取得します:
https://mp.weixin.qq.com にログインし、関数モジュール、ニュースを購読し、テンプレートの [選択] をクリックしてテンプレートを選択します
。テンプレートの追加を申請できます 審査通過後に利用可能 使用する
基本テンプレートを選択できます 申請完了後、マイテンプレートで申請したテンプレートが確認できます 詳細をクリックしてテンプレートの詳細ビューに入ります。
クリックして選択してパブリック テンプレート ライブラリに入り、テンプレートを検索します。イベント開始リマインダー、クリックして選択してテンプレートの選択に入り、最大 5 つの通知コンテンツを選択します。ここではすべてパーソナライズされていません設定は、今後提供されるフィールドに従ってのみ行われます。パーソナライズされたデザインが必要な場合は、それをクリックします。「適用」をクリックします。応募する。選択後、「送信」をクリックして
テンプレートの構成ページに入り、申請したばかりのテンプレートの右側にある詳細をクリックして、フレームのこの部分に注目してください。これは後でパラメータを設定するための重要なキーになります。
2. 配布許可を取得する
上で紹介した WeChat 公式ドキュメントでは、手順は私と同じで、詳細ページにアクセスして詳細な手順を表示できます。インターフェースのコールバックパラメータに対応する情報、サンプルコードはwxネイティブコードです。ここでは例としてuniappを使用します。このドキュメントでは、ポップアップ ウィンドウを開始するためのリクエスト メソッドは ですwx.requestSubscribeMessage(Object object)。このメソッドは uni: で検索されますuni.requestSubscribeMessage(Object object)。これはまったく同じですが、呼び出される最上位オブジェクトが異なります。
methods:{
Subscribe(){
uni.requestSubscribeMessage({
//此处填写刚才申请模板的模板ID
tmplIds: ['ZcsAH2vJKgKocfQw8e2Phhz-8FzPQgfT_5ehxwic4ck'],
success (res) {
console.log(res)
}
})
}
}
このメソッドをメソッド内で定義すると、クリック イベントをバインドすることでテストとして使用できます。
開発者ツールでのデバッグの効果は実機でのデバッグとは異なります。実際の効果は実機でのデバッグ時のみです。res を出力することで確認できます。accept は同意することを意味し、reject は拒否することを意味し
ます
3. インターフェイスを呼び出してサブスクリプション メッセージを送信します
2 番目のステップは、ユーザーの承認されたサブスクリプションを取得することです。ユーザーに購読メッセージを送信できるようにします。3 番目のステップは、WeChat サーバーにリクエストを送信し、 WeChat を通じて特定のユーザーにサービス通知を送信し、詳細なリクエスト パラメーターについては WeChat の公式ドキュメントを参照してください。ここでは例として uniapp を使用します。
请求地址：POST https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=ACCESS_TOKENドキュメントを見ると、パラメーターが 4 つある必要があることがわかります。ここでの 4 つのパラメーターは注意深く見る必要があります。書類にはこの4つを記入する必要があるとだけ書かれており、取得方法については段階的に取得する必要があります。
3.1、アクセストークン：
appidここでは、wx のインターフェースにリクエストを送信する必要があります。とを渡す必要がありますsecret。このステップは、2 時間有効な access_token を取得するために使用されます。get_wx_access_token() { return uni.request({ method: 'get', // appip和secret需要去小程序管理界面查看 url: `https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${ appid}&secret=${ secret}`, dataType: 'json', timeout: 30000 }).then(res => { let [err, success] = res if (success.statusCode == 200) { return success.data.access_token } }) }
アプレット キーを忘れた場合は、[リセット] をクリックして、忘れずに保存してください。
PS: ここでのトークン取得リクエストはバックエンドで行うことをお勧めします。そうしないと、シークレットがフロントエンドで設定され、オンライン送信はマークされたリスクによって拒否されます。
3.2 ユーザー
touser パラメータは、サブスクリプション メッセージを受信する必要があるユーザー ID です。ユーザー ID を取得するには、まずログインしてユーザーのコードを取得し、次にそのコードを使用してユーザー ID を取得する必要があります。
// 先让用户登录，此user_login方法可以放到onLoad()生命周期中去执行
// 此处async和await异步操作不懂可以先百度，问题不大
async user_login() {
let self = this
await uni.login({
success(res) {
if (res.code) {
self.code = res.code
} else {
console.log('获取失败！' + res.errMsg)
}
}
})
},
ユーザーのログイン情報を取得すると、res.code がユーザーのコードになります。次に、openid を取得するリクエストを WeChat バックエンドに送信します。ここでの openid を取得するリクエストでもシークレットを使用する必要があるため、このリクエストをバックエンドに置くことをお勧めします。uniで取得したコードを貼り付けます
// wxappid wxsecret为小程序的appId和secretKey，登录小程序后台可查看，code就是user_login的那个code
uni.request({
url: `https://api.weixin.qq.com/sns/jscode2session?appid=${
wxappid}&secret=${
wxsecret}&js_code=${
code}&grant_type=authorization_code`,
success(data) {
self.useropenId = data.data.openid
}
})
ドキュメント:
現時点では useropenId が取得されており、この値を touser に渡す必要があります。
3.3、テンプレートID
この値はテンプレート ID です。文字列を直接渡すのと同じように、値を渡すコードを以下に記述します。
3.4、データ
データの値は最初にテンプレートを申請したときの私の額縁の部分を使用する必要があります。自分で他のテンプレートを申請する場合は、キーを渡す順序に注意する必要があります。データは渡されます。 Json 形式。Json キーはテンプレート内のキーです。
最後に、購読メッセージを送信します
notice() {
let self = this
//下方的thing1，thing2和其他，对应的是你选取模板的模板详情中的字段名称(可在小程序后台模板查看对应的字段，要和上面的字段一样)，需要更改成你自己的
const pushmsg = {
"touser": self.useropenId,
"template_id": "ZcsAH2vJKgKocfQw8e2Phhz-8FzPQgfT_5ehxwic4ck",
"data": {
"thing1": {
"value": "今天记得写代码"
},
"date2": {
"value": "19:00"
},
"time3": {
"value": "20:00"
},
"thing4": {
"value": "今天写堆排序把"
},
"time7": {
"value": "18:50"
}
}
}
uni.request({
// 此处的mytoken
url: 'https://api.weixin.qq.com/cgi-bin/message/subscribe/send?access_token=' + this.get_wx_access_token(),
data: JSON.stringify(pushmsg),
method: 'POST',
success: function(res) {
// console.log('success');
}
})
},
上記は、WeChat アプレットからサービス通知を送信する全プロセスです。最後に、メソッドは死んでいますが、人は生きています。実際、主要なステップは 3 つのステップであり、前述の 3 つのステップです。 WeChat の公式ドキュメントに記載されていますが、各ステップで必要な情報が他にもありますが、ドキュメントには記載されていないため、自分で見つける必要があります。おそらく他の経験があるかもしれませんが、この要件を達成するためにドキュメントを確認するのは非常に簡単です。このブログのほうがシャオバイに優しいかも知れません。個々のステップとリクエストは、ビルディングブロックのように分離して自分でメソッドを定義できます。各コアコンポーネントについて説明しましたが、それをどのように組み合わせるかはあなた次第ですが、前提として、まず openid を取得し、次にユーザーはポップアップ ウィンドウをクリックして統合を承認し、次にトークンを取得し、最後にそれらを組み合わせてリクエストを送信し、テンプレートのサブスクリプションを実現します。このことの実現は完全に多くの知識ポイントをまとめたものであるため、それぞれをテストし、戻り値を確認し、各操作の意味を理解し、最終的に重要な部分をバックエンドに配置することができます。
私の実装アイデアは次のとおりです:
フロントエンド:
onLoad() フェーズで user_login を実行してユーザーのコードを取得し、
予約ボタンをクリックして uni.requestSubscribeMessage ポップアップ ウィンドウをポップアップし
、ポップアップが成功した後に戻り値を判断します。コード
バックエンド:
openid を取得するリクエストを送信し、
token を取得するリクエストを送信し
、最後に openid、token、ハードコーディングされた template_id とデータを使用してサービス通知を送信します。
役に立ったと思ったら、「いいね！」をクリックして 5,000 文字近く書いてください。わからないことや質問がある場合は、コメントしてください。返信を見ました。
uniapp WeChat アプレット サブスクリプション メッセージ送信サービス通知
会社のニーズにより、小規模プログラムの学習が終了したばかりで、ライブ通知用の WeChat 小規模プログラムの開発を依頼されました。Vue を学習した後、uniapp を使用して開発することにしました。wx のネイティブ文法を学習した後はほとんど忘れていました。uniapp を使用してコードを作成する過程で多くの問題に遭遇しましたが、このブログを通じて全体的な実装アイデアといくつかの小さな落とし穴を共有します。ブログ全体では、プロセス全体と独自のリクエスト メソッドの作成方法を完全に理解できるように、段階的なアプローチを採用しています。最終的な効果を達成するには、段階的に実行してください。
実装アイデア:
まず、この要件を実現する最も直接的な方法は、wx の公式ドキュメントで関連ドキュメントと API の概要を検索し、wx アプレットの公式ドキュメントでサブスクリプション ニュースを検索して、アプレット
購読メッセージは次のタイプに分類できます。
1. 一次性订阅消息