> 這里通過外部瀏覽器的模式打開貝店商品的詳情頁面，演示條件編譯和一些API的使用。 ``` <template> <view class="page"> <block v-for="(item, index) of pagedData" :key="index"> <view style="flex-direction: column;"> <view style="height: 750rpx;"> <image v-bind:src="item.img" style="width: 100%; height: 100%;"></image> </view> <view class="title"> {{item.title}} </view> <view style="padding: 20rpx;"> <view> <view> {{item.price}} </view> <view style="padding-left: 20rpx;"> {{item.seller_count}} </view> </view> <view style="flex: 1; justify-content: flex-end;"> <view> <button type="warn" size="mini" @tap="showDetail(item)">購買</button> </view> </view> </view> </view> <view class="divider"></view> </block> </view> </template> <script> export default { data() { return { pagedData: [{ 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萬人在買' }, ], shop_id: 682731, page: 0, has_more: true } }, methods: { loadMoreData() { //加載數據 if (this.has_more) { this.page++; let url = `https://api.beidian.com/mroute.html?method=beidian.h5.shop.product.list&page=${this.page}&shop_id=${this.shop_id}`; uni.request({ url: url, success: (res) => { console.log(res) const data = res.data; this.has_more = res.data.has_more; this.pagedData = this.pagedData.concat(data.shop_products); } }) } else { uni.showToast({ title: "沒有更多數據了" }) } }, showDetail(value) { //https://m.beidian.com/detail/detail.html?iid=29064225&shop_id=682731 let iid = value.iid; let api = `https://m.beidian.com/detail/detail.html?iid=${iid}&shop_id=${this.shop_id}`; // 貝店程序限制，WebView模式下無法打開詳情頁，調用外部瀏覽器打開 // #ifdef APP-PLUS plus.runtime.openURL(api) // #endif //#ifdef H5 window.location.href = 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 }, }, onReachBottom() { //下拉加載更多的數據 this.loadMoreData(); }, async onLoad() { this.page = 0; this.pagedData = []; this.loadMoreData(); } } </script> <style scoped> view { /* margin: 10rpx; border: #8F8F94 solid 1rpx; */ display: flex; flex-direction: row; /* font-size: 28rpx; */ } .page { flex-direction: column; /* min-height: 100vh; */ } .divider { background-color: #8F8F94; height: 10rpx; } .title { padding: 20rpx; font-size: 30rpx; font-weight: bold; } </style> ```