微信小程序版居民互动端设置说明

微信小程序版居民互动端设置说明

一、居民互动端网站：

居民互动端网站主要用于展现操作界面、保存图片，与社区信息化管理系统中转通讯。

在服务器上安装IIS（或apache等Web服务器），安装PHP系统（建议8.0以上版本）并启用图片处理模块等。

上传对应的互动端文件到服务器上。

网站需要一个域名，并且需要进行ICP备案。最后由我公司将该域名添加到小程序允许访问的域名列表中（独立部署的用户自行在腾讯小程序后台添加）。

二、服务器端设置：

用admin账号登录社区信息化管理系统，主菜单【系统管理】【参数设置】打开如下窗口：

如上图红色方框处点击开启相应的功能。红色箭号所指为居民互动端的网址与IP，如实填写。微信推送接口，如果是公用的，直接调用我公司的接口，如果是私有部署，调用自己服务器接口。

三、居民端设置：

1、主界面：

用文本编辑软件打开居民互动网站的/api/home_mp.json文件。

{
	"title": "智慧社区居民互动系统",    //对应上图（1）的内容
	"main": {
		"icon": "/static/logo.png",    //对应上图（4）位置的内容
		"iconStyle": "height: 184rpx; width: 208.5rpx; margin: 50rpx auto;",
		"subTitle": {    //对应上图（4）位置的内容
			"show": false,
			"text": "欢迎使用腾云智慧社区",
			"style": "font-size: 36rpx; color: #8f8f94; margin-bottom: 30rpx"
		},
		"itemColumn": 4,    //对应上图（5）位置的每行图标个数定义
		"showItems": [    //对应上图（5）位置的功能图标顺序，不想使用的功能移除，名称与下方功能模块定义一致
			"appointment", "report", "resident", "family", "phone", "archive", "worker"
		],
		"appointment": {    //功能模块图标样式定义
			"title": "居民
预约服务",
			"icon": "time",
			"iconColor": "#fffe",
			"iconSize": 36,
			"iconStyle": "background: linear-gradient(#1f3ff2, #4a83ff); border-radius: 50%; padding: 13rpx; line-height: 64rpx;"
		},
		"report": {    //功能模块图标样式定义
			"title": "居民问题
上报及反馈",
			"icon": "help",
			"iconColor": "#fffe",
			"iconSize": 36,
			"iconStyle": "background: linear-gradient(#1f3ff2, #4a83ff); border-radius: 50%; padding: 13rpx; line-height: 64rpx;"
		},
		"resident": {    //功能模块样式定义
			"title": "新增人口信息
自主申报",
			"icon1": "/static/btn_wait.png",
			"icon": "add-friends",
			"iconColor": "#fffe",
			"iconSize": 36,
			"iconStyle": "background: linear-gradient(#1f3ff2, #4a83ff); border-radius: 50%; padding: 13rpx; line-height: 64rpx;"
		},
		"worker": {    //功能模块图标样式定义
			"title": "工作人员
去向查看",
			"icon": "group-detail",
			"iconColor": "#fffe",
			"iconSize": 36,
			"iconStyle": "background: linear-gradient(#1f3ff2, #4a83ff); border-radius: 50%; padding: 13rpx; line-height: 64rpx;"
		},
		"family": {    //功能模块图标样式定义
			"title": "家庭信息和
个人信息查看",
			"icon": "home",
			"iconColor": "#fffe",
			"iconSize": 36,
			"iconStyle": "background: linear-gradient(#1f3ff2, #4a83ff); border-radius: 50%; padding: 13rpx; line-height: 64rpx;"
		},
		"phone": {    //功能模块图标样式定义
			"title": "便民通讯录",
			"icon": "cellphone",
			"iconColor": "#fffe",
			"iconSize": 36,
			"iconStyle": "background: linear-gradient(#1f3ff2, #4a83ff); border-radius: 50%; padding: 13rpx; line-height: 64rpx;"
		},
		"archive": {    //功能模块图标样式定义
			"title": "文章列表
查看",
			"icon": "note",
			"iconColor": "#fffe",
			"iconSize": 36,
			"iconStyle": "background: linear-gradient(#1f3ff2, #4a83ff); border-radius: 50%; padding: 13rpx; line-height: 64rpx;"
		},
		"style": {    //对应上图（5）位置区域的样式
			"flex": 1,
			"display": "flex",
			"flexDirection": "column",
			"alignItems": "center",
			"background": "#fff",
			"padding": "20rpx",
			"margin": "0rpx",
			"width": "100%"
		}
	},
	"service": {    //对应上图（7）位置的定义
		"show": true,
		"text": "宁德市腾云网络科技有限公司",
		"style": "font-size: 18rpx; color: #fffb; margin-top: 24rpx"
	},
	"icp": {    //对应上图（8）位置的定义
		"show": true,
		"text": "小程序备案 闽ICP备2022007940号-2X",
		"style": "font-size: 12rpx; color: green; margin-top: 10rpx; color: #fffa"
	},
	"bg": {    //整个页面背景的定义
		"backgroundImage": "url(./static/home.jpg),linear-gradient(0deg, #042a70, #001844, #001844)",
		"backgroundPosition": "top",
		"backgroundRepeat": "no-repeat",
		"backgroundSize": "100%"
	},
	"subscribemsg": true
}

有关功能模块图标定义说明如下：

"模块名称": {    //功能模块图标样式定义
	"title": "模块的文字标题",
	"icon": "note",    //图标名或图片文件URL，使用图片可删除以下三个定义
	"iconColor": "#fffe",
	"iconSize": 36,
	"iconStyle": "background: linear-gradient(#1f3ff2, #4a83ff); border-radius: 50%; padding: 13rpx; line-height: 64rpx;"
}

图标参考：https://wechat-miniprogram.github.io/weui/docs/icon.html

轮播、通告、公告的定义说明如下：

用文本编辑软件打开居民互动网站的/api/home_msg.json文件。

{
	"swiper": {    //对应上图（2）位置的轮播定义
		"style": "background: #fff;height: 50vw;",
		"show": true,
		"items": [    //轮播项目的定义，图片宽高比为2：1（建议1080*540）URL必须是在小程序后台允许的域名
			{"image": "/static/图片.jpg", "url": "点击打开的网址"},
			{"image": "/static/s2.jpg", "url": "/archive/1.html"},
			{"image": "/static/s3.jpg", "url": "/archive/2.html"}
		]
	},
	"notify": {    //对应上图（3）位置通告定义
		"show": true,
		"style": "background: #fffe;",
		"iconColor": "#fff",    //公用样式
		"itemStyle" : "background: orange; width: calc(100% - 72rpx); margin: 0 20rpx; padding: 16rpx; color: #fff; border-radius: 10rpx;",
		"items": [    //通告项目的定义：标题和打开的网页
			{
				"title": "国庆期间注意事项通知",
				"url": "/archive/2.html"
			},
			{
				"iconColor": "#ff0",    //私有样式
				"style" : "background: green; width: calc(100% - 72rpx); margin: 0 20rpx; padding: 16rpx; color: #ff0; border-radius: 10rpx;",
				"title": "中秋节期间注意安全通知",
				"url": "/archive/1.html"
			}
		]
	},
	"notice": {    //对应上图（6）公告区的定义
		"show": true,
		"title": "社区公告",    //公告标题
		"titleStyle": "background: #fffe; color: #000; padding: 18rpx 18rpx 18rpx 32rpx; font-size: 36rpx; font-weight: bold",
		"list": [    //显示的项目：标题、打开的页面、
			{ "title": "国庆期间注意事项通知",
			  "url": "/archive/1.html",
			  "time": "2023-09-12" },
			{ "title": "国庆期间注意事项通知",
				"url": "/archive/1.html",
			  "time": "2023-09-12" }
		],
		"style": {
			"flex": 1,
			"display": "flex",
			"flexDirection": "column",
			"alignItems": "center",
			"background": "#fff",
			"padding": "20rpx",
			"margin": "0rpx",
			"width": "100vw"
		}
	}
}

2、次界面：

次界面定义的文件有：appointment.json、report.json、resident.json、worker.json、family.json、archive.json，内容大同小异。

3、后台接口：

打开 /api/global.php，根据实际情况修改

四、小程序与网页版：

小程序和网页版只能选用其一（因为产生的openid不同）。

五、私有部署：

小程序支持由社区独立上架，我公司收取600元服务费。

用户可使用自己的图标、小程序名称。

六、共用部署：

共用由我公司上架的小程序，由我公司根据用户的域名生成不同的小程序码进行分发使用。我公司不收取费用。

用户只能使用统一的图标、小程序名称（显示：腾云社区居民互动系统）。