Comment développer l'interface de saut du magasin WeChat vers la page produit WeChat-Développement WeChat-php.cn

Comment développer l'interface de saut du magasin WeChat vers la page produit WeChat

高洛峰

Libérer： 2017-03-26 14:25:30

original

2809 Les gens l'ont consulté

L'interface de la boutique WeChat doit être autorisée par un compte de service certifié par les comptes d'abonnement WeChat n'ont pas d'autorisation.

WeChat Store

Accéder à l'interface de la page produit WeChat

wx.openProductSpecificView({

productId: '', // 商品id

viewType: '' // 0.默认值，普通商品详情页1.扫一扫商品详情页2.小店商品详情页

});

wx.openProductSpecificView({

productId: '', // Product id viewType: '' // 0. Valeur par défaut, page de détails du produit ordinaire 1. Scannez les détails du produit Page 2 . Page de détails du produit du magasin

});

Tout d'abord, créez un nouveau

jsp

page, et présentez la bibliothèque js

<center><h3>欢迎来到微信jsapi测试界面-V型知识库</h3></center>
    <p class="lbox_close wxapi_form">
     <h3 id="menu-shopping">微信小店接口</h3>
      <span class="desc">跳转微信商品页接口</span>
      <button class="btn btn_primary" id="openProductSpecificView">openProductSpecificView</button>
     </p>

Copier après la connexion

< /td >

jweixin-1.1.0.js est une bibliothèque qui appelle WeChat jsapi, elle doit donc être importée. La deuxième ligne est que ce cas utilise jquery, donc c'est le cas. importé. Deuxièmement, la bibliothèque jquery introduit des styles d'interface. Étant donné que les styles de cas d'interface dans plusieurs sections sont trop laids, ce cas embellit l'interface.

wx.config({  
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。  
    appId: &#39;${appId}&#39;, // 必填，公众号的唯一标识  
    timestamp: &#39;${ timestamp}&#39; , // 必填，生成签名的时间戳  
    nonceStr: &#39;${ nonceStr}&#39;, // 必填，生成签名的随机串  
    signature: &#39;${ signature}&#39;,// 必填，签名，见附录1  
    jsApiList: [&#39;checkJsApi&#39;,
                &#39;chooseImage&#39;,
                &#39;previewImage&#39;,
                 &#39;uploadImage&#39;,
                 &#39;downloadImage&#39;,
                  &#39;getNetworkType&#39;,//网络状态接口
                  &#39;openLocation&#39;,//使用微信内置地图查看地理位置接口
                  &#39;getLocation&#39;, //获取地理位置接口
                  &#39;hideOptionMenu&#39;,//界面操作接口1
                  &#39;showOptionMenu&#39;,//界面操作接口2
                  &#39;closeWindow&#39; ,  ////界面操作接口3
                  &#39;hideMenuItems&#39;,////界面操作接口4
                  &#39;showMenuItems&#39;,////界面操作接口5
                  &#39;hideAllNonBaseMenuItem&#39;,////界面操作接口6
                  &#39;showAllNonBaseMenuItem&#39;,////界面操作接口7
                  &#39;scanQRCode&#39;,// 微信扫一扫接口
                  &#39;openProductSpecificView&#39;//微信小店
               ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2  
});

Copier après la connexion

Troisièmement, le code html entre

Quatrièmement, initialisez la bibliothèque jsapi WeChat entre <script></script> pour ajouter une interface

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>


  
    
    
    微信jsapi测试-V型知识库
    
    
    
   
    
  

  
   <center><h3>欢迎来到微信jsapi测试界面-V型知识库</h3></center>
    <p class="lbox_close wxapi_form">
     <h3 id="menu-shopping">微信小店接口</h3>
      <span class="desc">跳转微信商品页接口</span>
      <button class="btn btn_primary" id="openProductSpecificView">openProductSpecificView</button>
     </p>
     
     
微信扫一扫
      调起微信扫一扫接口
      
      
     界面操作接口


      隐藏右上角菜单接口

      

      显示右上角菜单接口

      

      关闭当前网页窗口接口

      

      批量隐藏功能按钮接口

      

      批量显示功能按钮接口

      

      隐藏所有非基础按钮接口

      

      显示所有功能按钮接口

      

      基础接口之判断当前客户端是否支持指定的js接口   
     

     地理位置接口-使用微信内置地图查看位置接口

      

      地理位置接口-获取地理位置接口

      

     获取网络状态接口

      

      图像接口
      拍照或从手机相册中选图接口

      

      预览图片接口

      

      上传图片接口

      

      下载图片接口

      

  

  显示图片

Copier après la connexion

fonction

Dans le jsApiListarray, le dernier élément est la fonction que nous utilisons pour appeler l'interface du magasin WeChat. Cette fonction doit être initialisée dans la bibliothèque jsapi, sinon la fonction du magasin WeChat doit accéder à la page produit WeChat. ne peut pas être activé. Sixièmement, le code complet de la page jsp, les lecteurs peuvent directement copier et exécuter Il y a quatre paramètres dans le code jsp ci-dessus, ces quatre paramètres sont l'appel réussi à WeChat jsapi Les identifiants sont appId (obligatoire, l'identifiant unique du compte officiel), timestamp (obligatoire, l'horodatage pour générer la signature), nonceStr (obligatoire, chaîne aléatoire pour générer la signature), signature (obligatoire, signature), pour les lecteurs qui ne savent pas comment générer ces quatre paramètres, veuillez consulter le menu dans le coin supérieur gauche de cette page, qui contient une introduction détaillée , ici Pas besoin de développer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!