今回はWeChat共有機(jī)能の開発についてお屆けします。 WeChat共有機(jī)能の開発における注意點(diǎn)は次のとおりです。

WeChat に埋め込まれた Web ページには、右上隅にデフォルトの共有機(jī)能があります。次の図に示すように、最初の効果はカスタマイズされた効果で、2 番目の効果はデフォルトの効果です。カスタマイズされた共有リンクを?qū)g裝すると、ユーザーはさらにクリックしたくなるのでしょうか?以下に開発プロセスを説明します。

1. 準(zhǔn)備、js インターフェイスの安全なドメイン名を設(shè)定します

これには、WeChat の jssdk を使用する必要があります。まず、WeChat 公式アカウントのバックグラウンドで設(shè)定する必要があります: 公式アカウント設(shè)定 -> 機(jī)能設(shè)定。 -->JS インターフェイスの安全なドメイン名。このページを開くと、次のプロンプトが表示されます。まずこのファイルをダウンロードし、指定したドメイン名のルート ディレクトリにアップロードする必要があります。

このファイルには、名前から検証に使用される string があります。このファイルを正常に保存するには、まずこのファイルをアップロードする必要があります。これでjssdkが使えるようになります。

2. フロントエンド設(shè)定

最初に説明することは、共有機(jī)能は設(shè)定機(jī)能であり、ボタンのクリック イベントにバインドしても効果がないということです。言い換えれば、右上隅にある [共有] をクリックするだけで効果があります (一部のテキスト コンテンツを共有する方法がわかりません)。公式 JS には 4 つのステップがあります。最初は jssdk を?qū)毪工毪长趣扦?

<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>

???public?class?WXShareModel
????{????????public?string?appId?{?get;?set;?}????????public?string?nonceStr?{?get;?set;?}????????public?long?timestamp?{?get;?set;?}????????public?string?signature?{?get;?set;?}????????public?string?ticket?{?get;?set;?}????????public?string?url?{?get;?set;?}????????public?void?MakeSign()
????????{?????????????var?string1Builder?=?new?StringBuilder();
?????????????string1Builder.Append("jsapi_ticket=").Append(ticket).Append("&")
??????????????????????????.Append("noncestr=").Append(nonceStr).Append("&")
??????????????????????????.Append("timestamp=").Append(timestamp).Append("&")
??????????????????????????.Append("url=").Append(url.IndexOf("#")?>=?0???url.Substring(0,?url.IndexOf("#"))?:?url);????????????var?string1?=?string1Builder.ToString();
????????????signature?=?Util.Sha1(string1,?Encoding.Default);
????????}
????}

次に、それを設(shè)定します:

wx.config({
????????debug:?true,?//?開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
????????appId:?'@Model.appId',?//?必填，公眾號(hào)的唯一標(biāo)識(shí)
????????timestamp:?'@Model.timestamp',?//?必填，生成簽名的時(shí)間戳
????????nonceStr:?'@Model.nonceStr',?//?必填，生成簽名的隨機(jī)串
????????signature:?'@Model.signature',//?必填，簽名，見附錄1
????????jsApiList:?["checkJsApi",?"onMenuShareTimeline",?"onMenuShareAppMessage",?"onMenuShareQQ",?"onMenuShareQZone"]?//?必填，需要使用的JS接口列表，所有JS接口列表見附錄2????});
????wx.ready(function?()?{
????????document.querySelector('#checkJsApi').onclick?=?function?()?{
????????????wx.checkJsApi({
????????????????jsApiList:?[????????????'getNetworkType',????????????'previewImage'
????????????????],
????????????????success:?function?(res)?{
????????????????????alert(JSON.stringify(res));
????????????????}
????????????});
????????};
　　　　//朋友圈????????wx.onMenuShareTimeline({
????????????title:?'暖木科技',?//?分享標(biāo)題
????????????link:?'http://www.warmwood.com/home/lampindex',?//?分享鏈接
????????????imgUrl:?'http://www.warmwood.com/images/s1.jpg',
????????????success:?function?(res)?{
????????????????alert('已分享');
????????????},
????????????cancel:?function?(res)?{
????????????????alert('已取消');
????????????},
????????????fail:?function?(res)?{
????????????????alert(JSON.stringify(res));
????????????}
????????});????????//朋友????????wx.onMenuShareAppMessage({
????????????title:?'暖木科技',?//?分享標(biāo)題
????????????desc:?'寶寶的睡眠很重要，你的睡眠也很重要',?//?分享描述
????????????link:?'http://www.warmwood.com/home/lampindex',?//?分享鏈接
????????????imgUrl:?'http://www.warmwood.com/images/s1.jpg',?//?分享圖標(biāo)
????????????type:?'',?//?分享類型,music、video或link，不填默認(rèn)為link
????????????dataUrl:?'',?//?如果type是music或video，則要提供數(shù)據(jù)鏈接，默認(rèn)為空
????????????success:?function?()?{????????????????//?用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
????????????????alert("分享");
????????????},
????????????cancel:?function?()?{????????????????//?用戶取消分享后執(zhí)行的回調(diào)函數(shù)
????????????????alert("取消分享");
????????????}
????????});
????});

その後、殘りはバックエンドです。バックエンドの鍵は、access_token と jsapi_ticket を取得し、正しい署名を生成することです。また、株數(shù)を數(shù)えたい場合は成功法で數(shù)えると良いでしょう。

3. 署名の生成

1.access_token

access_token の取得方法はプラットフォーム間で一貫しています。

public?const?string?AccessTokenUrl?=?"https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid={0}&secret={1}";

access_token のタイムアウトは 7200 秒なので、最初にキャッシュできます。 SendHelp の記事の最後でダウンロードできます

2. jsapi_ticket を取得します

access_token の目的は、jsapi_ticket を取得することです。 get メソッドを使用して取得します (URL: https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi)。返される JSON オブジェクトは次のとおりです。

?public?TokenResult?GetAccessToken()
????????{????????????var?url?=?string.Format(WxDeviceConfig.AccessTokenUrl,?WxDeviceConfig.AppId,?WxDeviceConfig.APPSECRET);????????????var?res?=?SendHelp.Send<TokenResult>(null,?url,?null,?CommonJsonSendType.GET);????????????return?res;
????????}

それで、モデルを定義できます:

{"errcode":0,"errmsg":"ok","ticket":"bxLdikRXVbTPdHSM05e5u5sUoXNKd8-41ZO3MhKoyN5OfkWITDGgnr2fwJ0m9E8NYzWKVZvdVtaUgWvsdshFKA","expires_in":7200}

次に、チケットを取得するメソッドを完了します:

public?class?jsapiTicketModel
????{????????public?string?errcode?{?get;?set;?}????????public?string?errmsg?{?get;?set;?}????????public?string?ticket?{?get;?set;?}????????public?string?expires_in?{?get;?set;?}
????}

チケットの有効期限も 7200 秒で、頻繁にリクエストすることはできないため、チケットをキャッシュする必要もあります。サーバ側(cè)。

?public?jsapiTicketModel?GetJsApiTicket(string?accessToken)
????????{????????????var?url?=?string.Format(WxPayConfig.Jsapi_ticketUrl,?accessToken);????????????return?SendHelp.Send<jsapiTicketModel>(accessToken,?url,?"",?CommonJsonSendType.GET);
????????}

MemoryCacheManager:

コードの表示

3. 署名

ついにこのステップに到達(dá)しましたが、ドキュメント內(nèi)に殘念なシーンが表示されます:

C# のデモはありますか? どこで支払うことができますか?それが jssdk によって提供されないのはなぜですか? まあ、今は文句を言わないでおこう。同関係者は署名のルールについても説明した。最初は https://github.com/night-king/weixinSDK の署名を使用しました:

?private?void?setCacheTicket(string?cache)
????????{
????????????_cacheManager.Set(tokenKey,?cache,?7200);
????????}

得られた結(jié)果は公式の検証と矛盾しており、署名エラーが繰り返し発生しました。

正しい書き方は:

?public?static?string?Sha1(string?orgStr,?string?encode?=?"UTF-8")
????????{????????????var?sha1?=?new?SHA1Managed();????????????var?sha1bytes?=?System.Text.Encoding.GetEncoding(encode).GetBytes(orgStr);????????????byte[]?resultHash?=?sha1.ComputeHash(sha1bytes);????????????string?sha1String?=?BitConverter.ToString(resultHash).ToLower();
????????????sha1String?=?sha1String.Replace("-",?"");????????????return?sha1String;
????????}//錯(cuò)誤示例

公式の検証結(jié)果と一致すればOKです(大文字と小文字は無視します)。もう 1 つ注意すべき點(diǎn)は、署名內(nèi)の URL です。ページにパラメータがある場合、モデル內(nèi)の URL にもパラメータが必要ですが、# 記號(hào)の後のパラメータは必要ありません。そうしないと、署名エラーが報(bào)告されます。

public?static?string?Sha1(string?orgStr,?Encoding?encode)
????????{
????????????SHA1?sha1?=?new?SHA1CryptoServiceProvider();????????????byte[]?bytes_in?=?encode.GetBytes(orgStr);????????????byte[]?bytes_out?=?sha1.ComputeHash(bytes_in);
????????????sha1.Dispose();????????????string?result?=?BitConverter.ToString(bytes_out);
????????????result?=?result.Replace("-",?"");????????????return?result;??
????????}

4. まとめ

wx.config で debug を true に設(shè)定すると、さまざまな操作結(jié)果がアラートされます。パラメータが正しいと、インターフェイスに次のプロンプトが表示されます:

この時(shí)點(diǎn)では、共有機(jī)能は問題ありません。これにより、他の jssdk を呼び出すことも可能になります。また、この記事の SendHelp オブジェクトは Senparc (.net4.5 ベース) の dll を使用しています。

この記事の事例を読んだ後は、この方法を習(xí)得したと思います。さらに興味深い情報(bào)については、php 中國語 Web サイトの他の関連記事に注目してください。

推奨読書:

Webpackの自動(dòng)更新と解析の使用法

H5キャッシュマニフェストの使用法

以上がWeChat共有機(jī)能の開発の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。