数字乡村小程序交接文档

• 项目架构及目录结构描述
  • ❗❗❗此项目大量应用ES6，和组件化。❗❗❗
  • common 公共通用组件、sdk、静态资源、状态管理、工具包等等
    • components 项目中所有公用组件，命名规则为 m-xxxxx，全局默认引入需要在app.sjon中注册
    • config 项目的配置文件，内包含多个子配置，每个配置对应了一个项目，通过export default导出
      • appid 这个值在项目中未用到，记录用
      • service 服务端URL地址
      • name 项目的名称，用于部分UI个性化展示项目的名字
      • address 项目的地区，用于部分UI个性化展示项目的地点
      • aMapKey 高德服务的key，此项目仅用到了经纬度转地点名
      • uploadService 上传文件的服务端地址，和service是分离的
      • icon项目的logo
      • subscribeIds 订阅消息的ids，是数组，可以同时订阅多个，发起订阅的按钮在个人中心的最底部，通过判断是否已全部订阅来显示隐藏按钮
      • webBaseUrl h5功能模块的域名地址，如门牌安装那和户联治理扫门牌顶部的数据统计，点开进入大屏的预览
      • location在获取不到GPS定位的时候默认使用的位置，一般为该地区的政府
    • lottie 带有动画且可控制运行和暂停的动画资源
      • 插件地址：https://github.com/wechat-miniprogram/lottie-miniprogram
      • 资源下载地址https://lottiefiles.com/，有时候需要梯子才能进去，下载下来的是个json，后缀名要改成.js，且要module.exports导出才可使用
      • 封装的组件为 m-lottie
      • 使用方法
        • import 动画资源 form '/common/logtie/xxxx.js'
        • <m-lottie prop_lottie="动画资源" />
    • sdk 项目中所用到的SDK
      • amap-wx.js 高德服务
      • tim-upload-plugin.js tim通讯的上传依赖插件
      • tim-wx-sdk.js tim即时通讯插件
      • tsignaling-wx.js trtc视频通话，它依赖tim-wx-sdk
      • trtc 视频通讯的组件为 /common/components/TRTCCalling
      • ❗❗❗ 组件本身代码有问题，最新版有BUG，故我用了老版本，而且还要自己修改部分代码。💩💩
      • 有条件的话，自己写一套通讯吧，用别人的不好。💩💩💩
    • static 静态资源目录
      • 😓为了极限化减少小程序包体积，所有用到的资源全放七牛云了，这是一个坑，💩巨坑💩，万一换云怎么办，不想续费七牛云了咋办，假如有了这个想法，就及时把资源链接下载下来，放到项目中吧，通过分包的形式按需加载。😓
    • stores MobX 绑定辅助库顾名思义，状态管理，采用模块的方式
      • 功能说明：类似于vue里的vuex，提供响应式状态
      • 插件地址：https://github.com/wechat-miniprogram/mobx-miniprogram-bindings
      • ❗❗❗得学，原生小程序里只有这个响应式状态
      • 例子可翻翻代码参考下，使用还是很简单的。
    • utils 项目中一些可复用的工具函数
    • wxs 由于小程序里wxml中无法执行js，故wxs解决这个问题，能在controller层解决的就尽量在controller层。
• 其他文件描述
  • app.js
    • 利用MobX，在小程序启动时，异步初始化一些数据，及小程序检查更新
  • app.json
    • subpackages 分包
    • preloadRule 分包预加载，避免常用的功能loading，体验不好
  • useExtendedLib
    • 引入一些小程序内置的依赖库，如weUi组件库
  • app.wxss
    • 引入vant的样式依赖
    • 覆盖vant一些部分样式
  • package.json
    • npm依赖管理，新起的小程序是要手动卡开启npm的，很简单，小程序文档上表达不明确，可在百度自行搜索
    • "widget-ui": "^1.0.2" 这个依赖，仅仅是为了给 wxml-to-canvas这个组件用的，它有BUG，所以手动替换它需要的依赖
    • "miniprogram-computed": "^4.2.1" 让小程序也能使用vue的computed
      • 文档地址：https://github.com/wechat-miniprogram/computed
• 通用组件描述
  • m-auth 认证
  • m-bottomSticky 固定直页面底部，且预留了占位
  • m-callPhone 接收电话号码prop，一键打电话
  • m-callVideo 视频通话，使用方式
    • this.selectComponent("wxml中该组件的id") 获取到实例call(对方的用户id) 即可发起通话
  • m-checkbox 通过字典的动态表单的多选组
  • m-dict 字典组件，可选择选项，可回显字典name
  • m-footer 作用就是一些页面底部放置一个公司的脚注
  • m-form 这个小程序的核心-动态表单，通过对象，动态渲染类型组件，最终返回一个对象。
  • m-getLocation 一键打开微信内置的地图，并选择位置 ，emit一个包含地址和经纬度的对象。
  • m-getPhone 一键获取手机号，emit一个事件，包含手机号。
  • m-goLogin 跳转到登录页面
  • m-loading 分页列表底部的加载状态组件
  • m-lottie lottie动画组件
  • m-marketDetailTemplate 这个组件应该放在户联治理分包里，但是，在其他包里，也要用到，所以我就放到全局里了，仅仅是一个详情模板。
  • m-marketList 同上
  • m-news 首页的最新资讯模块，在户联治理内也用到了，所以放到全局组件中。
  • m-rich 富文本渲染组件，这个别改，github地址我找不到了。uview这个框架中的富文本渲染也是用的这个作者的组件。
  • m-steps 这是一个树，步骤。
  • m-title 一个比较好看的title组件
  • m-upload 可上传任意类型文件的上传组件，放置在m-form中，也可独立使用。
  • m-waterMark 简单粗暴款水印只需要放在页面的最顶部
  • TRTCCalling TRTC视频通讯的官方组件，请使用m-callVideo组件
  • wxml-to-canvas wxml转canvs，canvs转图片
    • 插件地址：https://github.com/wechat-miniprogram/wxml-to-canvas
    • ❗❗❗请勿试着更新，这个插件有BUG，但我已经修改了。
• pages 视图层，统一模块化拆分

政法委小程序

和数字乡村几乎是一样的，只是没有多项目

大屏

• ❗❗❗后面你可以考虑用mock.js模拟下数据，搞个开关做线上和线下模式，不然太依赖后端了，没有数据太丑了，开始我也没想到
• ❗❗❗改代码在大屏总源码中改，然后分发给其他几个项目。唯一要改的是**.env**
• 项目架构及目录结构描述
  • vue3+vite
  • 使用到的插件描述
    • "be-full": "^0.0.5" 一个可以将任意元素缩放全屏的插件 地址：https://github.com/ZSX-JOJO/be-full
    • 其余基本上都是常见的
  • 目录描述
    • assets 静态资源
      • audios 音频文件，如报警的时候播放的警报声音
      • css 全局公共css
      • fonts 字体文件
      • images 图片资源
      • json 目前只存放了echarts地图所用到的地理范围掩膜json
    • components 通用组件，统一在install.js挂载到vue
      • m-Container2/3 包裹模块的框框
      • m-layout 大屏各个页面的左中右布局
      • m-map 公用的地图，包装的是echart map
      • m-scaleContainer 大屏缩放适配组件，包裹在最顶层
    • directives 自定义指令
    • mixins 存放类似于vue2的混入，在vue3中叫hooks
    • install 统一管理插件的安装
    • pages 视图
      • components 这是大屏首页的头部和底部
      • index 大屏所有模块
      • zoufang-h5 大屏-走访的h5版
    • router 路由，这是vue3配套的组合式路由，不是vue2
    • store vuex状态管理，分为模块
    • utils 公用工具
    • .env 项目的根配置
      • VITE_APPNAME 项目的名称，个别地方显示用的
      • VITE_HEADER 大屏顶部的标题 例如白泥镇“X”联网大数据中心 这个X是用来替换的
      • VITE_ADDRESS 这个名字是用来给高德地图根据地理名字查掩膜数据
      • VITE_INTRODUCE 总览的简介
      • VITE_PHOTO 总览的照片
      • VITE_SERVICE_URL 服务端地址
      • VITE_LOGO 大屏的logo
      • VITE_LOCATION 该项目地区的默认中心点
      • VITE_MAPJSON echart地图的掩膜json，名字就是assets/json/里的具体json名字，在/install/echarts.js里配置
      • VITE_SECOND 轮询的事件间隔
      • VITE_NODEID 户联治理大屏模块的根社区的id
      • VITE_ZZZX_ALIAS 综治中心，获取接警信息的别名。这个别名在后台添加。

小程序跳转Schema

很普通的一个html，就几条方法，代码在dist里

白坭镇H5

用uniapp开发的一个静态h5，也很简单

门牌安装h5

• 项目架构及目录结构描述
  • vue3 + vite
  • vant vue3移动端版
  • jweixin-1.3.2.js 微信小程序的工具包
  • "@amap/amap-jsapi-loader": "^1.0.1" 高德地图sdk vue版
• 极小型vue项目，没有什么难度