1***@qq.com
1***@qq.com
  • 发布:2024-04-17 14:23
  • 更新:2024-04-17 15:58
  • 阅读:321

uniapp 封装request请求 打包运行到手机上 报错TypeError: this.$request is not a function, 本地内置浏览器使用正常

分类:HBuilderX

<template>
<view class="content">
<map style="width: 100%; height: 700px;" :layer-style='5' :show-location='true' :latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>

   </map>  
</view>  

</template>
<style>
</style>

<script>
export default {
data() {
return {
deviceId:"",
latitude:34.270908, //纬度
longitude:117.306763,//经度
scale:10,//缩放级别
bottomData:false,
marker: [
// {
// id:0,
// latitude: 34.270908,//纬度
// longitude: 117.306763,//经度
// iconPath: '/static/map/camera.png', //显示的图标
// rotate:0, // 旋转度数
// width:30, //宽
// height:30, //高
// // title:'我在这里',//标注点名
// alpha:0.5, //透明度
// callout:{//自定义标记点上方的气泡窗口 点击有效
// content:'赛菲迪路段',//文本
// color:'#ffffff',//文字颜色
// fontSize:14,//文本大小
// borderRadius:15,//边框圆角
// borderWidth:'10',
// bgColor:'#e51860',//背景颜色
// display:'ALWAYS',//常显
// },
// },

                                    ],  
            }  
        },  
    onLoad() {  
        this.getGps();  
    },  
    mounted(){  
        this.getGps();  
    },  

    computed:{  
                mapheight(){  
                    let data =''  
                    if(this.bottomData){  
                        if(this.upTop){  
                            data ='50px'  
                        }else{  
                            data ='200px'  
                        }  
                    }else{  
                        data ='90vh'  
                    }  
                    return data  
                },  
                coverbottom(){  
                    let data =''  
                    if(this.bottomData){  
                        data ='20rpx'  
                    }else{  
                        data ='100rpx'  
                    }  
                    return data  
                }  
            },  
    methods:{  
            //地图点击事件  
        markertap(e) {  

            console.log()  
            uni.navigateTo({  
                url: '/pages/win/win?deviceId='+e.detail.markerId  
              })  
            console.log("===你点击了标记点===", e)  
        },  
        //地图点击事件  
        callouttap(e){  
            console.log('地图点击事件',e)  
        },  
        getGps(){  
            this.$request({  
              url: "api/picture/getDevice",  
              method:"GET"  
            }).then(res => {  
                  console.log("=============")  
                console.log(res.data);  
                  console.log("=============")  
                var markerMap=[];  
                var obj;  
                var map=res.data.data;  
                  for(var i=0;i<map.length;i++) {  
                      obj = {  
                            id:map[i].id,  
                            latitude: map[i].latitude,//纬度  
                            longitude: map[i].longitude,//经度  
                            iconPath: '/static/map/camera.png',    //显示的图标          
                            rotate:0,   // 旋转度数  
                            width:30,   //宽  
                            height:30,   //高  
                                //   title:'我在这里',//标注点名  
                            alpha:0.5,   //透明度  
                            callout:{//自定义标记点上方的气泡窗口 点击有效    
                                content: map[i].name,//文本  
                                color:'#ffffff',//文字颜色  
                                fontSize:14,//文本大小  
                                borderRadius:15,//边框圆角  
                                borderWidth:'10',  
                                bgColor:'#e51860',//背景颜色  
                                display:'ALWAYS',//常显  
                                },  
                        }  

                       markerMap.push(obj);  

                  }  
                  this.marker=markerMap;  
              })  
        }  
    }  
}  

</script>

import config from "./config.js"
export const request = function a(options) {
{
return new Promise((resolve, reject) => {
let token = uni.getStorageSync('token')
// console.log(token)
// 在登录的时候需要储存 token uni.setStorageSync("authorization","这里是登录获取的token值")
uni.request({
url: config.baseUrl + options.url,
data: options.data || {},
method: options.method || 'POST',
header: options.header || {
// 根据实际接口设计 key 取 token 或者 authorization
token: token,
"content-type": 'application/json'
},
success: (res) => {
// 控制台显示数据信息
resolve(res)
},
fail: (err) => {
// 页面中弹框显示失败
uni.showToast({
title: '请求接口失败'
})
// 返回错误消息
reject(err)
},
catch: (e) => {
console.log(e);
}
})
})
}
}

2024-04-17 14:23 负责人:无 分享
已邀请:
爱豆豆

爱豆豆 - 办法总比困难多

能发个可以复现的demo出来吗 你这个代码片段很难看出来啥

锦鲤丶接单丶

锦鲤丶接单丶 - 锦鲤丶接单丶18560000860丶10+年开发经验

借楼小小推广一下,欢迎体验一下我上传的通用请求封装插件:https://ext.dcloud.net.cn/plugin?id=17539

1***@qq.com

1***@qq.com (作者)

import config from "./config.js"
export const request = function a(options) {
{
return new Promise((resolve, reject) => {
let token = uni.getStorageSync('token')
// console.log(token)
// 在登录的时候需要储存 token uni.setStorageSync("authorization","这里是登录获取的token值")
uni.request({
url: config.baseUrl + options.url,
data: options.data || {},
method: options.method || 'POST',
header: options.header || {
// 根据实际接口设计 key 取 token 或者 authorization
token: token,
"content-type": 'application/json'
},
success: (res) => {
// 控制台显示数据信息
resolve(res)
},
fail: (err) => {
// 页面中弹框显示失败
uni.showToast({
title: '请求接口失败'
})
// 返回错误消息
reject(err)
},
catch: (e) => {
console.log(e);
}
})
})
}
} 这是request

export default {
baseUrl: "http://192.168.2.6:8083/"
}
这是config

<template>
<view class="content">
<map style="width: 100%; height: 700px;" :layer-style='5' :show-location='true' :latitude="latitude" :longitude="longitude" :markers="marker" :scale="scale" @markertap="markertap" @callouttap='callouttap'>

   </map>  
</view>  

</template>
<style>
</style>

<script>
export default {
data() {
return {
deviceId:"",
latitude:34.270908, //纬度
longitude:117.306763,//经度
scale:10,//缩放级别
bottomData:false,
marker: [
// {
// id:0,
// latitude: 34.270908,//纬度
// longitude: 117.306763,//经度
// iconPath: '/static/map/camera.png', //显示的图标
// rotate:0, // 旋转度数
// width:30, //宽
// height:30, //高
// // title:'我在这里',//标注点名
// alpha:0.5, //透明度
// callout:{//自定义标记点上方的气泡窗口 点击有效
// content:'赛菲迪路段',//文本
// color:'#ffffff',//文字颜色
// fontSize:14,//文本大小
// borderRadius:15,//边框圆角
// borderWidth:'10',
// bgColor:'#e51860',//背景颜色
// display:'ALWAYS',//常显
// },
// },

                                    ],  
            }  
        },  
    onLoad() {  
        this.getGps();  
    },  
    mounted(){  
        this.getGps();  
    },  

    computed:{  
                mapheight(){  
                    let data =''  
                    if(this.bottomData){  
                        if(this.upTop){  
                            data ='50px'  
                        }else{  
                            data ='200px'  
                        }  
                    }else{  
                        data ='90vh'  
                    }  
                    return data  
                },  
                coverbottom(){  
                    let data =''  
                    if(this.bottomData){  
                        data ='20rpx'  
                    }else{  
                        data ='100rpx'  
                    }  
                    return data  
                }  
            },  
    methods:{  
            //地图点击事件  
        markertap(e) {  

            console.log()  
            uni.navigateTo({  
                url: '/pages/win/win?deviceId='+e.detail.markerId  
              })  
            console.log("===你点击了标记点===", e)  
        },  
        //地图点击事件  
        callouttap(e){  
            console.log('地图点击事件',e)  
        },  
        getGps(){  
            this.$request({  
              url: "api/picture/getDevice",  
              method:"GET"  
            }).then(res => {  
                  console.log("=============")  
                console.log(res.data);  
                  console.log("=============")  
                var markerMap=[];  
                var obj;  
                var map=res.data.data;  
                  for(var i=0;i<map.length;i++) {  
                      obj = {  
                            id:map[i].id,  
                            latitude: map[i].latitude,//纬度  
                            longitude: map[i].longitude,//经度  
                            iconPath: '/static/map/camera.png',    //显示的图标          
                            rotate:0,   // 旋转度数  
                            width:30,   //宽  
                            height:30,   //高  
                                //   title:'我在这里',//标注点名  
                            alpha:0.5,   //透明度  
                            callout:{//自定义标记点上方的气泡窗口 点击有效    
                                content: map[i].name,//文本  
                                color:'#ffffff',//文字颜色  
                                fontSize:14,//文本大小  
                                borderRadius:15,//边框圆角  
                                borderWidth:'10',  
                                bgColor:'#e51860',//背景颜色  
                                display:'ALWAYS',//常显  
                                },  
                        }  

                       markerMap.push(obj);  

                  }  
                  this.marker=markerMap;  
              })  
        }  
    }  
}  

</script>这是首页地图展示 运行到手机上说this.$request不是方法,但是在内置浏览器上没问题

  • 锦鲤丶接单丶

    你的$request在main.js中挂载到vue上了么

    2024-04-17 14:35

  • 爱豆豆

    我的意思是 你可以创建一个空项目 把你的代码放进去 然后压缩下发出来

    这样我可以直接下载运行你的代码

    你的request在哪里引入了?

    2024-04-17 14:36

1***@qq.com

1***@qq.com (作者)

import App from './App'
import store from '@/store'
import uView from '@/uni_modules/uview-ui'
import Vue from 'vue'

import {request} from 'pages/util/request.js'

Vue.prototype.$request = request

Vue.use(uView)
Vue.config.productionTip = false
Vue.prototype.$store = store
App.mpType = 'app'

const app = new Vue({
...App
})

app.$mount()这是我的main。js

困难总比办法多

困难总比办法多

不用内置的浏览器,运行到chrome能运行吗

要回复问题请先登录注册