精华内容
下载资源
问答
  • uni-app 微信小程序使用 web-view 预览PDF
    2021-05-19 09:50:53

    1、使用uni-pp开发微信小程序,上线之后发现Android手机无法加载览PDF,但ios可以。这里运用了 uni.openDocument

    <template>
    	<view class="wenj" @click="file" >
    			点击查看文件
    	</view>
    </template>
    
    <script>
    	export default {
    		data() {
    			return {
    				attach_url: '',
    			}
    		},
    		onLoad(option) {
    		
    			
    		},
    		onShow() {
    			
    		},
    		methods: {
    			file(){
    				uni.showToast({
    				    title: '加载中',
    				    duration: 5000,
    					icon:"loading"
    				});
    				uni.downloadFile({
    				  url: this.attach_url, //文件名
    				  success: function (res) {
    				    var filePath = res.tempFilePath;
    				    uni.openDocument({
    				      filePath: filePath,
    				      success: function (res) {
    				        console.log('打开文档成功');
    						uni.hideToast();
    				      }
    				    });
    				  }
    				});
    			}
    		},
    
    	}
    </script>
    
    <style lang="scss">
    	page {
    		background: #F9F9F9;
    	}
    
    	
    .wenj{
    		height: 100rpx;
    		display: flex;
    		justify-content: flex-end;
    		align-items: center;
    		font-size: 30rpx;
    		color: #008AFF;
    		
    	}
    </style>
    
    

    这里使用了一个点击事件 因为如果直接使用加载会很慢,还没加载完用户已经退出来

    更多相关内容
  • uni-app 使用 Web-View

    2021-06-22 11:42:18
  • uni-app开发时使用web-view覆盖掉固定定位的解决办法,移动端APP预览pdf文件

    不知道大家有没有在开发时遇到使用web-view会覆盖掉固定定位的问题

    我在开发时候遇到的情况,在使用web-view会覆盖掉固定定位,无论是调整固定定位的层级(z-index)还是给web-view添加绝对定位调整负层级都没有效果,浏览器预览啥问题没有,但是在app里面看就看不到固定定位的东西

    后来改成

    <iframe :src="url" frameBorder="0" width="100%" scrolling="no" height="100%"></iframe>

    使用iframe标签就可以显示出固定定位了

    我这个是为了在移动端展示pdf文件,目前好像uni-app还不支持直接展示,我是把pdf转成图片,然后把图片放到一个网页里面,然后把网页展示出来。

    展示pdf文件时,使用pdfjs,直接预览都试过,移动端都不显示

    展开全文
  • uni-app web-view简单示例

    千次阅读 2021-02-04 09:47:15
    初学app开发,登记下,以后使用方法。 pages.json中pages下添加 { "path": "pages/main", "style": { "navigationBarTitleText": "首页" } }, { "path": "pages/webview", "style": { ...

    初学app开发,登记下,以后使用方法。

    pages.json中pages下添加

    {
                "path": "pages/main",
                "style": {
                    "navigationBarTitleText": "首页"
                }
            },
            {
                "path": "pages/webview",
                "style": {
                    "navigationBarTitleText": "浏览"
                }
            },

     

    main.vue页面代码:

    <template>
        <view class="history">
            <view class="list">
    			<button v-for="(item, index) in list" @click="itemClick(item)" >
    				{{item.title}}
    			</button>
            </view>
    	</view>
    </template>
    
    <script>
        export default {
            data() {
                return {
    				userToken:'',
    				webUrl:'',
    				index:0,
                    list: [
    					{
    						title:'标题1',
    						link:'http://172.88.1.20:803/page1'
    					},
    					{
    						title:'标题2',
    						link:'http://172.88.1.20:803/page2'
    					}
    				]
                }
            },
            methods: {
                itemClick (data) {
    				console.log(data.link);
                     // 跳转到内部窗口并且传递链接
                    uni.navigateTo({
                        url: `webview?url=${data.link}&title=${data.title}`
                    })
                },
    			setToken(){
    				uni.setStorageSync('user_token', this.userToken);
    				
    			},
    			getToken(){
    				const token = uni.getStorageSync('user_token');
    				    if (token) {
    				        console.log(token);
    						this.userToken=token;
    						this.webUrl=webUrl+"?token="+token
    				    }
    				
    			}
            },
            created() {
    
            }
        }
    </script>
    
    
    

     

    webview.vue页面代码:

    <template>
        <view>
            <web-view :src="url"></web-view>
        </view>
    </template>
    
    <script>
        export default {
            data() {
                return {
                    url: '',
    				title:''
                }
            },
            onLoad(e) {
                 // 获取传递过来的链接
                this.url = e.url
    			this.title=e.title;
    			uni.setNavigationBarTitle({
    			            title:this.title
    			        });
            }
        }
    </script>

     

    展开全文
  • 可以定义一个内部页面,就只放一个web-view,然后在列表点击的时候,跳转到该内部页面,并且把需要打开的链接传递到该页面。 <template> <view class="history"> <view class="list"> <view...
  • uni-app 如何设置web-view 不全屏,不自动铺满,动态控制web-view的高度2020年07月17日|萬仟网IT编程 |我要评论内容写在onload里面,如果是初始化的时候控制,其他位置控制可以写在其他方法中var height=0;...
  • 在地图添加覆盖物,或设置额外图层,这种情况,uni-app自带的地图大多满足不了这些需求。所以需要用到web-view这一组件来实现。 1.创建带有地图的html 注意:App 平台同时支持网络网页和本地网页,但本地网页及...
  • uni-appweb-view的使用

    千次阅读 2020-06-10 14:50:22
    uni-app页面部分代码 <template> <web-view :src="url" @message="handleMessage"></web-view> </template> <script> export default { data() { return { url: null //要...
  • uni-app实现web-viewapp端根据安卓ios自定义动态显示导航 <template> <view class="content"> <!-- 这里是自定义导航(这是封装的自定义组件)大家可以直接换成view标签自己写 --> <...
  • uni-app web-view调用谷歌地图

    千次阅读 2020-11-24 14:19:07
    由于公司的业务主要是非洲的,所以做地图功能的时候就需要用到一款国际地图,高德直接不支持,百度的在uni-app上配置了没效果,苹果地图也找过,但是在indentifiers下面没有找到map IDS选项,故放弃,那就是谷歌地图...
  • web-view>如果设了"navigationStyle" : "custom"会自动充满全部屏幕,现在,如果想在页面上面腾出statusBar高度,该怎么做? 不可行方案 CSS方案全部不可行。 可行方案一 <template> <view class=...
  • uni-app web-view跳转自定义html 第一步 注册点击事件跳转到web-view所在的页面 ...demo(data) { uni.navigateTo({ url: `/pages/privacy/privacy` }) }, ...{ "path": "pages/privacy/privacy", ... "app-plus
  • 使用uni-app 开发的app,部分功能页面加载的H5页面,在app中跳转H5使用的是webview跳转的方式,H5页面是自定义的标题栏返回;在H5二级三级页面中可以一级一级的返回到app中。现需要控制安卓物理返回键在H5的二级三级...
  • 最近开发小程序的时候、需要嵌入一个第三方网站、并且和第...官方中有一篇文章 https://ask.dcloud.net.cn/article/35083 详细介绍了 在 web-view 加载的本地及远程 HTML 中调用 uni 的API及网页和 vue 页面是如何通讯
  • 关于uni-app使用web-view页面之间互相跳转、通信等问题的解决方案.docx
  • pagestart在web窗口开始加载时触发,在uni-app的文档中并是没有的写上,需要去翻阅weex的文档。 如:a.com跳转到a.com/index.php时,在刚刚加载了index.php时,就会触发 但在ios中(仅苹果6 plus,其他类型设备未...
  • 小程序中web-view加载uni-app H5其实思路是一样的,只不过这里有一些坑,而且我在社区去搜相关问题,确实有好些人提问,但是下面回答的也不太靠谱,于是我在这里综合起来总结下: 二、解决方案 【坑1】怎么在uniapp...
  • uni-app web-view导入地图

    2021-08-27 16:56:22
    uni-app的官方说法是: 这边使用第1种方法,就不用插件了。注:调用谷歌地图,首先需要翻墙 1,首先申请谷歌帐号,这里申请步骤就不赘述了。 2,其次申请谷歌秘钥: 平台地址:...
  • web-view是指<web-view src=""></webview> webview是指通过plus.webview.create创建...但是webview的通讯真的很糟糕,之前还好,但在uni-app后,就很烂了 目前网上都有两种解决方法 1.通过改变title webvi
  • 开发中使用web-view引入某个htm(小程序应该无法使用本地html,只能以http方式引入...解决办法:web-view 添加v-if控制,从而在页面初始化时不进行web-view的渲染。在src中的变量修改完成之再后进行web-view渲染。 ...
  • 如果设了"navigationStyle" : "custom"会自动充满全部屏幕,现在,...必须使用APP-PLUS。 <template> <view> </view> </template> export default { onLoad() { // #ifdef APP-PLUS
  • 使用 uni-app web-view 组件的 overrideResourceRequest 方法拦截网页加载的图片资源,重定向返回 app 应用本地的图片资源,下图为示例 解决办法2 将整个打包好的网页 HTML 放在 app 源代码里面,然后 app 里面的 ...
  • web-view 对比 iframe , 级别最高 show 相当于window.open() 所以切换和弹出会有样式冲突 处理方法: 设置 plus.webview.create(链接地址, dom, { top: ‘0px’, bottom: ‘0px’, width: 0, //String类
  • uni-app使用web-view引入页面

    千次阅读 2021-06-13 04:59:07
    代码如下:exportdefault{data(){return{src:'',webviewStyles:{progress:{color:'#FF3333'}}}},onLoad(e){this.src="http://m.tnblog.net/hb/article/details/5903";//if(e.title){//uni.setNavigationBa...
  • uni-app如果需要内嵌线上的链接可直接src=url 如果需要内嵌本地html页面的话需要存放在hybrid > html目录下 因为这个目录下的文件不会被编译 使用: <web-view :src="url"></web-view>
  • uni-app web-view缩放

    千次阅读 2020-07-20 19:26:38
    web-view :src="goToUrl()" progress></web-view> </view> </template> <script> var wv; //计划创建的webview export default { components: {}, data() { return { }; ...
  • uni-app 或者 微信小程序 中,都有 web-view 组件。 该组件是一个浏览器组件,可以承载网页的内容。而且该组件是全屏的,会覆盖该组件之外的其他内容。 本文要讲解在 uni-app 中使用 web-view 怎么实现大量数据...
  • 1、iOS 系统可以直接使用 web-view 打开查看 2、Android 系统 需要先下载到本地,然后打开查看 注: 微信小程序需配置web-view业务域名,就是pdf访问的域名 具体代码实现: <template> <view> ...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,461
精华内容 984
关键字:

覆盖 web-view (uni-app)

友情链接: discriminant.rar