感谢滚动君大佬提供的思路，但是此方法只适用于微信小程序
app端之所以不能用的关键原因在于不能找到resourcePath原始路径，不像小程序会提供一个路径区分哪些文件来自组件哪些文件来自页面，如果不做区分，那么页面栈就会超载，无法显示。
既然它自身不能提供路径，那么我们可以修改源码，路径在D:\Hbuild\plugins\uniapp-cli\node_modules@dcloudio\vue-cli-plugin-uni\packages\vue-loader\lib\loaders\templateLoader.js
的templateLoader.js文件中修改代码如图：
在compilerOptions方法体中的最后一行加上
resourcePath: this.resourcePath
注意上一行的逗号不要忘了
然后在项目里面新建一个文件vue.config.js
填以下内容
module.exports = {
chainWebpack: config => {
config.module.rule('vue').use('vue-loader').loader('vue-loader').tap(options => {
const compile = options.compiler.compile
options.compiler.compile = (template,...args) => {
//用来区分组件还是页面
if(args[0].resourcePath.search("pages")!=-1){
//防止app端重复加载而重复添加组件
if(template.search("<upload_file/>")==-1){
template = template.replace(/[\s\S]+?<[\d\D]+?>/, _ => `${_}
<‘upload_file ’/>
`)
}
}
return compile(template,...args)
}
return options
})
}
}
差点忘了你的组件必须是全局挂载的，在mian.js里面添加
import upload_file from '@/components/upload_file.vue'
Vue.component('upload_file', upload_file)
下面我自定义悬浮组件的源码
upload_file.vue
<template>
<view>
<uni-fab :pattern="pattern" :horizontal="horizontal" :vertical="vertical" @fabClick="upload_data" ></uni-fab>
</view>
</template>
<script>
export default {
name: "",
data() {
return {
vertical: 'bottom',
horizontal: 'right',
pattern: {
color: '#7A7E83',
backgroundColor: '#fff',
selectedColor: '#007AFF',
buttonColor: '#007AFF',
iconColor: '#fff',
icon:'upload-filled'
},
}
},
methods:{
upload_data(){
this.$company.common({
}, {
'api':'unline'
}).then(e => {
console.log(e)
})
}
}
}
</script>
<style lang="scss" scoped>
/deep/ .uni-fab__circle--rightBottom[data-v-137a85dc] {
right: 15px;
bottom: 30px;
right: calc(70rpx + var(--window-right));
bottom: calc(150rpx + var(--window-bottom));
}
</style>
都填完后重新加载一遍
