angular.js - Angular开发的单页面应用，如何正确地实现在微信里的网页授权和调用js sdk

Question

一个微信公众号的外链网页，使用angular做成了单页应用，目前碰到了 微信网页授权 和 调用 js sdk 的问题

---

微信授权

据我所目前所知，调用了微信授权后，单页应用的入口 url 会长成这样（假定域名为:example.com）：

• ①http://example.com?code=aaabbb/#/home

或者(启用了html5 mode) 长成这样：

• ②http://example.com/home?code=aaabbb

?code=aaabbb, 是微信授权后重定向时填充的，有了这个才能进一步去获取用户信息，参见 微信开发文档 > 获取code

至此，还不会出现问题

---

调用 js sdk

由于Android微信客户端不支持pushState的H5新特性，url②废弃(亲测，确实不能通过验证)，所以入口url是这样：

• http://example.com?code=aaabbb/#/home

现在问题来了，如果没有?code=aaabbb就能通过签名验证, 然后成功调用 js sdk，但实际情况是：如果需要授权?code=aaabbb必然存在，签名验证必定失败。那么到底如何做到授权和调用sdk均可用？？？

我目前的想法和做法是：微信授权重定向到http://example.com?code=aaabbb/#/home后，拿到code，然后再location.href = http://example.com/#/home。这样做是能拿到用户信息，并且成功调用sdk，但问题是每次进入应用，会刷新两次,这样用户体验极差，而且有强迫症的我也接受不了。

请教各位给个靠谱的方案

---

Answer 1

Le front-end pur ne peut pas être implémenté. Vous pouvez uniquement configurer le nom de domaine de la page de rappel d'autorisation vers le serveur backend, puis le rediriger depuis le backend

Answer 2

Vous pouvez utiliser indexOf() pour obtenir la valeur du code

var url  = 'http://example.com?code=aaabbb/#/home';
var n = url.indexOf('code=')+5;
var m = url.indexOf('/#');
var code = url.substr(n, m-1)；

De cette façon, vous pouvez obtenir la valeur du code

Answer 3

Le front-end pur ne peut pas être implémenté. Il se trouve que j'ai récemment réalisé un projet similaire, qui utilisait également angulairejs et implémentait un programme d'une seule page via angulaire-route.js.

Appelez l'interface d'arrière-plan via ajax dans un programme d'une seule page (index.html),
En cas de succès, renvoyez : {status:true,...}
Si vous n'êtes pas connecté et échouez, renvoyez : {status:falst,next : 'login',errmsg :'Error'}
Autres erreurs renvoyées : {status:falst,next:'Prochaine opération',errmsg:'Error'}

Si le statut de retour result.status==false, result.next=='login':

case "login":
    $http.get($api.callback($api.login)).success(function(val){
        //通过后台返回 授权地址
        location.href = val.loginUrl;
    });
    return;

Autorisez à accéder à wxlogin.php. Après avoir vérifié que la connexion est réussie, après avoir défini la SESSION, passez au programme d'une seule page (index.html)
Le programme continuera à appeler l'interface car vous êtes déjà connecté. , il renvoie : {status:true ,...}

Answer 4

L'affiche originale s'est retrouvée avec location.href=""?

Answer 5

Comment cela devrait-il être résolu ? L'auteur publiera la réponse pour le résoudre. Je vais également utiliser Vue pour développer WeChat

.