文创中心
文创中心的考虑主要是出于用户体验、品牌推广、内容传播和商业机会等多方面进行
1. 丰富用户体验
文创中心可以提供丰富多样的文化创意内容和活动信息，使用户能够在小程序中体验到更多样化的内容，提升用户的使用体验和满意度。例如，可以展示当地的文化历史、艺术展览、手工艺品等，增加用户的兴趣和参与度。
2. 品牌推广
通过文创中心，品牌可以展示其在文化创意领域的投入和成果，提升品牌的文化形象和知名度。这有助于建立品牌的独特性，吸引更多的目标用户，尤其是对文化和创意感兴趣的用户群体。
3. 内容传播
文创中心可以成为一个重要的内容传播平台，通过发布文章、视频、图片等多种形式的内容，传播文化创意和活动信息。这不仅能吸引用户持续关注，还能通过用户的分享和互动，扩大品牌的影响力和传播范围。
4. 商业机会
文创中心可以通过展示和销售文创产品、门票、课程等，带来实际的商业收益。例如，可以设置在线商城，售卖特色手工艺品、纪念品等，或者提供在线预约和购票服务，增加收入来源。
与此同时，当前我们所接触到的旅行小程序内并未出现对该模块的展示，所以我们开拓性地提出这个界面的设计使用。
鉴于网络上其实并没有与实际游览的情况相符的文创产品的数据，我们小组实地考察了趵突泉景区的实际情况，访问了趵突泉景区的文创产品店（但实际上，趵突泉景区内并不只有这一个店售卖产品，还有许多小店我们并未统计），统计了一些基本的产品信息，并调用大模型对这些产品生成了较为诗意的描述（后期如若要对小程序上线发布，还得需要做详细的产品调研以及后台管理），由于数据较少，所以我们将数据都放置前端，图片以链接形式存在。
前端wxml代码：
<swiper class="shop-swiper" autoplay="true" interval="3000" duration="500" indicator-dots="true">
<block wx:for="{{imageUrls}}" wx:key="index">
<swiper-item>
<image class="shop-image" src="{{item}}" mode="aspectFill"></image>
</swiper-item>
</block>
</swiper>
<view class="container">
<view class="shop-details">
<view class="shop-name-container">
<image class="icon" src="景点.png"></image>
<text class="shop-name">天下第一泉文创中心</text>
</view>
<view class="shop-address-container">
<image class="icon_addr" src="位置.png"></image>
<text class="shop-address">趵突泉南路一号趵突泉景区内婵英祠东</text>
</view>
<view bindtap="openLocation" class="location-container">
<image class="icon" src="方向.png"></image>
<text class="location-text">点击导航到这里去</text>
</view>
</view>
<view class="menu-item" style="margin-top: 8px;">
<view class="vertical-line"></view>
<text>文创产品</text>
</view>
<view class="horizontal-line"></view>
<view class="products-section">
<view class="product" wx:for="{{products}}" wx:key="id">
<view class="product-container">
<image class="product-image" src="{{item.image}}"></image>
<view class="product-info">
<view class="info-item">
<image class="icon" src="礼品.png"></image>
<text class="product-name">{{item.name}}</text>
</view>
<view class="info-item">
<text class="product-description">{{item.description}}</text>
</view>
</view>
</view>
</view>
</view>
</view>
界面显示如下：
点击导航到这里去，会出现问题：
根据排查，在真机演示时则能成功，借鉴文章：
wx.openLocation打开微信内置地图，导航不能用_wx.openlocation不能导航怎么班-CSDN博客
真机演示界面如下：
消息界面
消息界面主要是出于以下几个方面考虑：
- 即时信息发布：
- 活动通知：及时发布景区活动、节庆、演出等相关信息，吸引游客参与。
- 公告通知：发布景区开放时间调整、特殊天气影响等重要公告，方便游客安排行程。
- 宣传推广：
- 景区特色介绍：展示景区的独特景观、历史文化背景和特色产品，增强游客的兴趣。
- 品牌形象提升：通过专业、精美的推文展示，提升景区的品牌形象和知名度。
- 增强互动：
- 互动活动：通过推文发布有奖问答、互动小游戏等，增强游客的参与感和互动性。
- 用户反馈：收集游客的反馈和建议，优化景区服务和管理。
- 信息整合：
- 资讯汇总：将景区内外的相关新闻、旅游攻略、游客体验等内容集中展示，方便游客查阅。
- 多渠道发布：公众号推文可以通过小程序、微信公众号等多个渠道发布，扩大信息覆盖面。
- 增加用户粘性：
- 内容吸引：通过丰富多彩的内容吸引游客持续关注景区公众号和小程序，增加用户粘性。
- 用户习惯培养：培养用户通过小程序和公众号获取景区信息的习惯，提高用户活跃度。
- 提升服务体验：
- 方便获取信息：游客在小程序中即可方便地查看最新的景区资讯，提升服务体验。
- 一站式服务：结合小程序的其他功能，如购票、导航、导览等，为游客提供一站式服务体验。
我们的界面的消息主要来自于趵突泉景区公众号的推文。
首先，为了丰富我们的界面，我们想要在这个页面的顶部放置一个视频来去全方位地介绍趵突泉景区，由于视频较大，但是小程序内容打包大小有限制，所以只能够通过url来访问。
首先，我们尝试通过查看网站地html代码来获取视频的url，如图：
找到HTML 的 <video> 标签，其中 src 属性的值是一个 blob URL，但是这种形式的 URL 通常是在页面加载时由 JavaScript 动态生成的，无法直接使用。但或许也可以使用爬虫来获取动态加载的数据。
这里我尝试了另一种方法：
在后台服务器中创建一个接口来返回 MP4 文件，并在小程序中展示该视频。
后端代码如下：
@app.route('/get_video', methods=['GET'])
def get_video():
video_path = 'xxx/baotuquan.mp4'//路径
return send_file(video_path, as_attachment=False)
在小程序前端调用该接口：
wxml代码示例如下：
<view class="container">
<view class="header">
<text class="title">天下第一泉风景区</text>
</view>
<video
class="intro-video"
src="http://xxx/get_video" //url
controls="true"
autoplay="false"
show-fullscreen-btn="true"
></video>
<scroll-view class="news-list" scroll-y="true">
<view class="news-item" wx:for="{{news}}" wx:key="id" bindtap="openArticle" data-url="{{item.url}}">
<view class="news-content-box">
<image class="news-image" src="{{item.image}}"></image>
<view class="news-content">
<text class="news-title">{{item.title}}</text>
<text class="news-date">{{item.date}}</text>
<text class="news-summary">{{item.summary}}</text>
</view>
</view>
</view>
</scroll-view>
</view>
但是会报如下错误：
该错误信息表明在小程序中传输的数据长度过大，超过了允许的限制。这在你尝试通过 setData 方法将大量数据（如一个大的视频文件）设置到小程序页面的数据对象时尤其容易发生。
在微信小程序中，将大文件的数据直接设置到 data 中会导致性能问题，因为 setData 方法会将数据复制到视图层。一个更好的方式是将视频文件直接设置到 <video> 组件的 src 属性，而不通过 setData。
写一个html网页来获取视频：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Video Player</title>
<style>
.container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
.video-player {
width: 100%;
height: auto;
}
.title {
font-size: 24px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div class="container">
<div class="title">天下第一泉风景区</div>
<video id="intro-video" class="video-player" controls></video>
</div>
<script>
document.addEventListener('DOMContentLoaded', function () {
const videoElement = document.getElementById('intro-video');
fetch('https://xxx/get_video')
.then(response => {
if (!response.ok) {
throw new Error('Network response was not ok ' + response.statusText);
}
return response.blob();
})
.then(blob => {
const url = URL.createObjectURL(blob);
videoElement.src = url;
})
.catch(error => {
console.error('There has been a problem with your fetch operation:', error);
});
});
</script>
</body>
</html>
视频可以正常返回，该接口其实是有效的。
尝试了多种办法其实都没有很好得解决该问题，于是放弃了这种做法。
还有一个问题就是如何获取得到公众号推文。见文章：
通过微信公众平台获取公众号文章_微信小程序直接获取公众号文章-CSDN博客
爬取微信公众号发布的所有文章（包括阅读数，在看数，点赞数）_爬取微信公众号文章-CSDN博客
我们获取了公众号文章的url集合，点击文章所在的位置可进行跳转：
openArticle: function(event) {
const url = event.currentTarget.dataset.url;
wx.navigateTo({
url: `/pages/webview/webview?url=${encodeURIComponent(url)}`
});
}
采取了一个webview界面对获取的文章进行解析呈现：
<web-view src="{{url}}"></web-view><web-view> 组件用于在微信小程序中嵌入一个网页视图，通过该组件可以直接在小程序内展示网页内容。<web-view> 组件会创建一个独立的 WebView 容器，用于加载指定的网页 URL。
以下是对代码 <web-view src="{{url}}"></web-view> 的详细解释：
-
组件作用：
<web-view>组件用于加载并显示一个网页视图，用户可以在小程序中直接浏览指定的网页内容。
-
属性解释：
src：这是<web-view>组件的一个属性，用于指定要加载的网页 URL。该属性的值是一个字符串，表示要显示的网页地址。{{url}}：这是一个数据绑定的表达式，表示从小程序的数据对象中获取url变量的值，并将其作为src属性的值。{{url}}是小程序的双花括号语法，用于将数据绑定到组件的属性中。
-
工作原理：
- 当页面加载时，小程序会读取数据对象中的
url变量的值，并将其作为src属性的值传递给<web-view>组件。 <web-view>组件会使用传递的 URL 创建一个 WebView 容器，并加载该 URL 指向的网页内容。- 用户在小程序中可以直接看到并交互该网页，就像在浏览器中一样。
- 当页面加载时，小程序会读取数据对象中的
最终的界面如下：
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
