> 这里通过外部浏览器的模式打开贝店商品的详情页面，演示条件编译和一些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> ```