要實現(xiàn)消息推送與上傳圖片，需要獲取微信的網(wǎng)頁授權(quán)并引入微信的JS-JDK魔慷。
消息推送
- 首先雹舀，要實現(xiàn)消息推送，需要獲取code央勒，通過code獲取access_token和openid不见，后臺通過微信公眾號的AppID，AppSecret與openid來實現(xiàn)消息的推送崔步。
- 我在實際開發(fā)的過程中稳吮，由于調(diào)用獲取access_token的方法總是存在跨域的問題，所以我只是獲取了code井濒，然后將code傳給后臺灶似，由后臺直接訪問接口獲取openid與access_token。
首先引導(dǎo)關(guān)注者打開如下頁面：
var weixinURL = https://open.weixin.qq.com/connect/oauth2/authorize?appid=***&redirect_uri=***&response_type=code&scope=SCOPE&state=STATE#wechat_redirect
appid：是微信公眾號的開發(fā)者ID(AppID)瑞你；
redirect_uri：微信公眾平臺管理中酪惭，網(wǎng)頁授權(quán)配置信息里面的網(wǎng)頁授權(quán)域名， 要使用 urlEncode 對鏈接進(jìn)行處理者甲，ionic中由encodeURIComponent()這個方法可以實現(xiàn)這個功能春感；
response_type：返回類型，寫死code虏缸；
scope：給snsapi_base 時不彈出授權(quán)頁面鲫懒，直接跳轉(zhuǎn)，只能獲取用戶 openid刽辙，給snsapi_userinfo 時彈出授權(quán)頁面窥岩，可通過openid拿到昵稱、性別宰缤、所在地颂翼。并且， 即使在未關(guān)注的情況下慨灭，只要用戶授權(quán)朦乏，也能獲取其信息 ；
state：重定向后會帶上state參數(shù)氧骤，開發(fā)者可以填寫a-zA-Z0-9的參數(shù)值呻疹，最多128字節(jié)，我這里不傳參數(shù)语淘，直接給了STATE诲宇；
我的邏輯是在用戶登錄成功之后，將當(dāng)前界面的路徑賦值為上面提到的url
window.location.href = weixinURL;
成功之后惶翻，用戶可以訪問到自己的微信公眾號程序姑蓝，并且url中包含code，我們將code解析出來之后吕粗，傳給后臺纺荧，下面是解析的方法
//解析當(dāng)前url當(dāng)中name參數(shù)對應(yīng)的值颅筋，沒有返回null宙暇，
getQueryString(name) {
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
var r = window.location.search.substr(1).match(reg);
if (r != null) {
return unescape(r[2]);
}
return null;
}
上傳圖片
微信公眾號當(dāng)中不能直接使用ionic插件調(diào)用相機(jī)或者相冊，必須使用微信提供的JDK才能實現(xiàn)议泵，大致的使用步驟如下：
首先占贫，也是微信公眾號后臺配置的問題，我們首先要配置一下JS接口安全域名先口，才能正確的拿到簽名型奥；配置安全域名時，不需要加前面的https://
1.在ionic工程的index.html文件中進(jìn)入微信JS-JDK的js文件
<!-- 微信jdk -->
<script scr="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
2.執(zhí)行如下命令碉京，安裝weixin-jdk模塊
npm install weixin-js-sdk
3.在目標(biāo)界面引入模塊
<!-- import {wx} from 'weixin-js-sdk'; 不能這么導(dǎo)入厢汹，識別不出來 -->
import wx from 'weixin-js-sdk';
調(diào)用微信的接口前提是要通過wx.config 配置方法，這個方法正常調(diào)用了谐宙，其他方法才能正常調(diào)用烫葬。
wx.config({
debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來，若要查看傳入的參數(shù)凡蜻，可以在pc端打開搭综，參數(shù)信息會通過log打出，僅在pc端時才會打印咽瓷。
appId: APPID, // 必填设凹，公眾號的唯一標(biāo)識
timestamp: timestamp, // 必填，生成簽名的時間戳
nonceStr: noncestr, // 必填茅姜，生成簽名的隨機(jī)串
signature: signature,// 必填闪朱，簽名
jsApiList: [
'chooseImage',
'previewImage',
'uploadImage',
'downloadImage',
'getLocalImgData'
] // 必填，需要使用的JS接口列表
});
其中钻洒，signature簽名有固定的算法奋姿，微信規(guī)定的。生成簽名的其他參數(shù)不做解析了素标，重點(diǎn)說一下這個url称诗，按照要求，需要截取#好前面的部分头遭，且末尾不能包含多余的"/",上代碼：
//微信的要求寓免，必須是#前面的url癣诱，但是不能包括/,因為我測試了，不行
let tempStr = encodeURIComponent(location.href.split('#')[0]) ;
