uni-app实现app内嵌微信文章

Dear 丶 2022-12-27 14:06 224阅读 0赞

# 目的： #

在app内显示微信公众号文章，不采用iframe标签，不采用第三方接口

--------------------

# 解决方案： #

如果是uni-app的框架可以直接使用web-view标签。

<template>
    	<view>
    		<web-view :src="url"></web-view>
    	</view>
    </template>
    
    <script>
    	export default { 
    		data() { 
    			return { 
    				webviewStyles: { 
    					progress: { 
    						color: '#FF3333'
    					}
    				},
    				url:''
    			}
    		},
    		onShow() { 
    			this.url =	uni.getStorageSync('wx_articleurl');
    		},
    		methods: { 
    		}
    	}
    </script>

#### 注意 ####

使用这种方法在浏览器预览会出错，需要直接运行到手机端，就会正常显示。这个方法与plus.webview.create（）方法共同使用的话，在手机端上面，会出现先加载一个plus创建的窗口，然后又被一个当前页面的窗口所覆盖。

--------------------

### 在别的框架下可以尝试以下方法 ###

app端是支持5+api的所以采用了plus.webview.create（）方法。  
首先在首页点击时跳转到一个新的vue页面。代码如下

lianjie(url){ 
    			//注释是uni-app中的条件编译，将注释里面的代码编译到不同平台
    			//这里是app端会执行的代码
    			//#ifdef APP-PLUS
    			 uni.setStorageSync('wx_articleurl', url);
    				uni.navigateTo({ 
    					url:'seenew'
    				})
    			//#endif
    			
    			//这里是H5端和小程序端会执行的代码
    			//#ifdef H5 || MP-WEIXIN
    				location.href = url
    			//#endif
    		},

跳转到新页面后，首先获取到需要的微信文章的url，然后利用plus.webview.create(参数一，参数二，参数三)方法构建出一个Webview窗口。  
参数一：新打开Webview窗口要加载的HTML页面地址  
参数二：保持窗口标识的唯一性（在vue页面销毁时可以根据标识销毁Webview窗口）  
参数三：创建Webview窗口的样式（如窗口宽、高、位置等信息）

onShow() { 
    			this.url =	uni.getStorageSync('wx_articleurl');
    			this.create()
    		},
    		methods: { 
    			create(){ 
    				var w = plus.webview.create(this.url,'tuijian',{ top:'75px'});
    				w.show(); // 显示窗口
    			},
    		},
    		onUnload(){ 
    			plus.webview.close('tuijian');
    		}

[plus.webview.create（）方法详细地址][plus.webview.create]

# 效果图： #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmcxOTk4MTIzMQ_size_16_color_FFFFFF_t_70_pic_center]

--------------------

# 总结： #

1.  我在pages.json中设置的标题是“为你推荐”，当webview窗口创建完成后，会被自动替换为文章的标题，如果不想的话可以在创建webview窗口那个页面自己写一个头部。
2.  兼容H5那个是直接打开一个新页面，小程序端是否能够实现未测试。
3.  我试过第三方接口转成HTNL，也使用iframe标签不允许加载，吐槽一下是真的麻烦。

[plus.webview.create]: http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.create
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xvbmcxOTk4MTIzMQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/e2d5181517554881bd50eec0175c3e0c.png