实现小程序通知功能

前言

这里说的是轮播图下方的通知功能。

所承受的内容一般是平台公告，当前活动。

这个功能算是通用功能，每个项目都会用到。

这个功能本身不复杂，难点在于一开始不知道有什么功能，构思上比较欠缺

需求分析

1. 【小程序】小程序首页展示最新一条通知
2. 【小程序】点击后查看通知列表
3. 【小程序】点击一条通知可查看具体通知内容
4. 【小程序】通知内容支持链接和富文本
5. 【后台管理系统】可设置发布状态，发布后可展示在列表中
6. 【后台管理系统】支持链接和富文本

实现

数据库

/*
 Navicat Premium Data Transfer
 Source Server         : 本地数据库
 Source Server Type    : MySQL
 Source Server Version : 50728
 Source Host           : localhost:3306
 Source Schema         : yw-tmpl
 Target Server Type    : MySQL
 Target Server Version : 50728
 File Encoding         : 65001
 Date: 03/06/2022 20:11:24
*/
 
SET NAMES utf8mb4;
SET FOREIGN_KEY_CHECKS = 0;
 
-- ----------------------------
-- Table structure for com_tongzhi
-- ----------------------------
DROP TABLE IF EXISTS `com_tongzhi`;
CREATE TABLE `com_tongzhi`  (
  `id` varchar(32) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL COMMENT '主键id',
  `create_by` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT '' COMMENT '创建人',
  `create_time` datetime NULL DEFAULT NULL COMMENT '创建时间',
  `update_time` datetime NULL DEFAULT NULL COMMENT '修改时间',
  `update_by` varchar(255) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT '' COMMENT '修改人',
  `del_flag` int(11) NOT NULL DEFAULT 0 COMMENT '删除标志 默认0',
  `title` varchar(30) CHARACTER SET utf8 COLLATE utf8_general_ci NULL DEFAULT '' COMMENT '标题',
  `content_type` int(255) NULL DEFAULT NULL COMMENT '1.无；2.富文本；3.链接',
  `content` text CHARACTER SET utf8 COLLATE utf8_general_ci NULL COMMENT '根据内容类型定',
  `state` int(11) NULL DEFAULT 1 COMMENT '状态：1.发布；0.未发布',
  PRIMARY KEY (`id`) USING BTREE
) ENGINE = InnoDB CHARACTER SET = utf8 COLLATE = utf8_general_ci COMMENT = '用户' ROW_FORMAT = DYNAMIC;
 
SET FOREIGN_KEY_CHECKS = 1;

后端

mapper.xml

<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
        "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
<mapper namespace="com.yanwei.tmpl.module.common.tongzhi.ComTongzhiMapper">
 
    <select id="findBySearchVo" resultType="java.util.LinkedHashMap">
        select
        bl.id as id,
            bl.title as title,
            bl.state as state,
        bl.content as content,
        bl.content_type as contentType,
        DATE_FORMAT(bl.create_time,'%Y-%m-%d %h:%i:%s') as createTime
        from com_tongzhi bl
        where bl.del_flag = 0
        <if test="searchVo.title !=null and searchVo.title !=''">
            and bl.title like concat('%',#{searchVo.title},'%')
        </if>
        <if test="searchVo.state!=null">
            and bl.state = #{searchVo.state}
        </if>
        order by bl.create_time desc
    </select>
 
    <select id="findHomeShow" resultType="java.util.Map">
        select bl.title as title
        from com_tongzhi bl
        where bl.del_flag = 0
          and bl.state = 1
        order by bl.create_time limit 1
    </select>
</mapper>

uniapp(小程序)

<template>
	<view class="padding-left padding-right">
		<yw-list ref="ywList" height="0" :pageEvent="pageEvent">
			<template v-slot="{ item,index }">
				<view class="padding-sm bg-white margin-top-sm margin-bottom-sm" @click="itemClick(item,index)">
					<view class="text-sm" style="height: 100rpx;">{{item.title}}</view>
					<view class="text-xs text-right">{{item.createTime}}</view>
				</view>
			</template>
		</yw-list>
		
	</view>
</template>
 
<script>
	import {baseTongzhiFindAllByPage} from "../../../api/api.js"
	export default {
		data() {
			return {
				searchModel:{
					state:1,
				}
			}
		},
		onLoad() {
			this.$refs.ywList.shuaxin(this.searchModel)
		},
		onShow() {
			uni.setNavigationBarTitle({title:`${this.$t('issuePage.notificationList')}`})
		},
		methods: {
			pageEvent(params){
				return baseTongzhiFindAllByPage(params)
			},
			itemClick(item,index){
				console.info(item,index)
				this.$common.navigateTo("/pages/commons/web-show/web-show",{
					type:"HTML",
					title:item.title,
					content:encodeURIComponent(item.content)
				})
			}
		}
	}
</script>
 
<style>
 
</style>

<template>
	<view class="bg-white padding-sm">
		<web-view v-if="type=='URL'" :src="content"></web-view>
		<!-- 插件mp-html -->
		<mp-html v-if="type=='HTML'" :show-img-menu="false" :content="content" />
	</view>
</template>
 
<script>
	
	export default {
		data() {
			return {
				type:"",
				content:"",
			}
		},
		onLoad(param) {
			console.info(param)
			this.type = param.type
			if(param.type == 'URL'){
				// encodeURIComponent(item.url)
				this.content = decodeURIComponent(param.content)
				if(this.$common.isNotBlank(param.title)){
					uni.setNavigationBarTitle({
						title:param.title
					})
				}
			}else if(param.type == 'HTML'){
				this.content = decodeURIComponent(param.content)
				if(this.$common.isNotBlank(param.title)){
					uni.setNavigationBarTitle({
						title:param.title
					})
				}
			}
		},
		methods: {
			
		}
	}
</script>
 
<style>
 
</style>

代码

点击下载通知源码https://download.csdn.net/download/qq_17702967/85541224

感谢

在此感谢项目提供的机会。