[TOC] # 實戰：加載貝店商品列表 工程文件:UniAPP Basic # 工具準備 > 要實現跨域請求，在HTML5中需要安裝Chrome插件“Allow CORS: Access-Control-Allow-Origin” 通過QQ瀏覽器插件搜索cors，安裝以下插件：  > Easily add (Access-Control-Allow-Origin: \*) rule to the response header. > 安裝完后要在工具欄啟用該插件 Allow CORS: Access-Control-Allow-Origin lets you easily perform cross-domain Ajax requests in web applications. Simply activate the add-on and perform the request. CORS or Cross Origin Resource Sharing is blocked in modern browsers by default (in JavaScript APIs). Installing this add-on will allow you to unblock this feature. Please note that, when the add-on is added to your browser, it is in-active by default (toolbar icon is grey C letter). If you want to activate the add-on, please press on the toolbar icon once. The icon will turn to orange C letter. If you have a feature request, or found a bug to report, please fill the bug report form in the add-on's homepage ([http://mybrowseraddon.com/access-control-allow-origin.html](http://mybrowseraddon.com/access-control-allow-origin.html)). > 直接從官方網站下載安裝，需要你能夠訪問Google網站 # 項目分析 貝店是一個社區營銷模式的新型的電商平臺，允許個人開設貝店，例如作者的貝店邀請碼為690638，任何人下載貝店APP，輸入邀請碼就可以使用貝店購物，同時也可以申請自行開店，每一個貝店有一個唯一的編號，比如作者的貝店編號（shop\_id）為682731用于識別分享的商品的來源，點擊以下鏈接可以直達我的貝店： ``` https://m.beidian.com/shop/shopkeeper.html?shop_id=682731 ``` 以下的示例從貝店加載推薦產品列表。貝店提供推薦列表的API格式如下： ``` https://api.beidian.com/mroute.html?method=beidian.h5.shop.product.list&page=1&shop_id=682731 ``` 其中有兩個參數：加載的數據分頁page和貝店的編號shop\_id，返回JSON格式的數據，包含幾個域，如圖所示  這里我們只用到shop\_products字段，該字段包含貝店店主推薦的商品列表，商品的價格以分為單位，shop\_products的格式如下  商品詳情頁面的鏈接格式為： ``` https://m.beidian.com/detail/detail.html?iid=29064225&shop_id=682731 ``` 其中iid為產品的主鍵，貝店產品詳情頁面信息在WebView中無法打開，需要使用外部瀏覽器瀏覽。 # 迭代1 > 可能會因為商品已經下架導致不能瀏覽，請更換一個商品ID測試就可以了。 定義模版  根據需求設計如圖所示模版，這里為了方便觀察，給每一個視圖顯示了邊框。  本項目使用原生的Flex布局。布局階段圖片使用占位圖圖片生成工具`https://placeholder.com/`，參數為圖片的寬度x高度，單位為像素。 [http://via.placeholder.com/750x250](http://via.placeholder.com/750x250) ``` <template> <view style="flex-direction: column; flex: 1;"> <view class=""> <view style="flex-direction: column; flex: 1;"> <view style="height: 750upx;"> <image src="http://via.placeholder.com/750x750" mode="" style="width: 100%; height: 100%;"></image> </view> <view style="padding-top: 30upx; padding-left: 20upx; padding-right: 20upx; font-size: 30upx; font-weight: bold;"> 啟蒙積木小汽車小飛機組合套裝兒童益智拼裝積木玩具10小盒展示禮盒裝</view> <view style="padding: 20upx;"> <view> <view> ￥100 </view> <view style="padding-left: 20upx;"> 2.13萬人在買 </view> </view> <view style="flex: 1; justify-content: flex-end;"> <view> <button type="warn" size="mini">購買</button> </view> </view> </view> </view> </view> <view style="background-color: #8F8F94; height: 20upx;"></view> </view> </template> <script> var self; export default { data: {}, async onLoad() { self = this; } } </script> <style> view { /* margin: 10upx; border: #8F8F94 solid 1upx; */ display: flex; flex-direction: row; font-size: 28upx; } </style> ``` # 迭代2 填充數據 ``` <template> <view style="flex-direction: column; flex: 1;"> <block v-for="(item,index) in productList" :key="index"> <view class=""> <view style="flex-direction: column; flex: 1;"> <view style="height: 750upx;"> <image :src="item.img" mode="" style="width: 100%; height: 100%;"></image> </view> <view style="padding-top: 30upx; padding-left: 20upx; padding-right: 20upx; font-size: 30upx; font-weight: bold;"> {{item.title}}</view> <view style="padding: 20upx;"> <view> <view> ￥{{item.price}} </view> <view style="padding-left: 20upx;"> {{item.seller_count}} </view> </view> <view style="flex: 1; justify-content: flex-end;"> <view> <button type="warn" size="mini">購買</button> </view> </view> </view> </view> </view> <view style="background-color: #8F8F94; height: 20upx;"></view> </block> </view> </template> <script> var self; export default { data: { productList: [{ img: 'http://via.placeholder.com/750x750', title: '啟蒙積木小汽車小飛機組合套裝兒童益智拼裝積木玩具10小盒展示禮盒裝', price: '￥100', seller_count: '2.13萬人在買' }, { img: 'http://via.placeholder.com/750x750', title: '啟蒙積木小汽車小飛機組合套裝兒童益智拼裝積木玩具10小盒展示禮盒裝', price: '￥100', seller_count: '2.13萬人在買' }, ] }, async onLoad() { self = this; } } </script> <style> view { /* margin: 10upx; border: #8F8F94 solid 1upx; */ display: flex; flex-direction: row; font-size: 28upx; } </style> ``` # 迭代3 換成實際數據。 我們假設有更多的數據并嘗試加載第一頁數據，根據返回的字段has\_more判斷是否還有更多的數據，如果有就更新頁碼再次加載數據，并將返回的數據合并到現有列表。這個例子我們只加載第一頁數據。 ``` var self; export default { data: { productList: [] }, async onLoad() { self = this; let page = 1; let url = `https://api.beidian.com/mroute.html?method=beidian.h5.shop.product.list&page=${page}&shop_id=682731`; uni.request({ url: url, success(res) { const data = res.data; self.productList = data.shop_products; } }) } } ``` 在onLoad事件中，首先將實例指針保存到全局變量self方便在異步請求中訪問實例本身。然后動態生成請求鏈接，使用uni.request異步請求服務器的數據，成功返回數據，將需要的shop\_products字段的內容保存到data的productList域，注意這里的this指針的作用域的更改。 ``` uni.request({ url: url, success(res) { const data = res.data; self.productList = data.shop_products; } }) ``` # 迭代4 接下來，我們希望在新的窗口打開商品的詳情鏈接，詳情頁面的鏈接示例： ``` https://m.beidian.com/detail/detail.html?iid=29064225&shop_id=682731 ``` 由于在APP和微信小程序中打開外部鏈接的權限不一樣，所以使用條件編譯分別處理對應的邏輯。貝店網頁版代碼限制WebView模式下無法打開詳情頁，因此調用外部瀏覽器打開。 > 條件編譯請閱讀官方的文檔 [https://uniapp.dcloud.io/platform](https://uniapp.dcloud.io/platform) ``` // 貝店程序限制，WebView模式下無法打開詳情頁，調用外部瀏覽器打開 // #ifdef APP-PLUS plus.runtime.openURL(api) // #endif 在微信小程序中無法直接打開外部鏈接，因此我們將鏈接復制到剪貼板，提示用戶在瀏覽器中打開。 // #ifdef MP-WEIXIN uni.setClipboardData({ data: api, success: function () { uni.showModal({ title: '提示', content: '鏈接已復制，請在瀏覽器中訪問', showCancel: false, }); } }) // #endif ``` 完整的事件處理代碼： ``` methods: { buy(e) { //獲取自定義屬性的值 const item = e.target.dataset.item; console.log(item) //https://m.beidian.com/detail/detail.html?iid=29064225&shop_id=682731 let iid = item.iid; let api = `https://m.beidian.com/detail/detail.html?iid=${iid}&shop_id=682731`; // 貝店程序限制，WebView模式下無法打開詳情頁，調用外部瀏覽器打開 // #ifdef APP-PLUS plus.runtime.openURL(api) // #endif // 微信小程序中暫時沒有解決方案 // #ifdef MP-WEIXIN uni.setClipboardData({ data: api, success: function() { uni.showModal({ title: '提示', content: '鏈接已復制，請在瀏覽器中訪問', showCancel: false, success: function(res) { if (res.confirm) { console.log('用戶點擊確定'); } else if (res.cancel) { console.log('用戶點擊取消'); } } }); } }) // #endif } } ``` 修改模版代碼，增加購買按鈕的事件處理 ``` <button type="warn" size="mini" :data-item="item" @tap="buy">購買</button> ```