Showing
1 changed file
with
378 additions
and
12 deletions
| 1 | -## ThingsKit物联网小程序、app | |
| 2 | -## 兼容小程序、app、h5 | |
| 1 | +## 目录结构及重要文件说明 | |
| 3 | 2 | |
| 4 | -### 项目结构 | |
| 3 | +### 目录结构 | |
| 5 | 4 | |
| 5 | +#### 说明 | |
| 6 | + | |
| 7 | +此项目采用的是使用uniapp开发的微信小程序和app，目前兼容app端（android），微信小程序。 | |
| 8 | + | |
| 9 | +项目大致结构如下所示： | |
| 10 | + | |
| 11 | +```` | |
| 6 | 12 | ``` |
| 7 | -├── components // 组件 | |
| 13 | +├── components // 公共组件 | |
| 8 | 14 | ├── config |
| 9 | 15 | │ ├── baseUrl.js // 基础配置(域名、系统信息等) |
| 16 | +│ ├── amap-wx.js // 此小程序使用到的地图插件 | |
| 10 | 17 | │ ├── common.js // 通用js(小程序更新、app缓存、扫码、定位等) |
| 11 | -│ ├── componentConfig.js // app升级配置接口 | |
| 12 | -│ ├── h5Utils.js // h5通用js(包含h5公众号登录等) | |
| 13 | -│ ├── login.js // 登录js | |
| 14 | -│ ├── pay.js // 支付js | |
| 18 | +│ ├── componentConfig.js // app升级配置接口(预留，暂时没用到) | |
| 19 | +│ ├── h5Utils.js // h5通用js(包含h5公众号登录等,预留，暂时没用到) | |
| 20 | +│ ├── login.js // 登录js(预留，暂时没用到) | |
| 21 | +│ ├── pay.js // 支付js(预留，暂时没用到) | |
| 15 | 22 | │ └── request.js // 接口配置(基于uview配置) |
| 23 | +├── api // 此项目使用到的所有api统一管理 | |
| 16 | 24 | ├── pages // 项目页面 |
| 17 | 25 | │ ├── index // 首页 |
| 18 | 26 | │ └── device // 设备 |
| 19 | 27 | │ └── alert // 告警 |
| 20 | 28 | │ └── personal // 我的 |
| 29 | +├── alarmSubPage // 告警小程序分包页面 | |
| 30 | +│ ├── alarmDetailSubPage | |
| 31 | +├── deviceSubPage // 设备小程序分包页面 | |
| 32 | +│ ├── deviceDetailSubPage | |
| 33 | +├── sysNotifySubPage // 通知小程序分包页面 | |
| 34 | +│ ├── sysNotifyPage | |
| 35 | +├── publicLoginSubPage // 登录小程序分包页面 | |
| 36 | +│ ├── other // 其余页面(包括忘记密码等) | |
| 37 | +│ ├── public // 登录页面 | |
| 38 | +├── feedBackSubPage // 意见反馈小程序分包页面 | |
| 39 | +│ ├── feedback | |
| 21 | 40 | ├── plugins // 功能js |
| 22 | -├── static // 图片文件 | |
| 41 | +├── js_sdk // android判断是否有权限插件 | |
| 42 | +├── static // 静态图片文件 | |
| 23 | 43 | ├── store // vuex |
| 24 | 44 | ├── style |
| 25 | 45 | │ ├── common.scss // 公共样式文件 |
| 26 | 46 | │ └── iconfont.scss // 图标样式 |
| 27 | 47 | ├── uni_modules |
| 28 | -│ ├── fan-canvas // 绘图通用方法 | |
| 29 | -│ ├── mescroll-uni // mescroll分页 | |
| 48 | +│ ├── mescroll-uni // mescroll分页(此项目所有的分页都基于此) | |
| 30 | 49 | │ ├── uview-ui // uview2.0 |
| 31 | -│ └── zhouWei-APPUpdate // app更新升级(wgt) | |
| 50 | +│ ├── luyi-tree // 组织结构插件 | |
| 51 | +│ ├── qiun-data-charts // 图表插件 | |
| 52 | +│ ├── uni-popup // 弹出层插件 | |
| 53 | +│ ├── uni-datetime-picker // 时间日期选择插件 | |
| 32 | 54 | ├── unpackage // 项目编译后的文件 |
| 33 | 55 | ├── App.vue // 项目基础文件 |
| 34 | 56 | ├── main.js // 项目基础文件 |
| ... | ... | @@ -38,3 +60,347 @@ |
| 38 | 60 | ├── README.md // 项目介绍md |
| 39 | 61 | └── template.h5.html // h5自定义模板 |
| 40 | 62 | ``` |
| 63 | + | |
| 64 | +```` | |
| 65 | + | |
| 66 | +### 配置文件 | |
| 67 | + | |
| 68 | +#### 请求相关配置 | |
| 69 | + | |
| 70 | +请求相关配置文件在该项目结构的config文件夹内，重要的包括baseUrl.js和request.js等，其中baseUrl.js里包括对服务端的配置项， | |
| 71 | + | |
| 72 | +只需要修改这些为您自己的服务器地址即可（baseUrl 、baseDrawioUrl、baseWebSocketUrl、socketPrefix ）。 | |
| 73 | + | |
| 74 | +request.js里是基于uview封装的服务端请求文件，包括配置服务端api地址、请求超时配置，请求拦截和响应拦截等 | |
| 75 | + | |
| 76 | +##### 配置示例 | |
| 77 | + | |
| 78 | +```js | |
| 79 | +const baseUrl = "http://xxx.xxx.xxx.xxx:xxx/xxx"; | |
| 80 | +const baseDrawioUrl = "http://xxx.xxx.xxx.xxx:xxx/xxx-xxx"; | |
| 81 | +const baseWebSocketUrl = "xxx.xxx.xxx.xxx:xxx"; | |
| 82 | +const socketPrefix = "ws"; | |
| 83 | +``` | |
| 84 | + | |
| 85 | +##### 配置项说明 | |
| 86 | + | |
| 87 | +**baseUrl**：服务端 api地址 | |
| 88 | + | |
| 89 | +**baseDrawioUrl** ：组态地址 注意端口 | |
| 90 | + | |
| 91 | +**baseWebSocketUrl** ：服务端 websocket地址 | |
| 92 | + | |
| 93 | +**socketPrefix** ：websocket 注意前缀 ((https, wss),( http, ws)) | |
| 94 | + | |
| 95 | +> 注意：socketPrefix在https情况下使用wss,http使用ws | |
| 96 | + | |
| 97 | +#### 其他通用配置 | |
| 98 | + | |
| 99 | +其他通用配置文件也在项目结构的config文件夹内，主要是与其他功能配合使用，比如地图、小程序更新、app更新等。 | |
| 100 | + | |
| 101 | +1. amap-wx.js 是uniapp里使用微信小程序地图的配置，里面的配置包含高德地图控制台里申请的key值，把配置好的key值以对象形式传进去即可 | |
| 102 | + | |
| 103 | + ```js | |
| 104 | + const amapFile = require('@/config/amap-wx.js'); | |
| 105 | + import { gdMapRequiredKey } from '@/config/gdMapConfig.js'; | |
| 106 | + var myAmapFun = new amapFile.AMapWX({ key: gdMapRequiredKey }); | |
| 107 | + ``` | |
| 108 | + | |
| 109 | +2. h5Utils.js 是与h5相关的 ，里面包含浏览器端h5判断是否是微信客户端 | |
| 110 | + | |
| 111 | + ```js | |
| 112 | + // 浏览器判断是否微信 | |
| 113 | + export const isWechat = () => { | |
| 114 | + let ua = navigator.userAgent.toLowerCase(); | |
| 115 | + if (ua.match(/MicroMessenger/i) == "micromessenger") { | |
| 116 | + //console.log('是微信客户端') | |
| 117 | + return true; | |
| 118 | + }else{ | |
| 119 | + //console.log('不是微信客户端') | |
| 120 | + return false; | |
| 121 | + } | |
| 122 | + }; | |
| 123 | + ``` | |
| 124 | + | |
| 125 | + | |
| 126 | + | |
| 127 | +3. pay.js 是与支付相关的（预留，此项目没使用到，如需使用请自行完成相应逻辑编写），里面包含了小程序和app的支付，小程序支持微信、支付宝、百度、头条等 | |
| 128 | + | |
| 129 | +4. gdMapConfig.js 是高德地图的key配置项，你在高德地图控制台里申请的key值（配置你自己申请的key），请自行参考官方文档进行配置https://console.amap.com/dev/key/app | |
| 130 | + | |
| 131 | + > 注意：如您要使用地图相关功能这是必须配置的，云打包配置即可，离线打包不需要配置，离线打包有对应的配置 | |
| 132 | + | |
| 133 | +5. 高德地图key配置示例： | |
| 134 | + | |
| 135 | + ```js | |
| 136 | + const gdMapRequiredKey = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx' | |
| 137 | + ``` | |
| 138 | + | |
| 139 | +6. common.js 大部分是与app相关的，比如app计算缓存、清理缓存、获取扫码信息等，此项目大部分没有使用这些（预留，如需使用请自行完成相应逻辑编写） | |
| 140 | + | |
| 141 | + | |
| 142 | +## 开发环境搭建及源码运行 | |
| 143 | + | |
| 144 | +### 开发环境搭建 | |
| 145 | + | |
| 146 | +此项目是基于uniapp官方插件库的一个开源项目为基础进行修改搭建，使用vue2和uview2.0，开发工具使用的uniapp官方工具HBuilder。 | |
| 147 | + | |
| 148 | +uview2.0地址：[](https://www.uviewui.com/guide/demo.html) | |
| 149 | + | |
| 150 | + | |
| 151 | + | |
| 152 | +#### 注意事项 | |
| 153 | + | |
| 154 | +> 注意：HBuilder X的版本，建议采用比较稳定的版本进行开发，版本选择不当，可能会影响到您使用hbuilder进行离线打包或者不支持一些最新功能 | |
| 155 | +> | |
| 156 | +> 建议开发版本：HBuilder X 3.6.15.20221228 | |
| 157 | + | |
| 158 | +### 源码运行 | |
| 159 | + | |
| 160 | +#### 运行环境 | |
| 161 | + | |
| 162 | +##### 手机模拟器运行 | |
| 163 | + | |
| 164 | +uniapp运行到app中，有两种方式：**模拟器、真机** | |
| 165 | + | |
| 166 | +| 运行方式 | 优势 | 劣势 | | |
| 167 | +| -------- | ------------------------ | ------------------------------------------------------------ | | |
| 168 | +| 模拟器 | 方便 | 界面有时候显示模糊，好多功能缺失，比如Android模拟器不能确定电池电量水平和充电状态、模拟器不能震动，真机上才有效果等 | | |
| 169 | +| 真机 | 分辨率显示清楚，反应及时 | android版本不同，可能出现此项目不能在真机上运行，建议android版本12 | | |
| 170 | + | |
| 171 | +> 建议运行方式：真机 | |
| 172 | + | |
| 173 | +点击**运行到手机或模拟器 =>运行到Android App基座** 即可 | |
| 174 | + | |
| 175 | +> 注意：配置ADB路径设置，不同第三方的模拟器，端口不一样。 | |
| 176 | +> | |
| 177 | +> 或者您也可以下载第三方的模拟器比如mumu、夜神等，这里给出网易mumu[模拟器下载链接](https://mumu.163.com/) | |
| 178 | + | |
| 179 | +常用的模拟器和对应端口号： | |
| 180 | + | |
| 181 | + | |
| 182 | + | |
| 183 | +##### 真机运行 | |
| 184 | + | |
| 185 | +如果您要运行在真机上，只需您的数据线连上您的电脑和手机，并且手机开启开发者选项的usb调式和其他权限，点击运行android app基座即可，uniapp会自行检测您的手机并运行。 | |
| 186 | + | |
| 187 | +##### 微信模拟运行 | |
| 188 | + | |
| 189 | +运行在微信小程序上，点击**运行到小程序模拟器=>微信开发者工具** 即可，建议勾选运行时，是否压缩代码（是），这样uniapp编译好微信小程序源码体积会小很多。 | |
| 190 | + | |
| 191 | + | |
| 192 | + | |
| 193 | +> 注意：要打开微信开发者工具的端口，否则uniapp这边检测不到导致项目运行失败 | |
| 194 | + | |
| 195 | +开启微信开发者工具端口，如下图所示： | |
| 196 | + | |
| 197 | + | |
| 198 | + | |
| 199 | +打开微信小程序配置，配置appid，如下图所示： | |
| 200 | + | |
| 201 | + | |
| 202 | + | |
| 203 | +> 注意：微信小程序appid为您在官方[微信公众平台](https://mp.weixin.qq.com/)上申请的 | |
| 204 | + | |
| 205 | +## 打包部署 | |
| 206 | + | |
| 207 | +### 微信小程序端打包部署 | |
| 208 | + | |
| 209 | +uniapp都给您编译好了微信小程序源码，主要的配置是在微信开发者工具和微信公众平台上。 | |
| 210 | + | |
| 211 | +#### 微信开发者工具配置 | |
| 212 | + | |
| 213 | +需要您先运行在微信开发者工具上，勾选相关选项，如下图所示： | |
| 214 | + | |
| 215 | + | |
| 216 | + | |
| 217 | +#### 微信公众平台配置（小程序） | |
| 218 | + | |
| 219 | + | |
| 220 | + | |
| 221 | +#### 上传小程序包 | |
| 222 | + | |
| 223 | +填写您的版本号和备注，建议写详细一些，点击上即可。 | |
| 224 | + | |
| 225 | + | |
| 226 | + | |
| 227 | +> 注意：版本号和备注，可以按照官方推荐的来命名，方便您后续发版本好管理。 | |
| 228 | + | |
| 229 | +#### 版本管理 | |
| 230 | + | |
| 231 | +点击提交审核，审核是否通过以及审核时间，参考腾讯官方。 | |
| 232 | + | |
| 233 | + | |
| 234 | + | |
| 235 | +#### 成员管理 | |
| 236 | + | |
| 237 | +当官方审核通过好，要使用者体验，你要在成员管理里添加体验用户，点击**成员管理** =》**所有成员** 即可 | |
| 238 | + | |
| 239 | + | |
| 240 | + | |
| 241 | +添加体验人员即可，如图所示： | |
| 242 | + | |
| 243 | + | |
| 244 | + | |
| 245 | +点击添加，弹出如下图所示，填写体验人员微信号即可 | |
| 246 | + | |
| 247 | +> 注意：体验人员是有人数限制的 | |
| 248 | + | |
| 249 | + | |
| 250 | + | |
| 251 | +点击体验版，会弹出二维码，发给您身边的同事或朋友进行扫码体验即可，之后发布版本操作也是一样。 | |
| 252 | + | |
| 253 | + | |
| 254 | + | |
| 255 | +可以配置项目启动路径 | |
| 256 | + | |
| 257 | +> 注意：可以修改路径，项目启动路径 | |
| 258 | + | |
| 259 | + | |
| 260 | + | |
| 261 | + | |
| 262 | + | |
| 263 | +### app端（android）打包部署 | |
| 264 | + | |
| 265 | +uniapp打包成app，有两种方式：**云打包**、**离线打包** | |
| 266 | + | |
| 267 | +| 打包方式 | 优势 | 劣势 | | |
| 268 | +| -------- | ------------------------------------------------------------ | ------------------------------------------------------------ | | |
| 269 | +| 云打包 | 在HBuilderX中配置好各种参数后（如第三方SDK参数等），云端打包会自动完成配置 | 1.打包要排队，2.打包次数有限制 | | |
| 270 | +| 离线打包 | 无限制打包次数，打包时间快 | 1.离线打包支持混淆功能，只对vue文件，nvue文件不起作用，2.SDK配置较繁琐 | | |
| 271 | + | |
| 272 | +> 建议打包方式：云打包 | |
| 273 | + | |
| 274 | +#### 云打包 | |
| 275 | + | |
| 276 | +android端这边您可以采用uniapp官方自带云打包 | |
| 277 | + | |
| 278 | +> 注意：你要先注册登录，地址是[开发者中心](https://dev.dcloud.net.cn/pages/app/detail/info) | |
| 279 | + | |
| 280 | +找到您的项目 | |
| 281 | + | |
| 282 | +> 注意：可以直接输入应用名称搜索 | |
| 283 | + | |
| 284 | + | |
| 285 | + | |
| 286 | +点击对应应用即可 | |
| 287 | + | |
| 288 | + | |
| 289 | + | |
| 290 | +点开**我的应用** =》**Android云端证书**，android云端证书需要您自行配置，请参考官方文档[Android平台云端打包证书使用说明 - DCloud问答](https://ask.dcloud.net.cn/article/35985#server)。 | |
| 291 | + | |
| 292 | +配置好后，点击**原生App-云打包** | |
| 293 | + | |
| 294 | + | |
| 295 | + | |
| 296 | +弹出如下配置，配置**Android包名**和勾选**使用云端证书**和勾选**快速安心打包**即可，其余配置根据您自己项目需要进行配置。 | |
| 297 | + | |
| 298 | + | |
| 299 | + | |
| 300 | +> 注意：android包名要注意去掉下划线，采用这种格式uni.(这里填写appid去掉下划线) | |
| 301 | +> | |
| 302 | +>  | |
| 303 | + | |
| 304 | +这些都配置好后，点击打包即可。 | |
| 305 | + | |
| 306 | +> 注意： 云打包是有打包次数限制的，不是无数次的，1天只能打包【5次】，第六次需要收费(大概2￥一次)。 | |
| 307 | +> | |
| 308 | +> 打包时间长度不受控，高峰期排队时长可能需要 【几个小时】以上 | |
| 309 | + | |
| 310 | +打包后的位置在 | |
| 311 | + | |
| 312 | + | |
| 313 | + | |
| 314 | +发给使用者进行体验即可。 | |
| 315 | + | |
| 316 | +#### 离线打包 | |
| 317 | + | |
| 318 | +离线打包需要您安装android studio工具和官方sdk | |
| 319 | + | |
| 320 | + | |
| 321 | + | |
| 322 | +离线打包官方是有教程的，很仔细。我也是按照官方文档来配置的，请自行查阅，按照官方步骤来操作即可。 | |
| 323 | + | |
| 324 | +这些官方都是提供的，下载即可，注意您的hbuilder版本,给出了官方链接，[参考官方文档进行配置即可](https://nativesupport.dcloud.net.cn/AppDocs/usesdk/android.html#) | |
| 325 | + | |
| 326 | +> 注意：要下载对应版本的app离线sdk，3.1.10版本时要申请appkey的，官方有文档，[请自行查阅]( | |
| 327 | + | |
| 328 | +https://nativesupport.dcloud.net.cn/AppDocs/usesdk/appkey.html#) | |
| 329 | + | |
| 330 | +这是官方的目录。您使用这个即可，用android studio打开即可。 | |
| 331 | + | |
| 332 | + | |
| 333 | + | |
| 334 | +这里您要点击**原生App--本地打包**=》**生成本地打包App资源** | |
| 335 | + | |
| 336 | + | |
| 337 | + | |
| 338 | +点击原生app本地打包这个选项，生成本地打包资源，生成本地打包资源后复制给android studio那边的目录下即可 | |
| 339 | + | |
| 340 | + | |
| 341 | + | |
| 342 | +> 注意：把生成好的资源全部复制到app目录下即可 | |
| 343 | + | |
| 344 | + | |
| 345 | + | |
| 346 | +修改打包后的app图标和启动图 | |
| 347 | + | |
| 348 | + | |
| 349 | + | |
| 350 | +图标名字命名为icon.png，启动图命名为splash.png，android studio会自动寻找这两个图片地址。 | |
| 351 | + | |
| 352 | +如果您的uniapp开发的app需要地图、需要使用摄像头、录音、视频、webview等，那么您需要按照官方文档来配置，官方上是有针对离线打包如何把这些模板集成到项目里的，给出了官方链接，请自行查阅，[比如定位](https://nativesupport.dcloud.net.cn/AppDocs/usemodule/androidModuleConfig/geolocation.html) | |
| 353 | + | |
| 354 | +您要把定位相关的jar包或者aar包复制到libs目录下即可，对应的包官方都有，您自行复制即可。 | |
| 355 | + | |
| 356 | + | |
| 357 | + | |
| 358 | +然后您按照官方文档配置即可，其他模块也是一样的配置，官方都有，直接复制粘贴到项目即可。 | |
| 359 | + | |
| 360 | +还需要配置android签名，给出了官方链接，您自己**配置的key和password**，请您自己要记得，不要乱填写，下面是要是使用的，如何配置，请自行查阅 [签名](https://ask.dcloud.net.cn/article/35777) | |
| 361 | + | |
| 362 | +> 注意：生成的签名信息不要乱填写，方便记忆，下面是要使用的。 | |
| 363 | + | |
| 364 | +安装官方文档操作即可。保存到项目目录下 | |
| 365 | + | |
| 366 | + | |
| 367 | + | |
| 368 | +命名按照您自己喜欢的方式命名即可，打开build.gradle添加如下符合gradle格式的代码 | |
| 369 | + | |
| 370 | +```groovy | |
| 371 | +signingConfigs { | |
| 372 | + config { | |
| 373 | + keyAlias 'yunteng' | |
| 374 | + keyPassword 'yunteng' | |
| 375 | + storeFile file('yunteng.keystore') | |
| 376 | + storePassword 'yunteng' | |
| 377 | + v1SigningEnabled true | |
| 378 | + v2SigningEnabled true | |
| 379 | + } | |
| 380 | + } | |
| 381 | +``` | |
| 382 | + | |
| 383 | + | |
| 384 | + | |
| 385 | +还是打开build.gradle文件 | |
| 386 | + | |
| 387 | +添加如下代码，这是打包后生成的文件名字，比如ThingsKit-V1.0.0.apk | |
| 388 | + | |
| 389 | +``` | |
| 390 | +android.applicationVariants.all { | |
| 391 | + variant -> | |
| 392 | + variant.outputs.all { | |
| 393 | + outputFileName = "ThingsKit-V1.0.0.apk" | |
| 394 | + } | |
| 395 | + } | |
| 396 | +``` | |
| 397 | + | |
| 398 | + | |
| 399 | + | |
| 400 | +配置好了后点击**Build Bundle(s) / APK(s)**=》**Build APK(s)**即可 | |
| 401 | + | |
| 402 | + | |
| 403 | + | |
| 404 | +生成后的文件在这个目录下，上传到您自己的服务器上或者直接发给使用者，让使用者使用即可，如果您需要上线到应用商店，请自行查询官方文档和各大应用商店的关于上线的要求即可，[这里给出一个参考链接](https://zhuanlan.zhihu.com/p/389302743) | |
| 405 | + | |
| 406 | + | |
| \ No newline at end of file | ... | ... |