그건 그렇고, 앱은 일반적으로 소셜 플랫폼에서 공유 할 입구를 가지고 있으며 웹 페이지를 공유하기위한 좋은 프레임 워크도 있습니다. 그러나 HTML5의 지속적인 개발로 인해 모바일 웹 페이지는 우리 삶에서 점점 더 인기를 얻고 있습니다. 그렇다면 휴대 전화에서의 공유를 완료하는 방법은 무엇입니까? 말하자면, 주요 공유 플랫폼에는 Android 및 iOS 용 SDK가 있습니다. 개발자로서 SDK를 프로젝트에만 통합하면됩니다. 제공된 외부 인터페이스를 통해 공유 기능을 쉽게 완료 할 수 있습니다. 웹 페이지의 경우 인터넷에는 다음과 같은 많은 우수한 공유 프레임 워크가 있습니다. Bshare Sharing 및 Jiathis Sharing; 우리는 프로젝트에 쉽게 통합 할 수 있습니다. 그러나 모바일 웹 페이지에서 공유를 구현하기 위해 약간의 노력을 기울여야합니다. 현재 사용자가 설치 한 클라이언트에 전화하여 공유 할 수 있다고 생각합니다. 여기에 언급해야 할 것은 WeChat 공유입니다. 웹 페이지에서 공유하면 공유 QR 코드가 일반적으로 나타납니다. 우리는 WeChat 앱을 사용하여 스캔하고 공유합니다. 우리는 휴대 전화에서 작동 할 수 없습니다. 사용자가 WeChat 공유를 선택할 때 앱을 직접 공유해야합니다. 여기서는 WeChat 공유 JS SDK에 대해 불평 할 것입니다. 내가이 일에 처음 접촉했을 때, 나는 운영을 완료하는 한 사용자 정의 공유를 깨달을 수 있다고 생각했다. 모든 종류의 함정으로, 나는 Wechat JS SDK가 우리의 사용자 정의 컨텐츠 만 일시적으로 캐시한다는 것을 알았습니다. 공유가 필요할 때는 여전히 WeChat의 오른쪽 상단에있는 버튼을 통해 작업을 완료해야합니다. 좋아, 나는 더 이상 넌센스를 말하지 않을 것이다. 오늘의 주제를 입력합시다. 다음으로 하이퍼 링크를 통해 Sina, QQ, QQ Space 및 Tencent Weibo의 공유를 완료 한 다음 C# 플랫폼을 기반으로 WeChat JS SDK 공유 구성 요소의 서명 로직을 제공하고 마지막으로 모바일 웹 공유를 완료하게됩니다.
첫 번째 포인트를 입력하십시오. 하이퍼 링크를 통해 공유를 완료하십시오
일반적으로 사용되는 소셜 플랫폼의 경우 기본적 으로이 공유 방법을 지원하지 않는 WeChat을 제외하고 하이퍼 링크를 통해 콘텐츠를 공유 할 수 있습니다. 이 공유 방법을 사용하면 공유를 사용자 정의 할 수 있으며 사용하기에 매우 편리합니다.
함수 sharesina () {// sina weibo var sharesinastring = 'http://service.weibo.com/share/share.php?title=' + $ ( "#title"). val () + '& url =' + $ ( "#url"). {url : location.href : '0',/*총 주식 수가 표시되는지 여부, '1', '1', '1', 디스플레이 : '0'*/desc : ',/*기본 공유 이유 (옵션)*/요약 :/*공유 요약 (옵션)*/제목 :/*공유 제목 (옵션)*/사이트 :/*공유 (선택 사항)*/pics : '',/*그림을 공유하는 경로 (선택 사항)*/스타일 : '203', 너비 : 98, 높이 : 22}; // qq space var sharesinastring = 'http://sns.qzone.qq.com.com/cgi-bin/qzshare/cgi_qzshare_onekhe?title + $ (##). '& url =' + $ ( "#url"). val () + '& site = "manyi.com"'; wind 다중 공유 언어 (| 분리 사용)*/제목 :/*제목 공유 (선택 사항)*/*summary : ',/*share summary (선택 사항)*/pics :',/*공유 그림 (선택 사항)*/flash :/*비디오 주소 (옵션)*/사이트 : 'manyi.com',/*source (옵션) : QQ Sharing*/Stying : ', 33,', 32 : ', 32 :' 32}; // qqvar sharesinastring = 'http://connect.qq.com/widget/shareqq/index.html?title=' + $ ( "#title"). val () + '& summary =' + $ ( "#url"). val () + ' + $ ( "#url"). '& site = "manyi.com"'; wind /*공유 소스 (선택 사항) 예 : QQ 공유*/}; // Tencent와 공유 Weibo var sharesinastring = 'http://vtqq.com/share/share.php?title=' + $ ( "#title"). val () + '& url =' + $ ( "#url"). Sharesinastring;}위의 것은 Sina Weibo, QQ, QQ Space 및 Tencent Weibo를 공유하기위한 JS 코드입니다. 우리는 페이지를 공유 해야하는 위치에서만 전화하면됩니다. 물론 이러한 형태의 공유 컨텐츠를 지원하는 많은 플랫폼이 있습니다. 직접 탐색하십시오. 우리는 여기서 하나씩 정교하지 않을 것입니다.
WeChat 공유는 다음과 같습니다.
처음에는 WeChat의 내장 브라우저가 오른쪽 상단에 공유 기능이있어 웹 페이지에서 WeChat의 친구들과 직접 공유 할 수 없다고 말했습니다. 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을 얻으려면 2 단계
공식 문서는 다음과 같이 말합니다. 정상적인 상황에서 JSAPI_TICKET의 유효 기간은 7200 초이며 Access_Token을 통해 얻습니다. JSAPI_TICKET을 얻기위한 API 호출 수는 매우 제한적이므로 JSAPI_TICKET을 자주 새로 고침하면 API 호출이 제한되어 자체 비즈니스에 영향을 미칩니다. 개발자는 서비스에 전 세계적으로 JSAPI_TICKET를 캐시해야합니다.
1. Access_Token을 얻으려면 다음 문서를 참조하십시오 (7200 초 동안 유효합니다. 개발자는 서비스에서 전 세계적으로 Access_Token을 캐시해야합니다) : ../15/54C45D30B6BF6758F68D2E95BC627.html
2. 첫 번째 단계에서 얻은 access_token을 사용하여 JSAPI_TICKET을 요청하십시오 (7200 초 동안 유효한 개발자는 전 세계적으로 JSAPI_TICKET를 전 세계적으로 캐시해야합니다.
JSAPI_TICKET을 얻은 후 JS-SDK 허가 확인에 대한 서명을 생성 할 수 있습니다.
세 번째 단계는 JS-SDK 권한 검증의 서명을 생성하는 것입니다.
서명 생성 규칙은 다음과 같습니다. 서명에 참여하는 필드에는 비 CESTR (임의 문자열), 유효한 JSAPI_TICKET, TIMESTAMP (TimesTAMP), URL ( # 및 후속 부분을 포함하지 않은 현재 웹 페이지의 URL)이 포함됩니다. 필드 이름의 ASCII 코드에 따라 소형에서 큰 (사전 순서)로 서명 할 모든 매개 변수를 정렬 한 후 URL 키 값 쌍의 형식 (즉, key1 = value1 & key2 = value2…)을 사용하여 문자열 문자열 1에 스플 라이스합니다. 여기서 모든 매개 변수 이름은 소문자라는 점에 유의해야합니다. String1은 암호화되며 필드 이름과 필드 값은 모두 원래 값이며 URL 이스케이프는 수행되지 않습니다.
주목해야 할 것
1. 서명에 사용되는 비정규 및 타임 스탬프는 WX.config의 비 시세 및 타임 스탬프와 동일해야합니다.
2. 서명에 사용되는 URL은 JS 인터페이스를 호출하는 페이지의 전체 URL이어야합니다.
3. 보안상의 이유로 개발자는 서버 측에서 서명 로직을 구현해야합니다.
위는 Wechat JS SDK의 서명 로직 부분이며 다음은 특정 코드 구현입니다.
System.net을 사용하고 System.io를 사용하여 System.io를 사용하고 System.Text 사용; System.Web.Script.Serialization 사용; ManyIABYWAP.Models 사용; /// <Summary> //// get jsapi_ticket /// </summary> namespace manyiabywap.controllers wxmmesagegoller : controlloller : controllector : controllector : String appid = "appid가 wechat에 의해 제공됨"; private static string secrect = "wechat에 의해 제공됨"; public static wxinfo accesstoken = null; // Global Object, 7200 초마다 업데이트 된 WeChat은 일일 토큰 획득 공개 시간에 대한 요청과 시간 제한을 가지고 있습니다. {if (accessToken! = null) {timespan span = convert.todateTime (연장 시간) .Subtract (convert.todateTime (dateTime.now)); if (span.totalHours> 2) {accessToken = getWinxIntoken (); Offertime = DateTime.now; dateTime.now;} // 서명 타임 스탬프 타임 스팬 생성 ts = datetime.utcnow -new dateTime (1970, 1, 1, 1, 1, 0, 0, 0, 0); accesstoken.timestamp = convert.toint64 (ts.totalseconds) .toString (); stringtoken.noncest = createnonceSt = regnectrokest = createnOnCEST = "jsapi_ticket ="+ accessToken .ticket+ "& noncest ="+ accessToken.noncest+ "× Tamp ="+ accessToken.timestamp+ "& url ="+ url; accesstoken.signature = sha1 (str) .tolower (); AccessToken.appid = applid (AccessToken, retacktoken, jsonrequestbehavior.allowget);} // 임의의 문자열 생성 개인 문자열 생성 개인 문자열 createNoncest (int length = 16) {String str = "abcdefghijklmnopqrstuvwxyzabcdefghijklmnopqrstuvwxyz0123456789"random rengat (); strengy; // ritty. 랜덤 캐릭터. 특정 길이는 (int i = 0; i <길이; i ++) {int m = r.next (0, 62)에 대해 자체적으로 변경 될 수 있습니다. // 하한은 0이고, 임의 숫자는 얻을 수 있고, 상한 숫자는 62이어야합니다. 무작위 숫자는 검색 될 수 없기 때문에 최대 값은 62입니다. 결과;} // 해시 알고리즘 개인 정적 문자열 sha1 (문자열 텍스트) {byte [] cleanbytes = encoding.default.getBytes (텍스트); byte [] hashedbytes = system.security.cryptography.sha1.create (). computehash (cleanbytes); bitconverter.toString (HashedBytes) .replace ( "-", "");} // 정적 wxinfo get wxinfo getwinxintoken () {// get accende_tokenhttpwebresponse repponion = CreateGethttpresponse ( "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + appid + "& secret =" + secrect, 5000); smeleader reader = new Streamreader (respons.get.getResponseStream ()); StringBuilder SB; ((line = reader.readline ())! = null) {sb.append (line.tostring ());} javaScriptSerializer js = new JavaScriptSerializer (); wxinfo accesstoken = js.deserialize <wxinfo> (sb.tostring ())); CreateGetHttPresponse ( "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + accesstoken.access_token + "& type = jsapi", 5000); reader = new Streamreader (response.getResponseStream ()); reader.readline ())! = null) {sb.append (line.tostring ());} accesstoken = js.deserialize <wxinfo> (sb.tostring ()); return accesstoken;} /// <malubary> /// <param name = //// <param name = "timeout"> 요청 된 timeout </param> /// <param name = "userAgent"> 요청 된 클라이언트 브라우저 정보는 비어있을 수 있습니다 </param> /// <param name = "쿠키"> 쿠키 정보는 http 요청으로 전송 될 수 있습니다. userAgent = null, cookiecollection 쿠키 = null) {if (string.isnullorempty (url)) {wrach new argumentnullexception ( "url");} httpwebrequest request = webrequest.create (url) as httpwebrequest; request.method = "get"; if "; (! string.isnullorEmpty (userAgent)) {request.useragent = userAgent;} if (timeout.hasValue) {request.Timeout = timeout.value;} if (cookies! = null) {request.cookieContainer = new CookieContainer (); repireceCeCeC.Add (chookies at at at at at at at); httpwebresponse;}}}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 noncest {get; 세트; } // 임의의 문자열 공개 문자열 string timestamp {get; 세트; } // 서명의 타임 스탬프를 생성 공개 문자열 서명 {get; 세트; } // 서명 반환 값}}웹 페이지의 초기화를위한 JS 코드 :
// weChat JS SDK 요청 상태 var requestStatus = 0; function sharewx () {if (requestStatus! = 1) {requestStatus = 1; // var ajaxpara = "url =" + encodeUricomponent (window.location.href.split ( '#')); $. '/wxmessage/gettoken', datatoken : 'json', data : ajaxpara, success : function : function (json) {if (undefined! = json && json! == "") {var jsonobjs = vali (json); wx.config (debug : // debug mode, debug on will will will will will will will want want want want want will will will will will will will will will will will will will will will will will will will will will will whant a apis values. 매개 변수는 PC쪽에 열릴 수 있습니다. 매개 변수 정보는 로그를 통해 인쇄 될 수 있으며 PC 측면에서만 인쇄됩니다. jsonobjs.signature, // 필수, 부록 1jsapilist : [ 'checkjsapi', 'onmenushareTimeline', 'onmenushareAppmessage', 'onmenushareqq', 'onmenushareweibo', 'onmenushareqzone'] // js 목록, js 목록, onmenushareweibo ','onmenushareweibo ','onmenushareweibo ','onmenushareweibo ', 2}). 사용자가 트리거 할 때만 호출되는 인터페이스의 경우 직접 호출 할 수 있으며 wx.checkjsapi ({jsapilist : [ 'checkjsapi', 'onmenusharetimeline', 'onmenushareappmessage', 'onmenushareqq', 'onmenushareweibo', 'onmenushareqzone'], // 모든 js 인터페이스 목록에 대한 부록 2를 참조하는 JS 인터페이스 목록 : // re-res- as-as-as-as-as-as-res-vere-as-res. 사용 가능한 API 값은 true이며, false로 사용할 수 없음 // 예 : { "checkresult": { "checkresult": { "cheenceImage": true}, "errmsg": "checkjsapi : ok"}}}); wx.onmenushareweibo ({title : 'manyi.com share test', // share desc : 'manyi.com 공유 링크', // 공유 링크 'http://www.manyiaby.com', // 링크 공유 imgurl : 'http://www.manyiaby.com/img/logo_2.jpg', // Icon Success : function () {// 콜백 함수 경고 ( "성공적으로 공유"; 취소 ");}});}); wx.error (function (res) {// alert ("wechat visification res : "+res); // 구성 정보 검증 후 준비 방법이 실행됩니다. 모든 인터페이스 호출이 실행됩니다. 모든 인터페이스 호출이 결과를 얻은 후에 모든 인터페이스 호출을 얻어야합니다. conffer는 클라이언트의 비동기 조작이어야합니다. 사용자가 트리거 할 때만 호출되는 올바른 실행을 위해 준비된 기능에 배치해야합니다.여기서는 WeChat 공유 JS SDK의 사용을 소개하겠습니다. 자신의 요구에 따라이를 참조 할 수 있습니다. WeChat이 제공 한 JS SDK가 WeChat의 내부 브라우저를위한 캐시 처리 일뿐입니다. 실제 공유는 여전히 오른쪽 상단의 공유 버튼을 클릭해야합니다.
위의 것은 완벽한 모바일 웹 공유 솔루션이 아닙니다. 마지막으로 SOSH 소셜 공유 구성 요소를 소개하겠습니다. 이 구성 요소를 볼 때, 나는 이것이 내가 필요한 것, 간단한 인터페이스라는 것을 알고 있으며, 우리 웹 사이트를 우아하고 편안하게 보이게 할 수 있습니다. 좋아, 더 이상 고민하지 않고 주제를 입력하십시오.
위의 것은 모바일 웹 앱에서 멀티 플랫폼 기능을 공유하는 방법에 대한 편집자의 소개입니다. 모든 사람에게 도움이되기를 바랍니다. 궁금한 점이 있으면 메시지를 남겨 주시면 편집자가 제 시간에 모든 사람에게 답장을 드리겠습니다. Wulin.com 웹 사이트를 지원해 주셔서 대단히 감사합니다!