ちなみに、アプリには通常、ソーシャルプラットフォームで共有する入り口があり、Webページを共有するための優れたフレームワークもあります。ただし、HTML5の継続的な開発により、モバイルWebページは私たちの生活の中でますます人気が高まっています。では、携帯電話で共有を完了するにはどうすればよいですか？そういえば、主要な共有プラットフォームにはAndroidおよびiOSのSDKがあります。開発者として、SDKをプロジェクトに統合するだけです。提供された外部インターフェイスを介して、共有関数を簡単に完了できます。 Webページに関しては、インターネット上には、次のことなど、多くの優れた共有フレームワークがあります。プロジェクトに簡単に統合できます。ただし、モバイルWebページに共有を実装することに努力する必要があります。現時点では、ユーザーがインストールしたクライアントに電話することで共有できると思います。ここで言及する必要があるのは、WeChat共有です。 Webページで共有すると、通常、QRコードの共有が表示されます。 WeChatアプリを使用してスキャンして共有します。携帯電話では操作できません。ユーザーがWeChat共有を選択したときに共有するには、アプリを直接開く必要があります。ここでは、WeChatがJS SDKを共有することについて不満を述べます。私がこのことと最初に接触したとき、私は操作を完了する限り、カスタム共有を実現できると思いました。あらゆる種類の落とし穴で、WeChat JS SDKは一時的にカスタムコンテンツのみをキャッシュすることがわかりました。共有する必要がある場合でも、WeChatの右上隅にあるボタンを介して操作を完了する必要があります。わかりました、もうナンセンスについては話しません。今日のトピックを入力しましょう。次に、ハイパーリンクを介してSina、QQ、QQスペース、およびTencent Weiboの共有を完了し、C＃プラットフォームに基づいてWeChat JS SDK共有コンポーネントの署名ロジックを提供し、最後にモバイルWebの共有を完了するようになります。
最初のポイントを入力します：HyperLinkを介して完全な共有
一般的に使用されるソーシャルプラットフォームの場合、この共有方法をサポートしていないWeChatを除き、ハイパーリンクを介して基本的にコンテンツを共有できます。この共有方法により、共有をカスタマイズするのが促進され、使用が非常に便利です。
function sharesina（）{// sina weibo var sharesinastring = 'http://service.weibo.com/share/share.php?title=' + $（ "＃title"）。 + '＆url =' + $（ "＃url"）。 {url：location.href、showcount： '0'、/*共有の総数が表示されているかどうか、表示： '1'、展示： '0'*/desc： ''、 ''、/*デフォルト共有理由（オプション）*/概要： ''、/*共有概要（オプション）*/タイトル： ''、/*share（optional） （オプション）*/写真： ''、/*写真を共有するパス（オプション）*/スタイル： '203'、width：98、height：22}; // qq space var sharesinastring = 'http://sns.qzone.qqqc.com/cgi-bin/qzshare/cgi_qzshare_ke_oney_ "） '＆url =' + $（ "＃url"）。val（） + '＆site = "manyi.com"'; windocy.location.href = sharesinastring;} function shareqq（）{url：location.href、 /*get url、qu logo for supput statistics* /desc： '複数の共有言語（|分離を使用）*/タイトル： ''、/*共有タイトル（オプション）*/概要： ''、/*共有概要（オプション）*/写真： ''、/*共有画像（オプション）*/フラッシュ： ''、/*ビデオアドレス（オプション）*/サイト： 'Manyi.com'、/*share（optional）：qq sharhing*/share： '201： 32}; // qqvarに共有Sharesinastring = 'http://connect.qqc.com/widget/shareqq/index.html?title=' + $（ "＃title"）。 '＆site = "manyi.com"'; windocy.location.href = sharesinastring;} function shareqqweibo（）{var p = {url：location.href、 /*urlを取得し、QQから共有QQロゴを追加して統計を容易にする* /*'' '' ' /*share） /*ソース（オプション）を共有する例：QQ共有*/}; // tencent weibo var Sharesinastring = 'http://vtqq.com/share/share.php?title=' + $（ "＃title"）。val（） + '＆url =' + $（ "＃url"） Sharesinastring;}上記は、Sina Weibo、QQ、QQスペース、およびTencent Weiboを共有するためのJSコードです。ページを共有する必要がある場所でそれらを呼び出す必要があります。もちろん、この形式の共有コンテンツもサポートする多くのプラットフォームがあります。自分で探索してください。ここでは、私たちはそれについて一つずつ詳しく説明しません。
ここにいくつかのWeChat株があります：
最初は、WeChatの組み込みブラウザには右上隅に共有機能があるため、WeChatのSircle of Friendsと直接共有することもできません。 WeChatは、WeChatのカスタム共有のためのJS SDKを提供します。あなたはあなたの情熱を抑えることができませんか？このJS SDKが何であるかを簡単に見てみましょう。 WeChatが提供するドキュメントは当時非常に詳細ですが、JS SDKを開発する場合は、最初にWeChatの公式アカウントが必要です。次に、「インターフェイス許可」をクリックして、次のように許可を表示します。
上記の基本的なことについては話しません。 JSAPI_TICKETの取得方法と署名方法に焦点を当てましょう。公式ドキュメントによって促される手順は、最初にAccess_Tokenを取得し、Access_Tokenを介してJSAPI_Ticketを取得し、最後にJSAPI_Ticketを介して署名することです。上記の作業を段階的に完了しましょう。注：オフィシャルは、PHP、Java、Python、およびNodejsのサンプルプログラムを提供しています。ここでは、C＃を例として使用して、上記の操作を終了します。
ステップ1：Access_Tokenを取得します
公式文書には、これは次のとおりです。Access_Tokenは、公式アカウントの資格情報を呼び出すグローバルに一意のインターフェイスです。 Access_Tokenは、公式アカウントで各インターフェイスを呼び出すときに必要です。開発者はそれを適切に保存する必要があります。 Access_Tokenのストレージは、少なくとも512文字のスペースを保持する必要があります。 Access_Tokenの有効期間は現在2時間であり、定期的に更新する必要があります。繰り返し取得すると、前回取得したAccess_Tokenが無効になります。
ステップ2 JSAPI_TICKETを取得します
公式の文書には、JSAPI_TICKETは、WeChat JSインターフェイスを呼び出すために公式アカウントが使用する一時的なチケットです。通常の状況では、JSAPI_Ticketの有効期間は7200秒で、Access_Tokenから取得されます。 JSAPI_TICKETを取得するためのAPI呼び出しの数は非常に限られているため、JSAPI_TICKETの頻繁な更新により、API呼び出しが制限され、自分のビジネスに影響を与えます。開発者は、サービスでJSAPI_Ticketをグローバルにキャッシュする必要があります。
1. Access_Tokenを取得するには、次のドキュメントを参照してください（7200秒で有効です。開発者はサービスでグローバルにアクセスをキャッシュする必要があります）：../15/54CE45D8D30B6BF6758F68D2E95BC627.HTML
2。最初のステップで取得したAccess_Tokenを使用してJSAPI_TICKET（7200秒間有効で、開発者は彼のサービスでjsapi_ticketをグローバルにキャッシュする必要があります）：https：//api.weixin.q.com/cgi-bin/ticket/getticketet
JSAPI_Ticketを取得した後、JS-SDK許可確認の署名を生成できます。
3番目のステップは、JS-SDK許可確認の署名を生成することです
署名の生成ルールは次のとおりです。署名に参加するフィールドには、非cestr（ランダム文字列）、有効なJSAPI_TICKET、タイムスタンプ（タイムスタンプ）、URL（現在のWebページのURL、＃とその後のパーツを含まない）が含まれます。フィールド名のASCIIコードに従って、すべてのパラメーターを小から大部分から大部分（辞書順序）に並べ替えた後、URLキー値ペアの形式（つまり、key1 = value1＆key2 = value2…）を使用して文字列弦1にスプライスします。ここでは、すべてのパラメーター名が小文字であることに注意する必要があります。 String1は暗号化され、フィールド名とフィールド値は元の値であり、URLエスケープは実行されません。
注意すべきこと
1.署名に使用される非網とタイムスタンプは、wx.configの非cestrとタイムスタンプと同じでなければなりません。
2。署名に使用されるURLは、JSインターフェイスを呼び出すページの完全なURLでなければなりません。
3。セキュリティ上の理由から、開発者はサーバー側に署名ロジックを実装する必要があります。
上記はWeChat JS SDKの署名ロジック部分であり、以下は特定のコード実装です。
System; System.net;を使用して、System.web.mvc;を使用してSystem.io;を使用してSystem.text; System.web.script.serialization; /// <summary> ///を使用して、get jsapi_ticket //////コントローラー{private static string appid = "appid by wechat"; private static string ecrect = "secret by wechat"; public static wxinfo accesstoken = null; //グローバルオブジェクト、7200秒ごとに更新される、wechatには毎日のトークン取得のためのリクエストと時間制限があります。 url）{if（AccessToken！= null）{TimesPan span = convert.todatetime（overtime）.subtract（convert.todatetime（datetime.now））; if（span.totalhours> 2）{accesstoken = getwinxintoken（）; dateTime.now;} //署名タイムスタンプタイムスパンTS = dateTime.utcnow -new DateTime（1970、1、1、1、0、0、0、0）; accesstoken.timestamp = convert.toint64（ts.totalseconds）.toString（）; // "jsapi_ticket ="+ accesstoken .ticket+ "＆noncestr ="+ accesstoken.noncestr+ "×tamp ="+ accesstoken.timestamp+ "＆url ="+ url; accesstoken.signature = sha1（str）.tolower（）; accesstoken.appid; jsonrequestbehavior.allowget）;} //ランダムな文字列プライベート文字列createNoncestr（int length = 16）{string str = "abcdefghijklmnopqrmnopqrmnopqrmnopqrmnopqrstuvwxyz0123456789" 8ビットの長いランダムな文字。特定の長さは、（int i = 0; i <length; i ++）{int m = r.next（0、62）; //下限は0、乱数を取得でき、上限は62である必要があります。結果;} //ハッシュアルゴリズムプライベート静的文字列sha1（string text）{byte [] cleanbytes = encoding.default.getBytes（text）; byte [] hashedbytes = system.security.cryptography.sha1.create（）。 bitconverter.tostring（hashedbytes）.replace（ " - "、 ""）;} // tokenprivate static wxinfo getwinxintoken（）{// get access_tokenhttpwebreaponse = get access_tokenhttpwebrepons creategethttpresponse（ "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential＆appid=" + appid + "＆secret =" + secrect、5000）; streamreader reader = new streamreder（responsed.getRespream（）; String Line; String Line; （（line = reader.readline（）！= null）{sb.append（line.tostring（））;} javascriptserializer js = new javascriptserializer（）; wxinfo accesstoken = js.deserialize <wxinfo>（sb.tostring（））; creategethtttpresponse（ "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + accesstoken.access_token + "＆type = jsapi"、5000）; reader = new stramereader（responseSponseStream（）; reader.readline（））！= null）{sb.append（line.tostring（））;} accesstoken = js.deserialize <wxinfo>（sb.tostring（））;} /// <summary> ///作成a get httpリクエスト// /// <param name = "timeout">要求されたタイムアウト</param> /// <param name = "useragent">要求されたクライアントブラウザ情報は空になる可能性があります</param> /// Timeout、String useragent = null、cookiecollection cookies = null）{if（string.isnullorempty（url））{throw new argumentnullexception（ "url"）;} httpwebrequest request = webrequest.create（url）as httpwebrequest;リクエスト。 （！string.isnullorempty（useragent））{request.useragent = useragent;} if（timeout.hasvalue）{request.timeout = timeout.value;} if（cookies！= null）{request.cookiecontainer = new cookiecontainer（）; request.cookentainer.add（cookies）; httpwebreaponse;}}}wxinfo.csトークン情報を保存するためのグローバルオブジェクト
NameSpace Manyiabywap.models {/// <summary> /// wechatトークンリターンパラメータークラス/// </summary> public class wxinfo {public string appid {get;セット; } public string access_token {get;セット; } // access_tokenpublic string expires_in {get;セット; } //トークンの有効期限、7200秒以内に有効なパブリックストリングチケット{get;セット; } // jsapi_ticketpublic string errmsg {get;セット; } public int errcode {get;セット; } public string noncestr {get;セット; } //署名のパブリック文字列タイムスタンプのランダムな文字列を生成する{get;セット; } //署名のパブリック文字列署名のタイムスタンプを生成{get;セット; } //署名返品値}}Webページでの初期化のためのJSコード：
// wechat js sdk request status var requestStatus = 0; function sharewx（）{if（requestStatus！= 1）{requestStatus = 1; // var ajaxpara = "url =" + encodeuricomponent（window.location.href.split（ '＃'）[0]; $。 '/wxmessage/gettoken'、datatype： 'json'、data：ajaxpara、ajaxpara、success：function（json）{if（undefined！= json && json！== ""）{var jsonobjs = eval（json）; wx.config（{debug：false、//パラメーターは、PC側でそれらを開くことができます。PC側にのみ印刷されます。 jsonobjs.signature、//必須、付録1jsapilist：['checkjsapi'、 'onmenusharetimeline'、 'onmenushareappmessage'、 'onmenushareqq'、 'onmenushareweibo'、 'onmenushareqzone'] // 2}）; wx.Ready（function（）{// alert（ "wechat検証が成功します"）; //構成情報検証の後、準備が実行されます。すべてのインターフェイス呼び出しは結果を取得した後に取得する必要があります。したがって、クライアントの非同期操作です。ユーザーがトリガーしたときにのみ呼び出されるインターフェイスは、直接呼び出され、wx.checkjsapiに配置する必要はありません。 [「checkjsapi '、「onmenusharetimeline」、「onmenushareappmessage」、「onmenushareqqq」、' onmenushareweibo ']、// api値はtrue、false //：{"checkResult"：{"choodimage"：true}、 "errmsg"： "checkjsapi：ok"}}}）; wx.onmenushareweibo（{title： 'manyi.com share test'、// share share share share description " 'http://www.manyiaby.com'、// share link imgurl： 'http://www.manyiaby.com/img/logo_2.jpg'、//共有アイコンの成功：function（）{// callback function alert（ "shared husefully"）;キャンセル "）;}}）;}インターフェイスは、正しい実行を確保するために、ユーザーが直接呼び出され、Ready機能に配置する必要がありません。ここでは、JS SDKを共有するWeChatの使用を紹介します。あなた自身のニーズに基づいてそれを参照できます。 WeChatが提供するJS SDKの共有は、WeChatの内部ブラウザのキャッシュ処理にすぎないことを最初に紹介しました。実際の共有では、右上隅の共有ボタンをクリックする必要があります。
上記は、完全なモバイルWeb共有ソリューションではありません。最後に、SOSHソーシャル共有コンポーネントを紹介します。このコンポーネントを見ると、これが私が必要とするものであり、シンプルなインターフェイスであり、私たちのウェブサイトをエレガントで快適に見せることができます。 OK、これ以上苦労せずに、トピックを入力してください。
上記は、モバイルWebアプリでマルチプラットフォーム関数を共有する方法に関するエディターの紹介です。私はそれが誰にでも役立つことを願っています。ご質問がある場合は、メッセージを残してください。編集者は、すべての人に時間内に返信します。 wulin.comのウェブサイトへのご支援ありがとうございます！