微信开发小店跳转微信商品页接口的示例分析

这篇文章主要介绍了微信开发小店跳转微信商品页接口的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

成都创新互联专注于东丰网站建设服务及定制,我们拥有丰富的企业做网站经验。 热诚为您提供东丰营销型网站建设,东丰网站制作、东丰网页设计、东丰网站官网定制、成都小程序开发服务,打造东丰网络公司原创品牌,更为您提供东丰网站排名全网营销落地服务。

微信小店接口必须经过微信认证的服务号才可以有权限调用,订阅号无权限。

微信小店

跳转微信商品页接口

wx.openProductSpecificView({

productId: '', // 商品id

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

});


第一、新建jsp页面,并引入js库

jweixin-1.1.0.js是调用微信jsapi的库,所以必须引入,第二行是本案例使用了jquery,所以引入的是jquery库第二、引入界面样式,由于几节界面案例样式太难看,所以这次案例美化了一下界面。

第三、之间的html代码

欢迎来到微信jsapi测试界面-V型知识库

          微信小店接口       跳转微信商品页接口       openProductSpecificView      

第四、之间初始化微信jsapi库添加接口函数

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

jsApiList数组中,最后一项就是我们调用微信小店接口的函数,此函数必须在jsapi库中初始化,否则微信小店跳转微信商品页功能无法调起。

第六、完整的jsp页面代码,读者可直接复制运行

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


  
    ">
    
    微信jsapi测试-V型知识库
    
    
     
   
    
    .desc{
    color: red;
    }
    
  
  
   

欢迎来到微信jsapi测试界面-V型知识库

          微信小店接口       跳转微信商品页接口       openProductSpecificView      

           微信扫一扫       调起微信扫一扫接口       scanQRCode(微信处理结果)       scanQRCode(直接返回结果)      界面操作接口
      隐藏右上角菜单接口
      hideOptionMenu
      显示右上角菜单接口
      showOptionMenu
      关闭当前网页窗口接口
      closeWindow
      批量隐藏功能按钮接口
      hideMenuItems
      批量显示功能按钮接口
      showMenuItems
      隐藏所有非基础按钮接口
      hideAllNonBaseMenuItem
      显示所有功能按钮接口
      showAllNonBaseMenuItem
      

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

         
     地理位置接口-使用微信内置地图查看位置接口
      openLocation
      地理位置接口-获取地理位置接口
      getLocation
     获取网络状态接口
      getNetworkType
      图像接口       拍照或从手机相册中选图接口
      chooseImage
      预览图片接口
      previewImage
      上传图片接口
      uploadImage
      下载图片接口
      downloadImage
  
  显示图片   

     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   });   wx.ready(function(){       // 5 图片接口   // 5.1 拍照、本地选图   var images = {     localId: [],     serverId: []   };   document.querySelector('#chooseImage').onclick = function () {     wx.chooseImage({       success: function (res) {         images.localId = res.localIds;         alert('已选择 ' + res.localIds.length + ' 张图片');          $("#faceImg").attr("src", res.localIds[0]);//显示图片到页面上       }     });   };   // 5.2 图片预览   document.querySelector('#previewImage').onclick = function () {     wx.previewImage({       current: '/upload/otherpic74/10735.jpg',       urls: [         '/upload/otherpic74/10735.jpg',         '/upload/otherpic74/10735.jpg',         '/upload/otherpic74/10735.jpg'       ]     });   };   // 5.3 上传图片   document.querySelector('#uploadImage').onclick = function () {     if (images.localId.length == 0) {       alert('请先使用 chooseImage 接口选择图片');       return;     }     var i = 0, length = images.localId.length;     images.serverId = [];     function upload() {       wx.uploadImage({         localId: images.localId[i],         success: function (res) {           i++;           //alert('已上传:' + i + '/' + length);           images.serverId.push(res.serverId);           if (i < length) {             upload();           }         },         fail: function (res) {           alert(JSON.stringify(res));         }       });     }     upload();   };   // 5.4 下载图片   document.querySelector('#downloadImage').onclick = function () {     if (images.serverId.length === 0) {       alert('请先使用 uploadImage 上传图片');       return;     }     var i = 0, length = images.serverId.length;     images.localId = [];     function download() {       wx.downloadImage({         serverId: images.serverId[i],         success: function (res) {           i++;           alert('已下载:' + i + '/' + length);           images.localId.push(res.localId);           if (i < length) {             download();           }         }       });     }     download();   };   // 6 设备信息接口   // 6.1 获取当前网络状态   document.querySelector('#getNetworkType').onclick = function () {     wx.getNetworkType({       success: function (res) {         alert(res.networkType);       },       fail: function (res) {         alert(JSON.stringify(res));       }     });   };   //网络接口结束   // 7 地理位置接口 开始   // 7.1 查看地理位置   document.querySelector('#openLocation').onclick = function () {     wx.openLocation({       latitude: 23.099994,       longitude: 113.324520,       name: 'TIT 创意园',       address: '广州市海珠区新港中路 397 号',       scale: 14,       infoUrl: 'http://weixin.qq.com'     });   };   // 7.2 获取当前地理位置   document.querySelector('#getLocation').onclick = function () {     wx.getLocation({       success: function (res) {         alert(JSON.stringify(res));       },       cancel: function (res) {         alert('用户拒绝授权获取地理位置');       }     });   };   // 7 地理位置接口 结束    // 8 界面操作接口 开始-----------   // 8.1 隐藏右上角菜单   document.querySelector('#hideOptionMenu').onclick = function () {     wx.hideOptionMenu();   };   // 8.2 显示右上角菜单   document.querySelector('#showOptionMenu').onclick = function () {     wx.showOptionMenu();   };   // 8.3 批量隐藏菜单项   document.querySelector('#hideMenuItems').onclick = function () {     wx.hideMenuItems({       menuList: [         'menuItem:readMode', // 阅读模式         'menuItem:share:timeline', // 分享到朋友圈         'menuItem:copyUrl' // 复制链接       ],       success: function (res) {         alert('已隐藏“阅读模式”,“分享到朋友圈”,“复制链接”等按钮');       },       fail: function (res) {         alert(JSON.stringify(res));       }     });   };   // 8.4 批量显示菜单项   document.querySelector('#showMenuItems').onclick = function () {     wx.showMenuItems({       menuList: [         'menuItem:readMode', // 阅读模式         'menuItem:share:timeline', // 分享到朋友圈         'menuItem:copyUrl' // 复制链接       ],       success: function (res) {         alert('已显示“阅读模式”,“分享到朋友圈”,“复制链接”等按钮');       },       fail: function (res) {         alert(JSON.stringify(res));       }     });   };   // 8.5 隐藏所有非基本菜单项   document.querySelector('#hideAllNonBaseMenuItem').onclick = function () {     wx.hideAllNonBaseMenuItem({       success: function () {         alert('已隐藏所有非基本菜单项');       }     });   };   // 8.6 显示所有被隐藏的非基本菜单项   document.querySelector('#showAllNonBaseMenuItem').onclick = function () {     wx.showAllNonBaseMenuItem({       success: function () {         alert('已显示所有非基本菜单项');       }     });   };   // 8.7 关闭当前窗口   document.querySelector('#closeWindow').onclick = function () {     wx.closeWindow();   };  // 8 界面操作接口  结束------------------------------------------  // 9 微信原生接口 开始---------------------   // 9.1.1 扫描二维码并返回结果   document.querySelector('#scanQRCode0').onclick = function () {     wx.scanQRCode();   };   // 9.1.2 扫描二维码并返回结果   document.querySelector('#scanQRCode1').onclick = function () {     wx.scanQRCode({       needResult: 1,       desc: 'scanQRCode desc',       success: function (res) {         alert(JSON.stringify(res));       }     });   };  // 9 微信原生接口 结束---------------------  // 11.3  跳转微信商品页 开始--------------   document.querySelector('#openProductSpecificView').onclick = function () {     wx.openProductSpecificView({       productId: 'pDF3iY_m2M7EQ5EKKKWd95kAxfNw',       extInfo: '123'     });   };    // 11.3  跳转微信商品页 结束-------------- });    //初始化jsapi接口 状态 wx.error(function (res) {   alert("调用微信jsapi返回的状态:"+res.errMsg); });     

上述jsp代码中有四个参数,这四个参数是成功调用微信jsapi的凭证,分别为appId(必填,公众号的唯一标识),timestamp(必填,生成签名的时间戳), nonceStr(必填,生成签名的随机串) ,signature(必填,签名),关于如何生成这四个参数,如果不知道的读者,请查看本页面左上角的菜单,里面有详细介绍,在这里不在累述。

感谢你能够认真阅读完这篇文章,希望小编分享的“微信开发小店跳转微信商品页接口的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!


当前名称:微信开发小店跳转微信商品页接口的示例分析
分享地址:http://myzitong.com/article/pgpoes.html