Upload Source
This commit is contained in:
kingc
parent
57f8dcd81e
commit
3a3a09328d
31
.eslintrc.js
Normal file
31
.eslintrc.js
Normal file
@ -0,0 +1,31 @@
|
||||
/*
|
||||
* Eslint config file
|
||||
* Documentation: https://eslint.org/docs/user-guide/configuring/
|
||||
* Install the Eslint extension before using this feature.
|
||||
*/
|
||||
module.exports = {
|
||||
env: {
|
||||
es6: true,
|
||||
browser: true,
|
||||
node: true,
|
||||
},
|
||||
ecmaFeatures: {
|
||||
modules: true,
|
||||
},
|
||||
parserOptions: {
|
||||
ecmaVersion: 2018,
|
||||
sourceType: 'module',
|
||||
},
|
||||
globals: {
|
||||
wx: true,
|
||||
App: true,
|
||||
Page: true,
|
||||
getCurrentPages: true,
|
||||
getApp: true,
|
||||
Component: true,
|
||||
requirePlugin: true,
|
||||
requireMiniProgram: true,
|
||||
},
|
||||
// extends: 'eslint:recommended',
|
||||
rules: {},
|
||||
}
|
||||
@ -1,2 +1,4 @@
|
||||
# WeChatApps
|
||||
|
||||
##自己替换/images四张图片，底部导航栏用，名字别变，单张图片大小小于40KB，否则报错。
|
||||
##文章在models/articleManager.js 自己照着替换文字。
|
||||
##大图片是网页直链图片，不要想着本地，会报错。替换大图片自己找网页直链图片。
|
||||
##未提及文件不要瞎改，除非你会。直接提交被判抄袭概不负责。
|
||||
15
app.js
Normal file
15
app.js
Normal file
@ -0,0 +1,15 @@
|
||||
// app.js
|
||||
const { ImageManager } = require('./utils/imageManager');
|
||||
|
||||
App({
|
||||
onLaunch() {
|
||||
// 初始化图片管理器
|
||||
this.globalData = {
|
||||
imageManager: new ImageManager()
|
||||
};
|
||||
},
|
||||
|
||||
globalData: {
|
||||
imageManager: null
|
||||
}
|
||||
})
|
||||
45
app.json
Normal file
45
app.json
Normal file
@ -0,0 +1,45 @@
|
||||
{
|
||||
"pages": [
|
||||
"pages/index/index",
|
||||
"pages/article/article"
|
||||
],
|
||||
"window": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationStyle": "custom"
|
||||
},
|
||||
"tabBar": {
|
||||
"color": "#999999",
|
||||
"selectedColor": "#1296db",
|
||||
"backgroundColor": "#ffffff",
|
||||
"borderStyle": "black",
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/index/index",
|
||||
"text": "主页",
|
||||
"iconPath": "images/home.png",
|
||||
"selectedIconPath": "images/home-active.png"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/article/article",
|
||||
"text": "文章",
|
||||
"iconPath": "images/article.png",
|
||||
"selectedIconPath": "images/article-active.png"
|
||||
}
|
||||
]
|
||||
},
|
||||
"style": "v2",
|
||||
"renderer": "skyline",
|
||||
"rendererOptions": {
|
||||
"skyline": {
|
||||
"defaultDisplayBlock": true,
|
||||
"defaultContentBox": true,
|
||||
"tagNameStyleIsolation": "legacy",
|
||||
"disableABTest": true,
|
||||
"sdkVersionBegin": "3.0.0",
|
||||
"sdkVersionEnd": "15.255.255"
|
||||
}
|
||||
},
|
||||
"componentFramework": "glass-easel",
|
||||
"sitemapLocation": "sitemap.json",
|
||||
"lazyCodeLoading": "requiredComponents"
|
||||
}
|
||||
17
app.wxss
Normal file
17
app.wxss
Normal file
@ -0,0 +1,17 @@
|
||||
/**app.wxss**/
|
||||
page {
|
||||
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
|
||||
Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',
|
||||
sans-serif;
|
||||
background-color: #f6f6f6;
|
||||
font-size: 32rpx;
|
||||
width: 100%;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
0
components/article-card/article-card.js
Normal file
0
components/article-card/article-card.js
Normal file
4
components/article-card/article-card.json
Normal file
4
components/article-card/article-card.json
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"component": true,
|
||||
"usingComponents": {}
|
||||
}
|
||||
0
components/article-card/article-card.wxml
Normal file
0
components/article-card/article-card.wxml
Normal file
0
components/article-card/article-card.wxss
Normal file
0
components/article-card/article-card.wxss
Normal file
102
components/navigation-bar/navigation-bar.js
Normal file
102
components/navigation-bar/navigation-bar.js
Normal file
@ -0,0 +1,102 @@
|
||||
Component({
|
||||
options: {
|
||||
multipleSlots: true // 在组件定义时的选项中启用多slot支持
|
||||
},
|
||||
/**
|
||||
* 组件的属性列表
|
||||
*/
|
||||
properties: {
|
||||
extClass: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
color: {
|
||||
type: String,
|
||||
value: ''
|
||||
},
|
||||
back: {
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
loading: {
|
||||
type: Boolean,
|
||||
value: false
|
||||
},
|
||||
homeButton: {
|
||||
type: Boolean,
|
||||
value: false,
|
||||
},
|
||||
animated: {
|
||||
// 显示隐藏的时候opacity动画效果
|
||||
type: Boolean,
|
||||
value: true
|
||||
},
|
||||
show: {
|
||||
// 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
|
||||
type: Boolean,
|
||||
value: true,
|
||||
observer: '_showChange'
|
||||
},
|
||||
// back为true的时候，返回的页面深度
|
||||
delta: {
|
||||
type: Number,
|
||||
value: 1
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 组件的初始数据
|
||||
*/
|
||||
data: {
|
||||
displayStyle: ''
|
||||
},
|
||||
lifetimes: {
|
||||
attached() {
|
||||
const rect = wx.getMenuButtonBoundingClientRect()
|
||||
const platform = (wx.getDeviceInfo() || wx.getSystemInfoSync()).platform
|
||||
const isAndroid = platform === 'android'
|
||||
const isDevtools = platform === 'devtools'
|
||||
const { windowWidth, safeArea: { top = 0, bottom = 0 } = {} } = wx.getWindowInfo() || wx.getSystemInfoSync()
|
||||
this.setData({
|
||||
ios: !isAndroid,
|
||||
innerPaddingRight: `padding-right: ${windowWidth - rect.left}px`,
|
||||
leftWidth: `width: ${windowWidth - rect.left}px`,
|
||||
safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${top}px); padding-top: ${top}px` : ``
|
||||
})
|
||||
},
|
||||
},
|
||||
/**
|
||||
* 组件的方法列表
|
||||
*/
|
||||
methods: {
|
||||
_showChange(show) {
|
||||
const animated = this.data.animated
|
||||
let displayStyle = ''
|
||||
if (animated) {
|
||||
displayStyle = `opacity: ${show ? '1' : '0'
|
||||
};transition:opacity 0.5s;`
|
||||
} else {
|
||||
displayStyle = `display: ${show ? '' : 'none'}`
|
||||
}
|
||||
this.setData({
|
||||
displayStyle
|
||||
})
|
||||
},
|
||||
back() {
|
||||
const data = this.data
|
||||
if (data.delta) {
|
||||
wx.navigateBack({
|
||||
delta: data.delta
|
||||
})
|
||||
}
|
||||
this.triggerEvent('back', { delta: data.delta }, {})
|
||||
}
|
||||
},
|
||||
})
|
||||
5
components/navigation-bar/navigation-bar.json
Normal file
5
components/navigation-bar/navigation-bar.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"component": true,
|
||||
"styleIsolation": "apply-shared",
|
||||
"usingComponents": {}
|
||||
}
|
||||
64
components/navigation-bar/navigation-bar.wxml
Normal file
64
components/navigation-bar/navigation-bar.wxml
Normal file
@ -0,0 +1,64 @@
|
||||
<view class="weui-navigation-bar {{extClass}}">
|
||||
<view class="weui-navigation-bar__inner {{ios ? 'ios' : 'android'}}" style="color: {{color}}; background: {{background}}; {{displayStyle}}; {{innerPaddingRight}}; {{safeAreaTop}};">
|
||||
|
||||
<!-- 左侧按钮 -->
|
||||
<view class='weui-navigation-bar__left' style="{{leftWidth}};">
|
||||
<block wx:if="{{back || homeButton}}">
|
||||
<!-- 返回上一页 -->
|
||||
<block wx:if="{{back}}">
|
||||
<view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_goback">
|
||||
<view
|
||||
bindtap="back"
|
||||
class="weui-navigation-bar__btn_goback_wrapper"
|
||||
hover-class="weui-active"
|
||||
hover-stay-time="100"
|
||||
aria-role="button"
|
||||
aria-label="返回"
|
||||
>
|
||||
<view class="weui-navigation-bar__button weui-navigation-bar__btn_goback"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
<!-- 返回首页 -->
|
||||
<block wx:if="{{homeButton}}">
|
||||
<view class="weui-navigation-bar__buttons weui-navigation-bar__buttons_home">
|
||||
<view
|
||||
bindtap="home"
|
||||
class="weui-navigation-bar__btn_home_wrapper"
|
||||
hover-class="weui-active"
|
||||
aria-role="button"
|
||||
aria-label="首页"
|
||||
>
|
||||
<view class="weui-navigation-bar__button weui-navigation-bar__btn_home"></view>
|
||||
</view>
|
||||
</view>
|
||||
</block>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<slot name="left"></slot>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 标题 -->
|
||||
<view class='weui-navigation-bar__center'>
|
||||
<view wx:if="{{loading}}" class="weui-navigation-bar__loading" aria-role="alert">
|
||||
<view
|
||||
class="weui-loading"
|
||||
aria-role="img"
|
||||
aria-label="加载中"
|
||||
></view>
|
||||
</view>
|
||||
<block wx:if="{{title}}">
|
||||
<text>{{title}}</text>
|
||||
</block>
|
||||
<block wx:else>
|
||||
<slot name="center"></slot>
|
||||
</block>
|
||||
</view>
|
||||
|
||||
<!-- 右侧留空 -->
|
||||
<view class='weui-navigation-bar__right'>
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
96
components/navigation-bar/navigation-bar.wxss
Normal file
96
components/navigation-bar/navigation-bar.wxss
Normal file
@ -0,0 +1,96 @@
|
||||
.weui-navigation-bar {
|
||||
--weui-FG-0:rgba(0,0,0,.9);
|
||||
--height: 44px;
|
||||
--left: 16px;
|
||||
}
|
||||
.weui-navigation-bar .android {
|
||||
--height: 48px;
|
||||
}
|
||||
|
||||
.weui-navigation-bar {
|
||||
overflow: hidden;
|
||||
color: var(--weui-FG-0);
|
||||
flex: none;
|
||||
}
|
||||
|
||||
.weui-navigation-bar__inner {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: calc(var(--height) + env(safe-area-inset-top));
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: env(safe-area-inset-top);
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.weui-navigation-bar__left {
|
||||
position: relative;
|
||||
padding-left: var(--left);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.weui-navigation-bar__btn_goback_wrapper {
|
||||
padding: 11px 18px 11px 16px;
|
||||
margin: -11px -18px -11px -16px;
|
||||
}
|
||||
|
||||
.weui-navigation-bar__btn_goback_wrapper.weui-active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.weui-navigation-bar__btn_goback {
|
||||
font-size: 12px;
|
||||
width: 12px;
|
||||
height: 24px;
|
||||
-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
|
||||
mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='24' viewBox='0 0 12 24'%3E %3Cpath fill-opacity='.9' fill-rule='evenodd' d='M10 19.438L8.955 20.5l-7.666-7.79a1.02 1.02 0 0 1 0-1.42L8.955 3.5 10 4.563 2.682 12 10 19.438z'/%3E%3C/svg%3E") no-repeat 50% 50%;
|
||||
-webkit-mask-size: cover;
|
||||
mask-size: cover;
|
||||
background-color: var(--weui-FG-0);
|
||||
}
|
||||
|
||||
.weui-navigation-bar__center {
|
||||
font-size: 17px;
|
||||
text-align: center;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: bold;
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.weui-navigation-bar__loading {
|
||||
margin-right: 4px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.weui-loading {
|
||||
font-size: 16px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
display: block;
|
||||
background: transparent url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg width='80px' height='80px' viewBox='0 0 80 80' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Ctitle%3Eloading%3C/title%3E%3Cdefs%3E%3ClinearGradient x1='94.0869141%25' y1='0%25' x2='94.0869141%25' y2='90.559082%25' id='linearGradient-1'%3E%3Cstop stop-color='%23606060' stop-opacity='0' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3ClinearGradient x1='100%25' y1='8.67370605%25' x2='100%25' y2='90.6286621%25' id='linearGradient-2'%3E%3Cstop stop-color='%23606060' offset='0%25'%3E%3C/stop%3E%3Cstop stop-color='%23606060' stop-opacity='0.3' offset='100%25'%3E%3C/stop%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' opacity='0.9'%3E%3Cg%3E%3Cpath d='M40,0 C62.09139,0 80,17.90861 80,40 C80,62.09139 62.09139,80 40,80 L40,73 C58.2253967,73 73,58.2253967 73,40 C73,21.7746033 58.2253967,7 40,7 L40,0 Z' fill='url(%23linearGradient-1)'%3E%3C/path%3E%3Cpath d='M40,0 L40,7 C21.7746033,7 7,21.7746033 7,40 C7,58.2253967 21.7746033,73 40,73 L40,80 C17.90861,80 0,62.09139 0,40 C0,17.90861 17.90861,0 40,0 Z' fill='url(%23linearGradient-2)'%3E%3C/path%3E%3Ccircle id='Oval' fill='%23606060' cx='40.5' cy='3.5' r='3.5'%3E%3C/circle%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A") no-repeat;
|
||||
background-size: 100%;
|
||||
margin-left: 0;
|
||||
animation: loading linear infinite 1s;
|
||||
}
|
||||
|
||||
@keyframes loading {
|
||||
from {
|
||||
transform: rotate(0);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
BIN
images/article-active.png
Normal file
BIN
images/article-active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
images/article.png
Normal file
BIN
images/article.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 37 KiB |
BIN
images/home-active.png
Normal file
BIN
images/home-active.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 33 KiB |
BIN
images/home.png
Normal file
BIN
images/home.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
23
models/article.js
Normal file
23
models/article.js
Normal file
@ -0,0 +1,23 @@
|
||||
/**
|
||||
* 文章数据模型
|
||||
*/
|
||||
class Article {
|
||||
constructor(id, title, content, cover, summary, createTime) {
|
||||
this.id = id;
|
||||
this.title = title;
|
||||
this.content = content;
|
||||
this.cover = cover;
|
||||
this.summary = summary || this.generateSummary(content);
|
||||
this.createTime = createTime || new Date().getTime();
|
||||
}
|
||||
|
||||
// 生成摘要
|
||||
generateSummary(content) {
|
||||
if (!content) return '';
|
||||
return content.substring(0, 100).replace(/<[^>]+>/g, '') + '...';
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
Article
|
||||
}
|
||||
45
models/articleManager.js
Normal file
45
models/articleManager.js
Normal file
@ -0,0 +1,45 @@
|
||||
const { Article } = require('./article');
|
||||
|
||||
/**
|
||||
* 文章管理类
|
||||
*/
|
||||
class ArticleManager {
|
||||
constructor() {
|
||||
this.articles = this.initArticles();
|
||||
}
|
||||
|
||||
// 初始化文章
|
||||
initArticles() {
|
||||
return [ new Article(
|
||||
'1',
|
||||
'文章标题',
|
||||
`<p>第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行第一行</p>
|
||||
<p>第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行第二行</p>
|
||||
<img class="article-image" src="https://www.meetstarry.com/banner1.png" style="width:100%;max-width:100%;display:block;margin:15px 0;border-radius:8px;" />
|
||||
<p>第三行第三行第三行第三行第三行第三行第三行第三行第三行第三行第三行第三行</p>
|
||||
<p>第四行第四行第四行第四行第四行第四行第四行第四行第四行第四行第四行第四行</p>
|
||||
<p>第五行第五行第五行第五行第五行第五行第五行第五行第五行第五行第五行第五行</p>`,
|
||||
new Date('2025-05-13').getTime()
|
||||
),
|
||||
];
|
||||
}
|
||||
|
||||
// 获取所有文章
|
||||
getAllArticles() {
|
||||
return this.articles;
|
||||
}
|
||||
|
||||
// 获取特定文章
|
||||
getArticleById(id) {
|
||||
return this.articles.find(article => article.id === id);
|
||||
}
|
||||
|
||||
// 获取最新文章
|
||||
getLatestArticle() {
|
||||
return this.articles.sort((a, b) => b.createTime - a.createTime)[0];
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
ArticleManager
|
||||
}
|
||||
47
pages/article/article.js
Normal file
47
pages/article/article.js
Normal file
@ -0,0 +1,47 @@
|
||||
const { ArticleManager } = require('../../models/articleManager');
|
||||
const { formatDate } = require('../../utils/util');
|
||||
|
||||
Page({
|
||||
data: {
|
||||
article: null,
|
||||
formatDate: ''
|
||||
},
|
||||
onLoad: function (options) {
|
||||
this.articleManager = new ArticleManager();
|
||||
|
||||
// 如果有指定文章ID，则显示该文章
|
||||
if (options.id) {
|
||||
this.loadArticle(options.id);
|
||||
} else {
|
||||
// 否则显示最新文章
|
||||
const latestArticle = this.articleManager.getLatestArticle();
|
||||
if (latestArticle) {
|
||||
this.loadArticle(latestArticle.id);
|
||||
}
|
||||
}
|
||||
},
|
||||
// 加载指定ID的文章
|
||||
loadArticle: function(id) {
|
||||
const article = this.articleManager.getArticleById(id);
|
||||
if (article) { // 格式化日期
|
||||
const date = new Date(article.createTime);
|
||||
const formattedDate = formatDate(date); this.setData({
|
||||
article: article,
|
||||
formatDate: formattedDate
|
||||
});
|
||||
} },
|
||||
|
||||
// 分享功能
|
||||
onShareAppMessage: function () {
|
||||
if (this.data.article) {
|
||||
return {
|
||||
title: this.data.article.title,
|
||||
path: `/pages/article/article?id=${this.data.article.id}`
|
||||
};
|
||||
}
|
||||
return {
|
||||
title: '精选文章',
|
||||
path: '/pages/article/article'
|
||||
};
|
||||
}
|
||||
})
|
||||
5
pages/article/article.json
Normal file
5
pages/article/article.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
12
pages/article/article.wxml
Normal file
12
pages/article/article.wxml
Normal file
@ -0,0 +1,12 @@
|
||||
<navigation-bar title="文章" back="{{false}}" color="black" background="#FFF"></navigation-bar>
|
||||
|
||||
<scroll-view scroll-y class="container">
|
||||
<view class="article-container" wx:if="{{article}}">
|
||||
<view class="article-header">
|
||||
<text class="article-title">{{article.title}}</text>
|
||||
<text class="article-time">{{formatDate}}</text>
|
||||
</view>
|
||||
<view class="article-content">
|
||||
<rich-text nodes="{{article.content}}"></rich-text>
|
||||
</view> </view>
|
||||
</scroll-view>
|
||||
110
pages/article/article.wxss
Normal file
110
pages/article/article.wxss
Normal file
@ -0,0 +1,110 @@
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100vh;
|
||||
padding: 0 0 120rpx; /* 增大底部内边距，为底部导航栏留出足够空间 */
|
||||
box-sizing: border-box;
|
||||
background: #f6f6f6;
|
||||
}
|
||||
|
||||
.article-container {
|
||||
padding: 20px;
|
||||
margin: 20px 20px 50px; /* 增大底部外边距 */
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
.article-header {
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 1px solid #eee;
|
||||
padding-bottom: 15px;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 10px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.article-time {
|
||||
font-size: 14px;
|
||||
color: #999;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
line-height: 1.8;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
letter-spacing: 0.05em; /* 添加字间距 */
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif; /* 设置更适合阅读的字体 */
|
||||
}
|
||||
|
||||
.article-content rich-text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.article-content rich-text p {
|
||||
margin-bottom: 15px;
|
||||
text-indent: 2em; /* 添加首行缩进2个字符 */
|
||||
text-align: justify; /* 文本两端对齐 */
|
||||
}
|
||||
|
||||
/* 文章中的图片样式 */
|
||||
.article-content image,
|
||||
.article-content img {
|
||||
width: 100%;
|
||||
margin: 15px 0;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/* 引用内容样式 */
|
||||
.article-content blockquote {
|
||||
padding: 10px 15px;
|
||||
background: #f9f9f9;
|
||||
border-left: 4px solid #1296db;
|
||||
margin: 15px 0;
|
||||
color: #666;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
/* 列表样式 */
|
||||
.article-content ul,
|
||||
.article-content ol {
|
||||
padding-left: 2em;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
/* 粗体文字样式 */
|
||||
.article-content strong {
|
||||
font-weight: bold;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
/* 文章小标题样式 */
|
||||
.article-content h1,
|
||||
.article-content h2,
|
||||
.article-content h3,
|
||||
.article-content h4 {
|
||||
margin: 20px 0 10px;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
}
|
||||
|
||||
.article-image {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 15px 0;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
0
pages/article/article.wxss.new
Normal file
0
pages/article/article.wxss.new
Normal file
60
pages/index/index.js
Normal file
60
pages/index/index.js
Normal file
@ -0,0 +1,60 @@
|
||||
// index.js
|
||||
const { ArticleManager } = require('../../models/articleManager');
|
||||
const { formatDate } = require('../../utils/util');
|
||||
|
||||
Page({
|
||||
data: {
|
||||
bannerList: [
|
||||
{ imageUrl: 'https://www.meetstarry.com/banner1.png', title: '1' },
|
||||
{ imageUrl: 'https://www.meetstarry.com/banner2.png', title: '2' },
|
||||
{ imageUrl: 'https://www.meetstarry.com/banner3.png', title: '3' }
|
||||
],
|
||||
article: null,
|
||||
formatDate: ''
|
||||
},
|
||||
|
||||
onLoad() {
|
||||
// 实例化文章管理器
|
||||
this.articleManager = new ArticleManager();
|
||||
|
||||
// 获取最新的一篇文章
|
||||
const latestArticle = this.articleManager.getLatestArticle();
|
||||
if (latestArticle) {
|
||||
// 格式化日期
|
||||
const date = new Date(latestArticle.createTime);
|
||||
const formattedDate = formatDate(date);
|
||||
|
||||
this.setData({
|
||||
article: latestArticle,
|
||||
formatDate: formattedDate
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 图片加载错误处理
|
||||
*/
|
||||
onImageError(e) {
|
||||
const index = e.currentTarget.dataset.index;
|
||||
const app = getApp();
|
||||
const defaultImage = app.globalData.imageManager ? app.globalData.imageManager.defaultImage : 'https://www.meetstarry.com/default.png';
|
||||
|
||||
// 处理轮播图错误
|
||||
if (typeof index !== 'undefined') {
|
||||
const key = `bannerList[${index}].imageUrl`;
|
||||
this.setData({
|
||||
[key]: defaultImage
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
/**
|
||||
* 用户点击右上角分享
|
||||
*/
|
||||
onShareAppMessage() {
|
||||
return {
|
||||
title: '精选文章',
|
||||
path: '/pages/index/index'
|
||||
};
|
||||
}
|
||||
})
|
||||
5
pages/index/index.json
Normal file
5
pages/index/index.json
Normal file
@ -0,0 +1,5 @@
|
||||
{
|
||||
"usingComponents": {
|
||||
"navigation-bar": "/components/navigation-bar/navigation-bar"
|
||||
}
|
||||
}
|
||||
44
pages/index/index.wxml
Normal file
44
pages/index/index.wxml
Normal file
@ -0,0 +1,44 @@
|
||||
<!--index.wxml-->
|
||||
<navigation-bar title="首页" back="{{false}}" color="black" background="#FFF"></navigation-bar>
|
||||
<view class="page-wrapper">
|
||||
<scroll-view class="scrollarea" scroll-y type="list">
|
||||
<!-- 轮播图部分 -->
|
||||
<view class="swiper-container">
|
||||
<swiper
|
||||
class="banner"
|
||||
indicator-dots="{{true}}"
|
||||
indicator-color="rgba(255,255,255,0.5)"
|
||||
indicator-active-color="#ffffff"
|
||||
autoplay="{{true}}"
|
||||
interval="{{3000}}"
|
||||
duration="{{500}}"
|
||||
circular="{{true}}">
|
||||
<block wx:for="{{bannerList}}" wx:key="index">
|
||||
<swiper-item>
|
||||
<image
|
||||
class="banner-image"
|
||||
lazy-load="{{true}}"
|
||||
src="{{item.imageUrl}}"
|
||||
mode="aspectFill"
|
||||
binderror="onImageError"
|
||||
data-index="{{index}}">
|
||||
</image>
|
||||
<!-- 轮播图标题 -->
|
||||
<view class="banner-title">{{item.title || '轮播图 ' + (index + 1)}}</view>
|
||||
</swiper-item>
|
||||
</block>
|
||||
</swiper>
|
||||
</view>
|
||||
<view class="container">
|
||||
<!-- 单篇文章展示 -->
|
||||
<view class="article-section">
|
||||
<view class="article-header">
|
||||
<text class="article-title">{{article.title}}</text>
|
||||
<text class="article-time">{{formatDate}}</text>
|
||||
</view>
|
||||
<view class="article-content">
|
||||
<rich-text nodes="{{article.content}}"></rich-text>
|
||||
</view>
|
||||
</view> </view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
185
pages/index/index.wxss
Normal file
185
pages/index/index.wxss
Normal file
@ -0,0 +1,185 @@
|
||||
/**index.wxss**/
|
||||
page {
|
||||
height: 100vh;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
|
||||
.page-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.page-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100vh;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.scrollarea {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
padding-bottom: 100rpx; /* 为底部导航栏留出空间 */
|
||||
}
|
||||
|
||||
/* 轮播图样式 */
|
||||
.swiper-container {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
margin: 0; /* 移除所有边距 */
|
||||
padding: 0; /* 确保没有内边距 */
|
||||
}
|
||||
|
||||
.banner {
|
||||
width: 100%;
|
||||
height: 400rpx; /* 确保高度固定 */
|
||||
border-radius: 0; /* 移除圆角，轮播图现在是文章内的一部分 */
|
||||
overflow: hidden; /* 确保内容不溢出 */
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1); /* 调整阴影效果 */
|
||||
}
|
||||
|
||||
/* 轮播图加载状态 */
|
||||
.banner-loading {
|
||||
width: 100%;
|
||||
height: 400rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: #f0f0f0;
|
||||
border-radius: 0; /* 移除圆角，与轮播图样式保持一致 */
|
||||
}
|
||||
|
||||
.loading-indicator {
|
||||
width: 60rpx;
|
||||
height: 60rpx;
|
||||
border: 6rpx solid #e0e0e0;
|
||||
border-top: 6rpx solid #1296db;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
.banner-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transition: transform 0.3s ease;
|
||||
/* 以下属性可能在WebView模式下不完全支持，但不会导致显示错误 */
|
||||
will-change: transform;
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
|
||||
.banner-title {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
|
||||
color: white;
|
||||
padding: 30rpx;
|
||||
font-size: 32rpx;
|
||||
text-shadow: 0 1rpx 3rpx rgba(0,0,0,0.5);
|
||||
font-weight: 600;
|
||||
z-index: 10;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 120rpx; /* 为标题提供足够空间 */
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 20rpx;
|
||||
padding-bottom: 50rpx; /* 为底部导航栏增加额外的空间 */
|
||||
}
|
||||
|
||||
/* 文章部分样式 */
|
||||
.article-scroll {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
-webkit-overflow-scrolling: touch; /* 在WebView模式下提供流畅滚动 */
|
||||
}
|
||||
|
||||
.article-section {
|
||||
background: #fff;
|
||||
border-radius: 10rpx;
|
||||
padding: 30rpx;
|
||||
margin: 20rpx 0 50rpx; /* 增加底部外边距 */
|
||||
box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
|
||||
}
|
||||
|
||||
.article-header {
|
||||
margin-bottom: 20rpx;
|
||||
padding-bottom: 20rpx;
|
||||
border-bottom: 1rpx solid #eee;
|
||||
}
|
||||
|
||||
.article-title {
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.article-time {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.article-content {
|
||||
font-size: 28rpx;
|
||||
line-height: 1.8;
|
||||
color: #333;
|
||||
margin-bottom: 20rpx; /* 添加底部间距 */
|
||||
letter-spacing: 0.05em; /* 添加字间距 */
|
||||
font-family: "PingFang SC", "Microsoft YaHei", sans-serif; /* 设置更适合阅读的字体 */
|
||||
}
|
||||
|
||||
.article-content rich-text {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
/* 段落样式 */
|
||||
.article-content rich-text p {
|
||||
margin-bottom: 15rpx;
|
||||
text-indent: 2em; /* 添加首行缩进2个字符 */
|
||||
text-align: justify; /* 文本两端对齐 */
|
||||
}
|
||||
|
||||
/* 文章中的图片样式 */
|
||||
.article-content image,
|
||||
.article-content img {
|
||||
width: 100%;
|
||||
margin: 15rpx 0;
|
||||
border-radius: 8rpx;
|
||||
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
|
||||
display: block;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.article-image {
|
||||
max-width: 100%;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: block;
|
||||
margin: 15rpx 0;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
/* 移除了未使用的样式 */
|
||||
|
||||
/* 移除了重复的文章内容样式 */
|
||||
|
||||
/* 移除了未使用的段落和图片状态样式 */
|
||||
|
||||
/* 移除了未使用的模式特定样式 */
|
||||
25
project.config.json
Normal file
25
project.config.json
Normal file
@ -0,0 +1,25 @@
|
||||
{
|
||||
"setting": {
|
||||
"es6": true,
|
||||
"postcss": true,
|
||||
"minified": true,
|
||||
"uglifyFileName": false,
|
||||
"enhance": true,
|
||||
"packNpmRelationList": [],
|
||||
"babelSetting": {
|
||||
"ignore": [],
|
||||
"disablePlugins": [],
|
||||
"outputPath": ""
|
||||
},
|
||||
"useCompilerPlugins": false,
|
||||
"minifyWXML": true
|
||||
},
|
||||
"compileType": "miniprogram",
|
||||
"simulatorPluginLibVersion": {},
|
||||
"packOptions": {
|
||||
"ignore": [],
|
||||
"include": []
|
||||
},
|
||||
"appid": "wxc7291afafdd1f339",
|
||||
"editorSetting": {}
|
||||
}
|
||||
14
project.private.config.json
Normal file
14
project.private.config.json
Normal file
@ -0,0 +1,14 @@
|
||||
{
|
||||
"libVersion": "3.8.3",
|
||||
"projectname": "WeChatApps",
|
||||
"setting": {
|
||||
"urlCheck": true,
|
||||
"coverView": true,
|
||||
"lazyloadPlaceholderEnable": false,
|
||||
"skylineRenderEnable": false,
|
||||
"preloadBackgroundData": false,
|
||||
"autoAudits": false,
|
||||
"showShadowRootInWxmlPanel": true,
|
||||
"compileHotReLoad": true
|
||||
}
|
||||
}
|
||||
7
sitemap.json
Normal file
7
sitemap.json
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"desc": "关于本文件的更多信息，请参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
|
||||
"rules": [{
|
||||
"action": "allow",
|
||||
"page": "*"
|
||||
}]
|
||||
}
|
||||
0
utils/font-awesome.wxss
Normal file
0
utils/font-awesome.wxss
Normal file
25
utils/imageManager.js
Normal file
25
utils/imageManager.js
Normal file
@ -0,0 +1,25 @@
|
||||
/**
|
||||
* 图片管理器
|
||||
* 用于统一管理小程序中的图片资源
|
||||
*/
|
||||
|
||||
class ImageManager {
|
||||
constructor() {
|
||||
this.defaultImage = 'https://www.meetstarry.com/default.png';
|
||||
}
|
||||
/**
|
||||
* 获取图片，如果为空则返回默认图片
|
||||
* @param {String} url - 图片URL
|
||||
* @returns {String} - 返回图片URL
|
||||
*/
|
||||
getImageUrl(url) {
|
||||
if (!url || url === '') {
|
||||
return this.defaultImage;
|
||||
}
|
||||
return url;
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
ImageManager
|
||||
};
|
||||
44
utils/util.js
Normal file
44
utils/util.js
Normal file
@ -0,0 +1,44 @@
|
||||
/**
|
||||
* 格式化时间
|
||||
* @param {Date} date - 日期对象
|
||||
* @returns {String} - 格式化后的时间字符串 (yyyy-MM-dd)
|
||||
*/
|
||||
const formatDate = date => {
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
|
||||
return `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化时间
|
||||
* @param {Date} date - 日期对象
|
||||
* @returns {String} - 格式化后的时间字符串 (yyyy-MM-dd HH:mm:ss)
|
||||
*/
|
||||
const formatTime = date => {
|
||||
const year = date.getFullYear()
|
||||
const month = date.getMonth() + 1
|
||||
const day = date.getDate()
|
||||
const hour = date.getHours()
|
||||
const minute = date.getMinutes()
|
||||
const second = date.getSeconds()
|
||||
|
||||
return `${[year, month, day].map(formatNumber).join('-')} ${[hour, minute, second].map(formatNumber).join(':')}`
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化数字，补零
|
||||
* @param {Number} n - 数字
|
||||
* @returns {String} - 补零后的字符串
|
||||
*/
|
||||
const formatNumber = n => {
|
||||
n = n.toString()
|
||||
return n[1] ? n : `0${n}`
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
formatDate,
|
||||
formatTime,
|
||||
formatNumber
|
||||
}
|
||||
Loading…
x
Reference in New Issue
Block a user