How to develop WeChat store jump interface to WeChat product page-WeChat Development-php.cn

How to develop WeChat store jump interface to WeChat product page

高洛峰

Release： 2017-03-26 14:25:30

Original

2788 people have browsed it

The WeChat store interface must be authorized by a WeChat-certified service account. Subscription accounts do not have permission.

WeChat store

Jump to WeChat product page interface

##wx.openProductSpecificView({

productId: '', // Product id

viewType: '' // 0. Default value, ordinary product details page 1. Scan the product details page 2. Store product details page

});

First, create a new

jsp page, and introduce js library

###jweixin-1.1. 0.js is a library that calls WeChat jsapi, so it must be imported. The second line is that this case uses jquery, so the jquery library is introduced. Second, the interface style is introduced. Since the interface case styles in several sections are too ugly, this case Beautified the interface.

#Third, the html between Code

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

Copy after login

Fourth, initialize the WeChat jsapi library between <script></script> to add the interface

function

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  
});

Copy after login

jsApiListarray Sixth, the complete jsp page code, readers can directly copy and run

, the last item is the function we call the WeChat store interface, this The function must be initialized in the jsapi library, otherwise the function of the WeChat store to jump to the WeChat product page cannot be activated.

<%@ 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接口   
     

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

      

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

      

     获取网络状态接口

      

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

      

      预览图片接口

      

      上传图片接口

      

      下载图片接口

      

  

  显示图片

Copy after login

There are four parameters in the above jsp code. These four parameters are the credentials for successfully calling WeChat jsapi, respectively appId (required, public account) unique identifier), timestamp (required, timestamp for generating signature), nonceStr (required, random string to generate signature), signature (required, signature), for readers who don’t know how to generate these four parameters, please check the menu in the upper left corner of this page, which has a detailed introduction, here No need to elaborate.

The above is the detailed content of How to develop WeChat store jump interface to WeChat product page. For more information, please follow other related articles on the PHP Chinese website!