一處折騰筆記:Android內嵌html5加入原生微信分享的解決的方法
阿新 • • 發佈:2017-07-20
產品 rac 移動開發 sap card 整理 方法 gravity 首頁
有一段時間沒有瞎折騰了。
我的思路是:在點擊h5上的分享圖標時。觸發js事件,在這裏面能夠對當前設備的操作系統和瀏覽器類型做推斷,然後運行不同的操作。
一、在微信開放平臺新建應用,獲取AppId和AppSecret 1、創建應用 進入微信開放平臺的官網(open.weixin.qq.com),選擇首頁左下角的“移動應用開發”;
進入移動應用開發頁面後,選擇“創建應用”操作。
在創建應用頁面,我們須要填寫應用的信息。必填的包含移動應用名稱(你的應用的名稱,比如騰訊新聞,並且微信平臺裏面填寫的這個應用不能和已有的反復。
2、填寫平臺信息 在填寫平臺信息頁面。須要填寫應用的官網(填寫公司的網址就可以)、應用平臺(開發語言,這裏我選android)、應用簽名、應用包名。
3、等待審核 提交完成後就等待微信的審核了,頁面提示的是7天內。實際我僅僅等了1個小時就審核通過了(預計是微信的工作人員心情好~)
4、獲取AppId和AppSecret 審核通過後。我們就能看到AppId和AppSecret了,這裏我們保存下來,後面會用到。
二、在mob上新建應用,獲取分享所需的sdk mob.com是全球最大的移動開發服務平臺,裏面的sharesdk包括了全球大多數全部的應用分享功能,在使用時我們能夠依據須要,靈活地選擇我們所須要的平臺。 1、創建賬號和應用 進入mob.com新建賬號,創建應用,創建應用過程跟上面的一致且步驟簡單,此處不再贅述。進去之後能夠熟悉下裏面的菜單。
2、獲取sdk 在“下載sdk”--“社會化分享sdk”中選擇android圖標。點擊“下載sdk”button,在下載頁面我們能夠選擇我們所須要的分享平臺和官方的demo。
三、代碼集成 在mob官網獲取sdk和demo後。能夠參考說明文檔。將代碼嵌入進我們的應用代碼中
將由mob提供的QuickIntegrater.jar生成的代碼拷貝到相應的目錄以下(即下圖紅框部分的代碼)。另外加入配置信息到相關的配置文件、清單文件裏,加入jar包支持
微信彈出分享窗體的核心代碼例如以下:
另外須要將我們申請到的微信開放平臺裏面的AppId和AppSecret、mob裏面新建的應用的AppKey配置到ShareSDK.xml中(這裏為了保護隱私,代碼中我的應用的key和secret我做了脫敏處理,僅作為演示樣例)
調試時候顯示的效果基本例如以下圖所看到的
到此,整個操作過程基本結束
剩下的就是不停地調試和測試了。
這周一剛上班萌主過來反映說:微信裏面打開聚客寶。分享功能是能夠的(這裏是用微信自身的js-sdk實現的)。可是在android應用裏面打開點擊就沒反應了;接下來狡猾的丁丁在產品群裏AT我說:偶們的產品設計不是一直都被技術給反壓制住麽?真是氣死,呵呵。自己剛好有空又有興趣,於是研究了下。沒曾想竟也研究出來了。事後我對整個操作過程整理了下,方便他人也提升自己。
廢話少扯。以下上幹貨。我的思路是:在點擊h5上的分享圖標時。觸發js事件,在這裏面能夠對當前設備的操作系統和瀏覽器類型做推斷,然後運行不同的操作。
假設是在android操作系統下而且是在微信瀏覽器的,就運行原本微信自帶的js-sdk分享;假設是在android操作系統下可是不在微信瀏覽器的,就運行原生的微信分享。
在js裏面我們能夠通過android與js之間的js交互接口,將js請求傳遞給android的代碼中,這個請求至少須要傳遞分享的圖文的鏈接地址、分享的縮略圖的網址、分享窗體的標題、分享的內容四個參數,android那邊接到請求後。獲取到這四個參數。並運行彈出分享窗體的操作。我們在這個操作裏面僅僅管調用方法和對參數賦值。至於剩下的實現細節則交給微信去處理,我們不用關心。
一、在微信開放平臺新建應用,獲取AppId和AppSecret 1、創建應用 進入微信開放平臺的官網(open.weixin.qq.com),選擇首頁左下角的“移動應用開發”;
進入移動應用開發頁面後,選擇“創建應用”操作。
在創建應用頁面,我們須要填寫應用的信息。必填的包含移動應用名稱(你的應用的名稱,比如騰訊新聞,並且微信平臺裏面填寫的這個應用不能和已有的反復。
比方別人叫“騰訊新聞”的申請過了,即便你的應用也叫“騰訊新聞”,你也無法申請這個名字,另一點這個名字是能夠在微信分享的時候顯示在左下角的,相當於是應用的標識)、移動應用簡單介紹(寫一段簡短的語句介紹你的應用。無實際意義可是必填)、移動應用的圖片將準備的28*28和108*108的logo圖片上傳上去(這個小圖片也是在分享的時候能夠顯示在左下角的);
2、填寫平臺信息 在填寫平臺信息頁面。須要填寫應用的官網(填寫公司的網址就可以)、應用平臺(開發語言,這裏我選android)、應用簽名、應用包名。
這裏註意,應用簽名和應用包名非常重要!千萬不要寫錯。
3、等待審核 提交完成後就等待微信的審核了,頁面提示的是7天內。實際我僅僅等了1個小時就審核通過了(預計是微信的工作人員心情好~)
4、獲取AppId和AppSecret 審核通過後。我們就能看到AppId和AppSecret了,這裏我們保存下來,後面會用到。
二、在mob上新建應用,獲取分享所需的sdk mob.com是全球最大的移動開發服務平臺,裏面的sharesdk包括了全球大多數全部的應用分享功能,在使用時我們能夠依據須要,靈活地選擇我們所須要的平臺。 1、創建賬號和應用 進入mob.com新建賬號,創建應用,創建應用過程跟上面的一致且步驟簡單,此處不再贅述。進去之後能夠熟悉下裏面的菜單。
這裏我們記錄下生成的應用的AppKey。後面會用到。
2、獲取sdk 在“下載sdk”--“社會化分享sdk”中選擇android圖標。點擊“下載sdk”button,在下載頁面我們能夠選擇我們所須要的分享平臺和官方的demo。
三、代碼集成 在mob官網獲取sdk和demo後。能夠參考說明文檔。將代碼嵌入進我們的應用代碼中
將由mob提供的QuickIntegrater.jar生成的代碼拷貝到相應的目錄以下(即下圖紅框部分的代碼)。另外加入配置信息到相關的配置文件、清單文件裏,加入jar包支持
微信彈出分享窗體的核心代碼例如以下:
/** * 彈出微信分享的窗體 * @param shareUrl 分享的圖文鏈接的地址 * @param shareImageUrl 分享的縮略圖的地址 * @param shareTitle 分享的窗體標題 * @param shareContent 分享的文字內容 */ private void showShare(String shareUrl,String shareImageUrl,String shareTitle,String shareContent) { ShareSDK.initSDK(this); OnekeyShare oks = new OnekeyShare(); //關閉sso授權 oks.disableSSOWhenAuthorize(); // 分享時Notification的圖標和文字 2.5.9以後的版本號不調用此方法 //oks.setNotification(R.drawable.ic_launcher, getString(R.string.app_name)); // title標題。印象筆記、郵箱、信息、微信、人人網和QQ空間使用 //oks.setTitle(getString(R.string.share)); oks.setTitle(shareTitle); // titleUrl是標題的網絡鏈接。僅在人人網和QQ空間使用 oks.setTitleUrl(shareUrl); // text是分享文本。全部平臺都須要這個字段 oks.setText(shareContent); // imagePath是圖片的本地路徑。Linked-In以外的平臺都支持此參數 //oks.setImagePath("/sdcard/test.jpg");//確保SDcard以下存在此張圖片 //oks.setImagePath(shareImageUrl);//當分享的圖片是來自互聯網的時候,這一行代碼要凝視掉,否則會被覆蓋掉--yuxinwei oks.setImageUrl(shareImageUrl); // url僅在微信(包含好友和朋友圈)中使用 oks.setUrl(shareUrl); // comment是我對這條分享的評論,僅在人人網和QQ空間使用 oks.setComment(""); // site是分享此內容的站點名稱,僅在QQ空間使用 oks.setSite(getString(R.string.app_name)); // 啟動分享GUI oks.show(this); }
另外須要將我們申請到的微信開放平臺裏面的AppId和AppSecret、mob裏面新建的應用的AppKey配置到ShareSDK.xml中(這裏為了保護隱私,代碼中我的應用的key和secret我做了脫敏處理,僅作為演示樣例)
<ShareSDK AppKey = "725ba30XXXXX"/> <!-- 改動成你在mob後臺註冊的應用的appkey"-->
<Wechat Id="4" SortId="4" AppId="wxd39f588142bXXXXX" AppSecret="c362a62161fc87b12a5d23477a2XXXXX" BypassApproval="false" Enable="true" /> <WechatMoments Id="5" SortId="5" AppId="wxd39f588142bXXXXX" AppSecret="c362a62161fc87b12a5d23477a2XXXXX" BypassApproval="false" Enable="true" />
調試時候顯示的效果基本例如以下圖所看到的
到此,整個操作過程基本結束
剩下的就是不停地調試和測試了。
一處折騰筆記:Android內嵌html5加入原生微信分享的解決的方法