1. この機能を実現するには、クロスドメインに vue-jsonp を使用する必要があります
JSONP はクロスドメイン データ リクエストのソリューションであり、スクリプト要素を使用してデータをリクエストし、コールバック関数を使用してデータをページに送り返します。
Vue フレームワークは JSONP のサポートを提供するため、Vue アプリケーションで JSONP を使用してクロスドメイン データを簡単に取得できるようになります。Vue で JSONP を使用する手順を見てみましょう。
ステップ 1: Vue アプリケーションに jsonp プラグインをインストールします。
yarn add vue-jsonpステップ 2: Vue アプリケーションのエントリ ポイントで jsonp プラグインを参照してインストールします。
import { VueJsonp } from 'vue-jsonp'
Vue.use(VueJsonp)2. uniappのmanifest.jsonのWeb設定でマップを設定するには、TencentマップAPIにキーを入力します。私は個人的にTencentマップを使用しています。
manifest.json のソース ビューで、H5 関連の構成を参照してください。
次に、必要なページに移動してコードを見つけて記述します
// #ifdef H5
let url = 'https://apis.map.qq.com/ws/geocoder/v1/'
let data = {
location: res.latitude + ',' + res.longitude,
key: 'NJNBZ-XS33X-WOM4O-ZLIG5-POXA3-ILFJC',
output: 'jsonp',
callback: 'jsonp'
}
console.log(this);
this.$jsonp(url, data).then(res => {
if (res.status == 0) {
console.log(res)
} else {
console.log(res)
}
})
// #endif以下はページの完全なコードです
<template>
<view>
<!-- #ifdef MP -->
<search-slot>
<view class="mx-1" slot="left">
<text class="iconfont icon-xiaoxi"></text>
</view>
<view class="flex-1 search-title text-muted" slot="center" @click="goSearch">
请输入搜索内容
</view>
<view class="mx-1" slot="right" @click="scanCode">
<text class="iconfont icon-richscan_icon"></text>
</view>
</search-slot>
<!-- #endif -->
<view style="height: 60rpx;line-height: 60rpx;background-color: rgba(255,0,0,0.1);">
{
{address}}
</view>
<scroll-view scroll-x="true" class="white-space mt-1 scroll-title" :scroll-into-view="scrollinto">
<view v-for="(item,index) in navbars" :key="index" :id="'tab'+index" class="d-inline-block mx-2"
:class="currentIndex==index?'active':''" @click="changeTab(index)">{
{item.name}}</view>
</scroll-view>
<swiper :style="'height:'+scrollH" :current="currentIndex" @change="changeIndex">
<swiper-item v-for="(newItem,i) in newsItems" :key="i" :style="'height:'+scrollH">
<!-- <view style="height:300px ;">
{
{JSON.stringify(news.type)}}
</view> -->
<view class="swiper-item">
<scroll-view scroll-y="true" :style="'height:'+scrollH" @scrolltolower="scrolltolower(i)">
<template v-if="newItem.list.length>0">
<block v-for="(news,j) in newItem.list" :key="j">
<!-- 轮播图 -->
<template v-if="news.type=='swiper'">
<swiper-banner :swipers="news.data"></swiper-banner>
</template>
<!-- 金刚区-->
<template v-else-if="news.type=='indexnavs'">
<fast-navs :pagees="pagees"></fast-navs>
</template>
<template v-else-if="news.type=='threeAdv'">
<!-- 瓷片区 -->
<divider></divider>
<three-adv :news="news.data"></three-adv>
</template>
<template v-else-if="news.type=='oneAdv'">
<one-adv :title="news.data.title" :cover="news.data.cover"></one-adv>
</template>
<template v-else-if="news.type=='list'">
<common-list :news="news.data"></common-list>
</template>
</block>
<view class="text-center text-muted my-1">{
{newItem.loadmore}}</view>
</template>
<template v-else-if="newsItems[i].forward=='before'">
<view class="text-center text-dark">
加载中…
</view>
</template>
<template v-else>
<view class="text-center text-dark">
暂无数据
</view>
</template>
</scroll-view>
</view>
</swiper-item>
</swiper>
<sk-index v-if="isSkShow"></sk-index>
</view>
</template>
<script>
var QQMapWX = require('../../common/lib/qqmap-wx-jssdk.min.js');
import {
getHome,
getPage
} from '../../api/index.js'
export default {
data() {
return {
isSkShow:true,
address: "",
qqmapsdk: "",
scrollH: 0,
scrollinto: '',
currentIndex: 0,
navbars: [],
newsItems: []
}
},
onLoad() {
uni.getSystemInfo({
success: (e) => {
// #ifdef APP-PLUS||H5
this.scrollH = e.windowHeight - uni.upx2px(98) + 'px'
// #endif
// #ifdef MP
this.scrollH = e.windowHeight - uni.upx2px(266) + 'px'
// #endif
}
}),
this.qqmapsdk = new QQMapWX({
key: 'NJNBZ-XS33X-WOM4O-ZLIG5-POXA3-ILFJC'
});
uni.getLocation({
type: 'gcj02',
highAccuracyExpireTime: 100,
success: (res) => {
console.log('当前位置的经度：' + res.longitude);
console.log('当前位置的纬度：' + res.latitude);
// #ifdef MP
this.qqmapsdk.reverseGeocoder({
location: {
latitude: res.latitude,
longitude: res.longitude
},
success: (res2) => {
console.log('221432423');
console.log(res2);
this.address = res2.result.address
}
})
// #endif
// #ifdef H5
let url = 'https://apis.map.qq.com/ws/geocoder/v1/'
let data = {
location: res.latitude + ',' + res.longitude,
key: 'NJNBZ-XS33X-WOM4O-ZLIG5-POXA3-ILFJC',
output: 'jsonp',
callback: 'jsonp'
}
console.log(this);
this.$jsonp(url, data).then(res => {
if (res.status == 0) {
console.log(res)
} else {
console.log(res)
}
})
// #endif
}
});
},
onNavigationBarSearchInputClicked() {
uni.navigateTo({
url:'/pages/search/search'
})
},
//原生跳转到搜索页
onNavigationBarButtonTap(e) {
console.log(e);
},
mounted() {
this.gethome()
},
computed: {
pagees() {
let pages = [] //[[1,2,3,4,5,6,7,8],[9,10]]
let index = this.currentIndex
if (this.newsItems[index]) {
this.newsItems[index].list.map(item => {
if (item.type == 'indexnavs') {
let indexnavs = Object.values(item.data)
indexnavs.forEach((v, i) => {
let page = Math.floor(i / 8)
if (!pages[page]) {
pages[page] = []
}
pages[page].push(v)
})
}
})
}
return pages
}
},
methods: {
//请求数据
gethome() {
getHome().then(res => {
console.log('res=>', res);
this.navbars = res.data.category
var arr = []
for (var i = 0; i < this.navbars.length; i++) {
let forward = i == 0 ? 'after' : 'before'
var obj = {
list: [],
loadmore: '加载更多…',
forward: forward
}
if (i == 0) {
obj.list = res.data.data
}
arr.push(obj)
}
this.newsItems = arr
this.isSkShow = false
console.log('newsItems=>', this.newsItems);
})
},
//小程序跳转到搜索页
goSearch() {
uni.navigateTo({
url:'/pages/search/search'
})
},
//扫码
scanCode() {
uni.scanCode({
success: function(res) {
console.log('条码类型：' + res.scanType);
console.log('条码内容：' + res.result);
}
});
},
//切换标题
changeTab(index) {
if (this.currentIndex == index) return
this.currentIndex = index
this.scrollinto = 'tab' + index
if (this.currentIndex < 6) {
this.scrollinto = 'tab0'
}
},
//当swiper切换时触发
changeIndex(e) {
console.log(e);
this.currentIndex = e.detail.current
if (this.newsItems[this.currentIndex].forward == 'after') {
return;
} else {
this.getpage()
}
},
//请求不同标题下页面数据
getpage(callback) {
let index = this.currentIndex
let id = this.navbars[index].id
let obj = this.newsItems[index]
let page = Math.ceil(obj.list.length / 5) + 1
console.log('page=>', page);
obj.forward = 'before'
getPage(id, page).then(res => {
console.log(res);
let data = res.data
if (data) {
obj.list = [...obj.list, ...data]
obj.loadmore = data.length < 5 ? '没有更多了…' : '加载更多…'
}
obj.forward = 'after'
})
if (typeof callback == 'function') {
callback()
}
},
//下拉加载更多
scrolltolower(index) {
//加载更多… 加载中… 没有更多了…
if (this.newsItems[index].loadmore != '加载更多…') {
return;
} else {
this.newsItems[index].loadmore = '加载中…'
this.getpage(() => {
uni.showToast({
title: '加载成功'
})
})
}
}
}
}
</script>
<style>
.search-title {
height: 88rpx;
line-height: 88rpx;
background-color: #eee;
border-radius: 44rpx;
text-indent: 30rpx;
}
.scroll-title {
height: 88rpx;
line-height: 60rpx;
}
</style>