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

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

});

fd5b22aca86680e7d35b0cdc1220512f 2cacc6d41bbb37262a98f745aa00fbf0 

1e6ae4be7540622a805f6b7df21a42db2cacc6d41bbb37262a98f745aa00fbf0

Tout d'abord, créez un nouveau jsp

08bf946e82aaa5d21c5fe1a71c03a7bf

page, et présentez la bibliothèque js

cabf9ec69392cb058e07ae768816242a 2cacc6d41bbb37262a98f745aa00fbf0

<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>

80e44445f794111d339b3c03fbb978be2cacc6d41bbb37262a98f745aa00fbf0

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: '${appId}', // 必填，公众号的唯一标识  
    timestamp: '${ timestamp}' , // 必填，生成签名的时间戳  
    nonceStr: '${ nonceStr}', // 必填，生成签名的随机串  
    signature: '${ signature}',// 必填，签名，见附录1  
    jsApiList: ['checkJsApi',
                'chooseImage',
                'previewImage',
                 'uploadImage',
                 'downloadImage',
                  'getNetworkType',//网络状态接口
                  'openLocation',//使用微信内置地图查看地理位置接口
                  'getLocation', //获取地理位置接口
                  'hideOptionMenu',//界面操作接口1
                  'showOptionMenu',//界面操作接口2
                  'closeWindow' ,  ////界面操作接口3
                  'hideMenuItems',////界面操作接口4
                  'showMenuItems',////界面操作接口5
                  'hideAllNonBaseMenuItem',////界面操作接口6
                  'showAllNonBaseMenuItem',////界面操作接口7
                  'scanQRCode',// 微信扫一扫接口
                  'openProductSpecificView'//微信小店
               ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2  
});

99628e045323e32f4b0a805c2e1bb9e3

Troisièmement, le code html entre 6c04bd5ca3fcae76e30b72ad730ca86d36cc49f0c466276486e50c850b7e4956

Quatrièmement, initialisez la bibliothèque jsapi WeChat entre 3f1c4e4b6b16bbbd69b2ee476dc4f83a2cacc6d41bbb37262a98f745aa00fbf0 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+"/";
%>


  
    
    
    
    
    
    
   
    
  
  
   <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>
     

     
微信扫一扫
      调起微信扫一扫接口
      scanQRCode(微信处理结果)
      scanQRCode(直接返回结果)
     
界面操作接口


      隐藏右上角菜单接口

      hideOptionMenu

      显示右上角菜单接口

      showOptionMenu

      关闭当前网页窗口接口

      closeWindow

      批量隐藏功能按钮接口

      hideMenuItems

      批量显示功能按钮接口

      showMenuItems

      隐藏所有非基础按钮接口

      hideAllNonBaseMenuItem

      显示所有功能按钮接口

      showAllNonBaseMenuItem

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

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

      openLocation

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

      getLocation

     获取网络状态接口

      getNetworkType

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

      chooseImage

      预览图片接口

      previewImage

      上传图片接口

      uploadImage

      下载图片接口

      downloadImage

  

  显示图片
  

  
  

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!