uni-app 开发微信小程序 web-view 显示空白的一次低级错误记录

一直做后端开发，最近单位要开发一个小程序，赶鸭子上架。研究了一圈，最终决定用 uni-app 开发。算是正式开始前端踩坑之旅。

小程序中有一个需求是要显示官方公众号中的文章，查了下微信小程序文档，使用 web-view 实现的，顺手写了下面的代码：

根据后台文章类型判断是普通文章还是公众号文章，如果是公众号文章，直接用 web-view 显示公众号文章链接中的内容。

<template>
	<view v-if="detail.type === 'post'">
		<view class="article-banner">
		    <image class="article-image" :src="detail.image"></image>
		    <view class="article-title">{{detail.title}}</view>
		</view>
		<view class="article-meta">
		    <text class="article-author">{{detail.author}}</text>
		    <text class="article-text">发表于</text>
		    <text class="article-time">{{detail.published_at}}</text>
		</view>
		<view class="article-content">
		    <rich-text :nodes="htmlString"></rich-text>
		</view>
	</view>
	<view v-else>
		<web-view src="{{detail.link}}" ></web-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				detail:{}
			}
		},
		onLoad(event) {
			try {
			    this.detail = JSON.parse(decodeURIComponent(event.detail));
			} catch (error) {
			    this.detail = JSON.parse(event.detail);
			}
			console.log(this.detail)
		},
		methods: {

		}
	}
</script>

运行到微信开发者工具后，普通文章可以正常显示，但是微信公众号文章对应的 web-view 显示是空白的。

按照微信小程序开发文档中提到的可能导致这一情况的原因逐一排查，都没解决问题。又倒回去看 uni-app 的文档和 vue 的文档。

终于发现我犯了一个低级错误，在给 web-view 组件的 src 属性赋值时，使用的是 html 静态赋值（红色代码），而不是 vue 的动态绑定语法（绿色代码）。

<web-view src="{{detail.link}}"></web-view> 
<web-view :src="detail.link"></web-view>

按照 Vue 文档的动态绑定语法修改以下代码后，正常显示，问题解决。这是准新手才会犯得错误，大神请忽略即可。附：Vue 中 :src 和 src 的区别详解