网页版居民互动端设置说明

网页版居民互动端设置说明

一、居民互动端网站：

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

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

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

网站需要一个域名，并且需要进行ICP备案。

二、服务器端设置：

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

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

三、居民端设置：

1、主界面：

用文本编辑软件打开网站的/api/home.json文件。

  {
	"title": "智慧社区居民互动系统",    //这里对应浏览器顶部的标题
	"swiper": {    //上图中（1）位置轮播定义
		"style": "background: #fff;height: 50vw;",    //这里定义轮播的背景，高度
		"show": true,    //是否显示（false为否，下同）
		"items": [    //转播项目的定义（image为图片、url为点击打开的网址（可以为空）
			{"image": "/static/s1.jpg", "url": "https://cims.ndty.com.cn/"},
			{"image": "/static/s2.jpg", "url": "https://www.cims.vip/"},
			{"image": "/static/s3.jpg", "url": "https://www.crims.cn/"}
		]
	},
	"main": {    //上图中白色区域
		"icon": "height: 184rpx; width: 208.5rpx; margin: 50rpx auto;",    //上图中（2）位置图片定义
		"subTitle": {    //上图中（3）位置引导文字定义
			"show": true,
			"text": "欢迎使用腾云智慧社区",
			"style": "font-size: 36rpx; color: #8f8f94;"
		},
		"appointment": {    //上图中（4）位置的定义，其中icon可以是图标名称或图片文件名，为图片时iconColor、iconStyle无效
			"title": "居民
预约服务",
			"icon": "headphones",
			"iconColor": "#fffe",
			"iconSize": 42,
			"iconStyle": "background: linear-gradient(#1f3ff2, #4a83ff); border-radius: 50%; padding: 10rpx;",
			"show": true
		},
		"report": {    //上图中（5）位置的定义
			"title": "居民问题
上报及反馈",
			"icon": "headphones",
			"iconColor": "#fffe",
			"iconSize": 42,
			"iconStyle": "background: linear-gradient(#1f3ff2, #4a83ff); border-radius: 50%; padding: 10rpx;",
			"show": true
		},
		"resident": {    //上图中（6）位置的定义，此处使用了图片作为例子
			"title": "新增人口信息
自主申报",
			"icon1": "/static/btn_wait.png",
			"icon": "person",
			"iconColor": "#fffe",
			"iconSize": 42,
			"iconStyle": "background: linear-gradient(#1f3ff2, #4a83ff); border-radius: 50%; padding: 10rpx;",
			"show": true
		},
		"worker": {    //上图中（7）位置的定义
			"title": "工作人员
去向查看",
			"icon1": "/static/btn_call.png",
			"icon": "auth",
			"iconColor": "#fffe",
			"iconSize": 42,
			"iconStyle": "background: linear-gradient(#1f3ff2, #4a83ff); border-radius: 50%; padding: 10rpx;",
			"show": true
		},
		"family": {
			"title": "家庭信息和
个人信息查看",
			"icon1": "/static/btn_call.png",
			"icon": "home",
			"iconColor": "#fffe",
			"iconSize": 42,
			"iconStyle": "background: linear-gradient(#1f3ff2, #4a83ff); border-radius: 50%; padding: 20rpx 12rpx 0; line-height: 64rpx; height: 64rpx",
			"show": true
		},
		"archive": {
			"title": "文章列表
查看",
			"icon1": "/static/btn_call.png",
			"icon": "list",
			"iconColor": "#fffe",
			"iconSize": 42,
			"iconStyle": "background: linear-gradient(#1f3ff2, #4a83ff); border-radius: 50%; padding: 20rpx 12rpx 0; line-height: 64rpx; height: 64rpx",
			"show": true
		},
		"style": {    //上图中白色背景区的定义
			"flex": 1,
			"display": "flex",
			"flexDirection": "column",
			"alignItems": "center",
			"background": "#fff",
			"padding": "20rpx",
			"margin": "0rpx"
		}
	},
	"service": {    //上图中（8）位置的服务提供者定义
		"show": true,
		"text": "宁德市腾云网络科技有限公司",
		"style": "color: #fffb"
	},
	"icp": {    //上图中（9）位置的ICP备案信息的定义
		"show": true,
		"text": "*ICP备202200****号",
		"style": "font-size: 9rpx; color: green; margin-top: 10rpx; color: #fffa"
	},
	"bg": {    //上图中（10）位置（整体背景）的定义
		"backgroundImage": "url(./static/home.jpg),linear-gradient(0deg, #042a70, #001844, #001844)",
		"backgroundPosition": "bottom",
		"backgroundRepeat": "no-repeat",
		"backgroundSize": "100%"
	}
}

网页版图标参考：https://uniapp.dcloud.net.cn/component/uniui/uni-icons.html

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

2、次界面：

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

3、后台接口：

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

四、小程序与网页版：

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

五、私有部署：

我公司提供一个公众号（服务号）专门用于处理网页版的登录（获取openid）和订阅消息推送。

如果用户需要私有部署，可自行申请公众号（类型为服务号，非订阅号），我公司免费协助部署，部署的网站需要通过工信部ICP备案。