Application légère H5 nouvelle version JS

Appel du composant d'application léger de la version H5

Composant d'application léger de la version H5 fait référence à la version mobile de l'application légère (intégrée dans le client Weibo) qui est fournie pour accéder aux applications afin d'évoquer les fonctions natives du pack de fonctionnalités JavaScript de Weibo.

Permet aux applications légères d'accomplir des fonctions telles que l'obtention de l'état actuel du réseau, l'obtention d'informations de localisation, le déclenchement de la numérisation du code QR du client, l'affichage de grandes images, etc. Il fournit également certains composants pour accéder aux parties à appeler, tels que les composants du carnet d'adresses partagé.

Conditions d'utilisation

Client officiel Weibo Android et iPhone version 5.3.0 ou supérieure navigateur intégré.

Définissez un nom de domaine sécurisé

Cliquez sur Mes applications en haut pour ouvrir l'application légère qui doit être configurée
Sélectionnez "Informations sur l'application" dans la navigation de gauche
Modifiez les informations de base de l'application, remplissez dans le nom de domaine sécurisé et enregistrez-le

Remarque : Le nom de sous-domaine configuré avec un nom de domaine sécurisé obtiendra également l'autorisation d'appel de JSBridge

Introduire les fichiers JS

Pour utiliser la version H5 du JS API, vous devez d'abord introduire un fichier JS.

<script src="http://tjs.sjs.sinajs.cn/open/thirdpart/js/jsapi/mobile.js" charset="utf-8"></script> 

Ce fichier JS utilisera l'espace de noms global WeiboJS, qui fournit trois méthodes JS :

• WeiboJS.init() Objectif : initialiser avant d'appeler Bridge
• WeiboJS.invoke() Objectif : appeler l'action Bridge ou un composant
• WeiboJS.on() Objectif : surveiller les événements de Bridge

Les éléments suivants sont expliqués un par un :

WeiboJS.init()

Grâce à l'initialisation de la méthode `window.WeiboJS` ` pour initialiser.

- Liste des paramètres :

`appkey` : obligatoire, appkey pour les applications légères
`debug` : facultatif, commutateur de débogage
`timestamp` : obligatoire, horodatage utilisé pour la signature
`noncestr` : obligatoire, le chaîne aléatoire utilisée pour la signature
`signature` : obligatoire, la signature calculée, veuillez consulter la fin du document pour la méthode de signature
`scope` : obligatoire, la liste des API que l'application légère doit appeler, est un tableau de chaînes
`callback` : obligatoire, la fonction de rappel après le succès ou l'échec de l'initialisation, WeiboJS.invoke() ou WeiboJS.on() doit attendre que le rappel ici réussisse avant de s'exécuter

Par exemple :

WeiboJS.invoke()

Appelez l'action de pont via la méthode `invoke` de `window.WeiboJS`.

Par exemple :

);

Le premier paramètre est l'action à appeler, le deuxième est la liste des paramètres et le troisième est la fonction de rappel.

Liste d'actions

getNetworkType Obtenir l'état du réseau

- Liste des paramètres : Aucune

- Valeur de retour : `{"network_type": "wwan"}`, `wwan` représente 2G ou 3G, `wifi` Représente le WIFI, `fail` représente aucun réseau

getBrowserInfo Obtient les informations de base du navigateur

- Liste des paramètres : Aucun

- Valeur de retour : `{"clientVersion": "5.3.0", "isWeiboClient" : vrai, "browserType": "normal"}` Parmi eux, `clientVersion` représente le numéro de version du client, `isWeiboClient` indique si le client Weibo actuel l'est, `browserType` représente le type de navigateur : normal=navigateur normal, topnav=navigateur sans fond, infopage=objet de navigation sur la page de texte Appareil

checkAvailability Vérifier la disponibilité de l'API

- Liste de paramètres : api_list Tableau de chaînes, indiquant la liste d'API qui doit être vérifiée, par exemple : ["getNetworkType", "setBrowserTitle"]

- Valeur de retour : `{" getNetworkType": true, "setBrowserTitle": true}` où true signifie qu'il y a une autorisation d'appeler, false signifie qu'il n'y a pas d'autorisation d'appeler

setBrowserTitle Définir le titre de navigation supérieur

- Liste des paramètres :

`title` : nouveau titre, obligatoire

- Valeur de retour : Aucune

- Remarque : Le titre défini par cette méthode a la priorité la plus élevée

- Code d'erreur :

`MISSING_PARAMS` : Le paramètre `title` n'a pas été transmis

openMenu ouvre le menu dans le coin supérieur droit du navigateur

- Liste des paramètres : Aucun

- Valeur de retour : `{"selected_code": 1001, "selected_title": Partager avec Weibo}` où selected_code représente le bouton correspondant à la sélection de l'utilisateur Codage, le bouton inconnu est 0, les boutons généraux sont présentés en annexe 2, selected_title représente la copie du menu sélectionné par l'utilisateur

setMenuItems Définir le menu dans le coin supérieur droit du navigateur [Partager, ajouter un suivi]

- menus : ["shareToWeibo", "follow"], le nom du menu, jusqu'à 5 éléments

- contenu : copie par défaut

- valeur de retour : aucune

- remarque : follow suit le propriétaire de la clé d'application

Par exemple :

WeiboJS.invoke("getNetworkType", {"param" : "value"}, function (params, succès, code) {
    if (succès) {
        document.write('网络状态是' + params.network_type);
    } else {
        if (code == WeiboJS.STATUS_CODE.NO_RESULT) {
            // faire quelque chose.
         }
    }
});

setSharingContent Définir le contenu de partage

- Liste de paramètres : {"icon": "", "title": "", "desc": ""} où l'icône représente l'URL de l'image, le titre représente le titre et desc représente la copie

- Valeur de retour : Aucune

- Remarque : Ce qui est défini ici est la copie par défaut pour le partage sur des plateformes tierces

openImage Agrandir l'image

- Liste des paramètres :

`url ` : src de l'image actuellement sélectionnée ;
`urls` : src de toutes les images de la page actuelle, utilisée pour prendre en charge la visualisation par glissement horizontal

- Valeur de retour : Aucune

- Code d'erreur :

`MISSING_PARAMS` : ` url` et `urls` sont au moins Nécessité de passer un

scanQRCode pour scanner le code QR

- Liste des paramètres : Aucun

- Valeur de retour : `{"result": "http:/ /weibo.com"}`

- Code d'erreur :

`USER_CANCELLED` : L'utilisateur a annulé l'analyse
`SERVICE_FORBIDDEN` : L'appareil n'a pas de caméra ou l'utilisateur n'est pas autorisé à utiliser la caméra

pickImage Obtenir des photos

- Liste des paramètres :

`source ` : `camera` sert à prendre des photos, d'autres servent à sélectionner dans l'album

- Valeur de retour : `{"base64": "9sa1..."}`

- Code d'erreur :

`USER_CANCELLED` : L'utilisateur a annulé la sélection des images
`SERVICE_FORBIDDEN` : L'appareil n'a pas d'appareil photo ou l'utilisateur n'est pas autorisé à sélectionner des images

pickContact Sélectionner des contacts

- Liste des paramètres :

`count` : 1, indiquant le nombre maximum de personnes à choisir

- Valeur de retour : `[{"uid": "1406758883", "screen_name": "Bencalie", "avatar_url" : ""}]`

- Code d'erreur :

`USER_CANCELLED` : Utilisateur annulé Sélectionné
`SERVICE_FORBIDDEN` : Service non disponible

getLocation location

- Liste des paramètres : Aucun

- Valeur de retour : `{"lat": 100, "long": 100}`

- Code d'erreur :

`SERVICE_FORBIDDEN` : Le service de localisation n'est pas disponible
`NO_RESULT ` : Échec de l'obtention de l'emplacement

login invoque la fonction de connexion

- Liste des paramètres :

`redirect_uri` : adresse de rappel après la connexion, obligatoire. Et l'URL doit commencer par http://apps.weibo.com, les URL de tout autre nom de domaine ne sont pas acceptées

- Valeur de retour : Aucune

WeiboJS.invoke("login", {
 "redirect_uri" : encodeURIComponent("http://apps.weibo.com/test/1406758883/2I8KtA/demo/game/yangtuo")
}, fonction (paramètres, succès , code) {}) ; ert( "Élément de menu obtenu:" + json.stringify (params.Available_codes)); 
}); 

Version prise en charge du Client: 5.4.5

InvokeMeUtem Trigger Menu Item

 
WeiboJS.invoke("invokeMenuItem", {code: code de menu, voir Annexe 2}, function(params){});

Version prise en charge par le client : 5.4.5

audioMetersChange microphone Changement de volume

WeiboJS.on("audioMetersChange", function(params){
 SafeAlert("Changement de volume du microphone : " + JSON.stringify(params));
});

Version prise en charge par le client : 5.4.5

Paiement Weibo du caissier

Liste des paramètres :

sign_type : Type de signature, ne prend actuellement en charge que RSA

sign : Type de signature

appkey : Appkey du commerçant, distinguer es différentes entreprises des commerçants

seller_id : identifiant Weibo du commerçant

out_pay_id : numéro de commande du commerçant, numéro unique du site Web du commerçant, 6 à 64 chiffres

notify_url : adresse de notification asynchrone

return_url : adresse de la page de rappel une fois le paiement effectué

sujet : Nom du produit

total_amount : Prix total du produit en centimes

body : Description du produit

Valeur de retour : Aucune

Exemple d'appel :

WeiboJS.invoke("cashier", {
 sign_type : "RSA",
 signe : "",
 appkey : "",
 seller_id : ,
 out_pay_id : "",
 notify_url : "",
 return_url : "",
 sub jet : "",
 body :"" 
 total_amount:,
}, function(params){
 safeAlert(JSON.stringify(params));
});

Status Code list

Le code d'état sera dans le rappel du action操Ok : Opération réussie

Missing_params : Manque de paramètres nécessaires

illegal_access : appels illégaux

Internal_error : L'erreur de traitement du client ACTION_NOT_FOUND : Le client ne se rend pas compte de cette Actionno_result : Le client ne l'obtient pas Conséquences USER_CANCELLED : Le l'utilisateur a annulé l'opération 
SERVICE_FORBIDDEN : les services associés ne sont pas activés ou interdits (tels que les services de localisation, les autorisations d'album photo) 

La page Web traite la valeur du code de rappel en la comparant avec la valeur ci-dessus

if (code == WeiboJS.STATUS_CODE.NO_RESULT) {
 // Le client n'a pas obtenu le résultat
}

WeiboJS.on()

Parfois, le natif enverra des notifications d'événements à la page Web, et la page Web peut les recevoir de manière sélective.

WeiboJS.on('networkTypeChanged', function(params){
document.write('L'état du réseau a changé :' + params.network_type);
});

Liste des événements

networkTypeChanged Modifications de l'état du réseau

- Résultat de retour :

`network_type` : statut modifié, `wwan` ou `wifi` ou `fail`

menuItemSelected Sélectionnez un élément de menu du navigateur

- Résultat de retour :

`selected_code` : Le code correspondant au bouton sélectionné par l'utilisateur. Le bouton inconnu est 0. Voir Annexe 2 pour les boutons généraux
`selected_title : Le titre du bouton sélectionné par l'utilisateur

Événement de rotation d'écran orientationChange

- Conditions d'utilisation : Aucune

- Résultat renvoyé :

`orientation` : L'état de l'orientation de l'écran, c'est-à-dire la valeur de window.orientation

Composant de carnet d'adresses partagé [nécessite une application pour la liste blanche]】

Le composant de carnet d'adresses partagé est utilisé par la partie d'accès pour obtenir l'adresse de livraison de l'utilisateur Weibo actuel sur Weibo. Il est actuellement en phase d’essai interne et n’est pas ouvert à toutes les parties prenantes.

Les composants se présentent sous deux formes :

Version PC :

Version H5 :

La première étape consiste à utiliser le composant de carnet d'adresses partagé. Une application est requise. Veuillez envoyer la clé d'application à wanglei25@staff.weibo.com pour demander l'autorisation d'utiliser ce composant.

La deuxième étape est le développement du code. Le composant de carnet d'adresses partagé propose deux actions pour appeler :

Méthode d'appel de la version PC : (Vous pouvez également cliquer ici)

1 Obtenir l'adresse de livraison par défaut

App.trigger('deliverAddress:default', function(addr. ){ /* fonction de rappel*/ });

2. Sélectionnez d'autres adresses de livraison (les adresses peuvent être ajoutées, supprimées ou modifiées)

App.trigger('deliverAddress:change', function(addr){ /* Fonction de rappel*/ }) ; >

<title>Composant du carnet d'adresses partagé Version Web</title>

</head>
<body>

<div id="address">Lecture de l'adresse de livraison...< /div>;
                                                                                                                                                 ; var adresse = $("adresse");
if(addr == null){
         address.innerHTML = "Aucune adresse de livraison par défaut";
                                                                                                                                                                                  r.address ; // Obtenir l'adresse de livraison par défaut de la personne actuellement connectée ; dans l'utilisateur
         utiliser utiliser utiliser ' ' s '       à travers out off off 's ‐ ‐ out‐' ‐    adresse '). Liveaddress : Changer', Showaddress); /& Lt; /html & gt;

Méthode d'appel de la version H5 :

1. Obtenez l'adresse de livraison par défaut

WeiboJS.invoke("deliverAddress:default", {}, function(addr){ /* callback function*/ });

2 , sélectionnez d'autres adresses de livraison (les adresses peuvent être ajoutées, supprimées et modifiées)

WeiboJS.invoke("deliverAddress:change", {}, function(addr){ /* callback function*/ });

Complete H5 Exemple d'appel de version :

<!DOCTYPE html>
<html>
<head>
                                                                                                                                                                   Version</ title>
</head>
<body>
                                                                                                                                                  ;
                                                                                                                                                          ; Script & gt;
Function $ (o) {
Var address = $ ("A" A "A" adresse "); s if if (adr == null){
   using using using using using using using through using ' 's ' en utilisant '    via ' s ‐ ‐ à ‐ ‐‐‐‐ adresse.innerHTML = "Aucune adresse de livraison par défaut" ;
" + adresse.                                Obtenir l'adresse de livraison par défaut de l'utilisateur actuellement connecté
         WeiboJS.invoke("deliverAddress:default", {}, showAddress Interface
); $('adresse')
<

Guide inférieur de l'application Light H5 [Besoin de demander une liste blanche]

L'application Light est maintenant affichée dans le navigateur intégré de la page de texte de l'objet dans le client Weibo (il y a un bouton J'aime en bas), qui a certains défauts, tels que :

ne prend pas en charge le partage des pages internes. Par exemple, s'il y a un objet dans votre application, cliquez sur le lien dans l'objet et l'iframe passera à une URL non-objet. À ce stade, si vous cliquez sur Suivant, vous partagerez toujours les informations de l'objet. je viens d'arriver.
La rédaction de partage personnalisée n'est pas prise en charge. Pour l'éditeur évoqué en cliquant sur Suivant, la copie est fixe et vous ne pouvez pas la modifier.
Faible personnalisation

Actuellement, Light App fournit un composant de navigation inférieure H5, qui est implémenté avec HTML+JavaScript. Il est presque identique à l'interface utilisateur de navigation inférieure de la page de texte d'objet actuelle, mais il peut prendre en charge le partage de pages interne et la rédaction. Peut être personnalisé selon vos envies. Il est actuellement en phase d’essai interne et n’est pas ouvert à toutes les parties prenantes.

Méthode d'accès :

La première étape consiste à utiliser le guide inférieur de l'application légère H5. L'application est requise. Veuillez envoyer la clé d'application à wanglei25@staff.weibo.com pour demander l'autorisation d'utiliser ce composant.

La deuxième étape consiste à introduire le JS de la version mobile du composant d'application léger dans les pages qui doivent prendre en charge le partage de pages interne.

<script src="http://tjs.sjs.sinajs.cn/open/thirdpart/js/pageapp/mobile/jsapi.js" charset="utf-8"></ script>

À ce moment, vous pouvez voir le composant directement.

La troisième étape consiste à modifier la copie de partage par défaut.

WeiboJS.invoke('bottomNavigation:info', {
 "title" : "Ma copie de partage, écris ce que tu veux, haha"
}, function(){});

Exemple complet :

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8" />
 <title> </title>
</head>
<body>
 <script src="http://tjs.sjs.sinajs.cn/open/thirdpart/js/pageapp/mobile/jsapi.js" jeu de caractères ="utf-8"></script>
                                                                                                                                                     
                                                                                                                                                                                                                     ​ 


Exemple d'appel complet : 

fonction showWeiboRun(data){

document. écrire ( JSON.stringify(data))

}WeiboJS.invoke("weiboRun", {}, showWeiboRun);

Composant de récompense d'application légère

WeiboJS.invoke("reward", {"display" : "oid","seller" : ""," oid" : "","show_url" : "","share" : ""}, fonction (params, succès, code) {

if (succès) {

// faire quelque chose. } else { alert(params .msg); }});

Démo du composant H5 de l'application Light

Veuillez utiliser le client Weibo pour scanner le code QR ci-dessous pour voir la démo Démo :

Pour plus de détails sur les interfaces impliquées dans la démo, veuillez vous référer au document suivant :

Guide d'accès à l'application de paiement Weibo : http://open.weibo.com/wiki/Guide d'accès à l'application de paiement Weibo

Document de l'interface API Weibo : http://open.weibo.com/wiki/%E5%BE % AE%E5%8D%9AAPI

Annexe 1. Méthode de signature

Remarque : Afin de garantir la sécurité de l'application secrète et du ticket, les étapes suivantes doivent être effectuées côté serveur

Appelez l'interface de la plateforme ouverte , transmettez appkey et appsecret pour générer le ticket :

POST https://api.weibo.com/oauth2/js_ticket/generate?client_id=APPKEY&client_secret=APPSECRET

返回值：
{
    "result":true,
    "appkey":"",
    "js_ticket":"",     // 获取到的 ticket
    "expire_time":7199  // ticket 的有效时间（秒）
}

Remarque :

Appeler à nouveau cette interface pendant la période de validité entraînera l'actualisation du ticket et l'ancien sera directement invalide. Par conséquent, le tiers doit mettre en cache le ticket sur le serveur et demander à nouveau le changement d'interface lorsqu'il est sur le point d'expirer. Générez une chaîne de signature :

签名字符串 = "jsapi_ticket=[TICKET]&noncestr=[NONCESTR]&timestamp=[TIMESTAMP]&url=[URL]"

Remarque : veuillez mettre à jour les paramètres de l'URL en temps réel en fonction de l'adresse réelle chargée par. la webview actuelle Parmi eux :

[TICKET] : Le ticket obtenu à l'étape précédente. [NONCESTR] : chaîne aléatoire, doit être cohérente avec la valeur dans la configuration [TIMESTAMP] : l'horodatage UNIX actuel doit être cohérent avec la valeur dans la configuration [URL] : L'URL complète de la page actuelle (sans encodage d'url, sans # ni fragment)

Utilisez l'algorithme sha1 pour générer la signature

签名 = sha1(签名字符串)

Annexe 2, encodage du menu

Weibo : 1001Cercle d'amis : 1002

Message privé : 1003

Amis WeChat : 1004

Moments : 1005

Micro-amis : 1006

Microcercle : 1007

Amis : 1008

Actualités : 1009

Q Q：1010

Qzone： 1011

SMS : 1101

E-mail : 1102

Navigateur système : 2001

Copier le lien : 2002

Paramètre de la taille de police : 2003

← Guide de développement d'applications légères

Spécifications d’examen des applications légères →

soumettre

Application légère H5 nouvelle version JS

Appel du composant d'application léger de la version H5

Conditions d'utilisation

Définissez un nom de domaine sécurisé

Introduire les fichiers JS

WeiboJS.init()

WeiboJS.invoke()

Liste d'actions

getNetworkType Obtenir l'état du réseau

getBrowserInfo Obtient les informations de base du navigateur

checkAvailability Vérifier la disponibilité de l'API

setBrowserTitle Définir le titre de navigation supérieur

openMenu ouvre le menu dans le coin supérieur droit du navigateur

setMenuItems Définir le menu dans le coin supérieur droit du navigateur [Partager, ajouter un suivi]

setSharingContent Définir le contenu de partage

openImage Agrandir l'image

scanQRCode pour scanner le code QR

pickImage Obtenir des photos

pickContact Sélectionner des contacts

getLocation location

login invoque la fonction de connexion

audioMetersChange microphone Changement de volume

Paiement Weibo du caissier

Status Code list

WeiboJS.on()

Liste des événements

networkTypeChanged Modifications de l'état du réseau

menuItemSelected Sélectionnez un élément de menu du navigateur

Événement de rotation d'écran orientationChange

Composant de carnet d'adresses partagé [nécessite une application pour la liste blanche]】

Guide inférieur de l'application Light H5 [Besoin de demander une liste blanche]

}WeiboJS.invoke("weiboRun", {}, showWeiboRun);

// faire quelque chose. } else { alert(params .msg); }});

Démo du composant H5 de l'application Light

Annexe 1. Méthode de signature

Weibo : 1001Cercle d'amis : 1002

Site Web PHP chinois