真实的国产乱ⅩXXX66竹夫人,五月香六月婷婷激情综合,亚洲日本VA一区二区三区,亚洲精品一区二区三区麻豆

成都創(chuàng)新互聯(lián)網(wǎng)站制作重慶分公司

微信開發(fā)小店跳轉(zhuǎn)微信商品頁接口的示例分析

這篇文章主要介紹了微信開發(fā)小店跳轉(zhuǎn)微信商品頁接口的示例分析,具有一定借鑒價值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。

成都創(chuàng)新互聯(lián)專注于東豐網(wǎng)站建設服務及定制,我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供東豐營銷型網(wǎng)站建設,東豐網(wǎng)站制作、東豐網(wǎng)頁設計、東豐網(wǎng)站官網(wǎng)定制、成都小程序開發(fā)服務,打造東豐網(wǎng)絡公司原創(chuàng)品牌,更為您提供東豐網(wǎng)站排名全網(wǎng)營銷落地服務。

微信小店接口必須經(jīng)過微信認證的服務號才可以有權(quán)限調(diào)用,訂閱號無權(quán)限。

微信小店

跳轉(zhuǎn)微信商品頁接口

wx.openProductSpecificView({

productId: '', // 商品id

viewType: '' // 0.默認值,普通商品詳情頁1.掃一掃商品詳情頁2.小店商品詳情頁

});


第一、新建jsp頁面,并引入js庫

jweixin-1.1.0.js是調(diào)用微信jsapi的庫,所以必須引入,第二行是本案例使用了jquery,所以引入的是jquery庫第二、引入界面樣式,由于幾節(jié)界面案例樣式太難看,所以這次案例美化了一下界面。

第三、之間的html代碼

歡迎來到微信jsapi測試界面-V型知識庫

          微信小店接口       跳轉(zhuǎn)微信商品頁接口       openProductSpecificView      

第四、之間初始化微信jsapi庫添加接口函數(shù)

wx.config({  
    debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會通過log打出,僅在pc端時才會打印。  
    appId: '${appId}', // 必填,公眾號的唯一標識  
    timestamp: '${ timestamp}' , // 必填,生成簽名的時間戳  
    nonceStr: '${ nonceStr}', // 必填,生成簽名的隨機串  
    signature: '${ signature}',// 必填,簽名,見附錄1  
    jsApiList: ['checkJsApi',
                'chooseImage',
                'previewImage',
                 'uploadImage',
                 'downloadImage',
                  'getNetworkType',//網(wǎng)絡狀態(tài)接口
                  'openLocation',//使用微信內(nèi)置地圖查看地理位置接口
                  'getLocation', //獲取地理位置接口
                  'hideOptionMenu',//界面操作接口1
                  'showOptionMenu',//界面操作接口2
                  'closeWindow' ,  ////界面操作接口3
                  'hideMenuItems',////界面操作接口4
                  'showMenuItems',////界面操作接口5
                  'hideAllNonBaseMenuItem',////界面操作接口6
                  'showAllNonBaseMenuItem',////界面操作接口7
                  'scanQRCode',// 微信掃一掃接口
                  'openProductSpecificView'//微信小店
               ] // 必填,需要使用的JS接口列表,所有JS接口列表見附錄2  
});

jsApiList數(shù)組中,最后一項就是我們調(diào)用微信小店接口的函數(shù),此函數(shù)必須在jsapi庫中初始化,否則微信小店跳轉(zhuǎn)微信商品頁功能無法調(diào)起。

第六、完整的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型知識庫

          微信小店接口       跳轉(zhuǎn)微信商品頁接口       openProductSpecificView      

           微信掃一掃       調(diào)起微信掃一掃接口       scanQRCode(微信處理結(jié)果)       scanQRCode(直接返回結(jié)果)      界面操作接口
      隱藏右上角菜單接口
      hideOptionMenu
      顯示右上角菜單接口
      showOptionMenu
      關(guān)閉當前網(wǎng)頁窗口接口
      closeWindow
      批量隱藏功能按鈕接口
      hideMenuItems
      批量顯示功能按鈕接口
      showMenuItems
      隱藏所有非基礎按鈕接口
      hideAllNonBaseMenuItem
      顯示所有功能按鈕接口
      showAllNonBaseMenuItem
      

基礎接口之判斷當前客戶端是否支持指定的js接口

         
     地理位置接口-使用微信內(nèi)置地圖查看位置接口
      openLocation
      地理位置接口-獲取地理位置接口
      getLocation
     獲取網(wǎng)絡狀態(tài)接口
      getNetworkType
      圖像接口       拍照或從手機相冊中選圖接口
      chooseImage
      預覽圖片接口
      previewImage
      上傳圖片接口
      uploadImage
      下載圖片接口
      downloadImage
  
  顯示圖片   

     wx.config({       debug: true, // 開啟調(diào)試模式,調(diào)用的所有api的返回值會在客戶端alert出來,若要查看傳入的參數(shù),可以在pc端打開,參數(shù)信息會通過log打出,僅在pc端時才會打印。       appId: '${appId}', // 必填,公眾號的唯一標識       timestamp: '${ timestamp}' , // 必填,生成簽名的時間戳       nonceStr: '${ nonceStr}', // 必填,生成簽名的隨機串       signature: '${ signature}',// 必填,簽名,見附錄1       jsApiList: ['checkJsApi',                 'chooseImage',                 'previewImage',                  'uploadImage',                  'downloadImage',                   'getNetworkType',//網(wǎng)絡狀態(tài)接口                   'openLocation',//使用微信內(nèi)置地圖查看地理位置接口                   '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 獲取當前網(wǎng)絡狀態(tài)   document.querySelector('#getNetworkType').onclick = function () {     wx.getNetworkType({       success: function (res) {         alert(res.networkType);       },       fail: function (res) {         alert(JSON.stringify(res));       }     });   };   //網(wǎng)絡接口結(jié)束   // 7 地理位置接口 開始   // 7.1 查看地理位置   document.querySelector('#openLocation').onclick = function () {     wx.openLocation({       latitude: 23.099994,       longitude: 113.324520,       name: 'TIT 創(chuàng)意園',       address: '廣州市海珠區(qū)新港中路 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('用戶拒絕授權(quán)獲取地理位置');       }     });   };   // 7 地理位置接口 結(jié)束    // 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 關(guān)閉當前窗口   document.querySelector('#closeWindow').onclick = function () {     wx.closeWindow();   };  // 8 界面操作接口  結(jié)束------------------------------------------  // 9 微信原生接口 開始---------------------   // 9.1.1 掃描二維碼并返回結(jié)果   document.querySelector('#scanQRCode0').onclick = function () {     wx.scanQRCode();   };   // 9.1.2 掃描二維碼并返回結(jié)果   document.querySelector('#scanQRCode1').onclick = function () {     wx.scanQRCode({       needResult: 1,       desc: 'scanQRCode desc',       success: function (res) {         alert(JSON.stringify(res));       }     });   };  // 9 微信原生接口 結(jié)束---------------------  // 11.3  跳轉(zhuǎn)微信商品頁 開始--------------   document.querySelector('#openProductSpecificView').onclick = function () {     wx.openProductSpecificView({       productId: 'pDF3iY_m2M7EQ5EKKKWd95kAxfNw',       extInfo: '123'     });   };    // 11.3  跳轉(zhuǎn)微信商品頁 結(jié)束-------------- });    //初始化jsapi接口 狀態(tài) wx.error(function (res) {   alert("調(diào)用微信jsapi返回的狀態(tài):"+res.errMsg); });     

上述jsp代碼中有四個參數(shù),這四個參數(shù)是成功調(diào)用微信jsapi的憑證,分別為appId(必填,公眾號的唯一標識),timestamp(必填,生成簽名的時間戳), nonceStr(必填,生成簽名的隨機串) ,signature(必填,簽名),關(guān)于如何生成這四個參數(shù),如果不知道的讀者,請查看本頁面左上角的菜單,里面有詳細介紹,在這里不在累述。

感謝你能夠認真閱讀完這篇文章,希望小編分享的“微信開發(fā)小店跳轉(zhuǎn)微信商品頁接口的示例分析”這篇文章對大家有幫助,同時也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,更多相關(guān)知識等著你來學習!


網(wǎng)站名稱:微信開發(fā)小店跳轉(zhuǎn)微信商品頁接口的示例分析
路徑分享:http://weahome.cn/article/pgpoes.html

其他資訊

在線咨詢

微信咨詢

電話咨詢

028-86922220(工作日)

18980820575(7×24)

提交需求

返回頂部