1. 程式人生 > >一處折騰筆記:Android內嵌html5加入原生微信分享的解決的方法

一處折騰筆記:Android內嵌html5加入原生微信分享的解決的方法

產品 rac 移動開發 sap card 整理 方法 gravity 首頁

有一段時間沒有瞎折騰了。

這周一剛上班萌主過來反映說:微信裏面打開聚客寶。分享功能是能夠的(這裏是用微信自身的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加入原生微信分享的解決的方法