# WanAndroid-uniapp

**Repository Path**: sweet2o09_admin/WanAndroid-uniapp

## Basic Information

- **Project Name**: WanAndroid-uniapp
- **Description**: 玩安卓-UniApp版
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-08-15
- **Last Updated**: 2021-08-18

## Categories & Tags

**Categories**: Uncategorized

**Tags**: uni-app

## README

>天商联盟项目说明
## Uni-app结构说明

目录| 说明| 备注
----|------|----
common|存放一些公共方法与stytle目录| -
components|存在一些公共组件目录|-
packages|存放分包业务 | -
pages|存放首页所需的业务界面目录 | -                        
platforms|存放各平台专用页面目录 | platforms/h5(存放h5专用界面目录)
static|存放图片，视频等静态资源目录|-
App.vue|配置App全局样式以及监听生命周期|-
main.js|Vue初始化入口文件|-
manifest.json|配置名称、appid、logo、版本等打包信息|-
pages.json|配置页面路由、导航条、选项卡等页面类信息|-
uni.scss|存放颜色与尺寸常量|-
uni_modules|存放uniApp插件市场上的模块|-
uni_modules|存放uniApp插件市场上的JsSdk|-

**注意：**
* `static` 目录下的 JS 文件不会被编译，如果里面有 es6 的代码，不经过转换直接运行，在手机设备上会报错。
* `css、less/scss` 等资源同样不要放在 static 目录下，建议这些公用的资源放在 `common` 目录下。
* HbuilderX 1.9.0+ 支持在根目录创建 `ext.json`与`sitemap.json` 文件。
* `static`目录下除了存放一些必须使用的本地图片,其他图片在开发后都需要替换成网络图片或者是iconfont,避免小程序打包失败**(责任人:张巧眉)**
* 状态栏高度:iphone 20,iphoneX 44
* 安全区域高度:iphoneX 34
***

## 规范
1.  采用26个英文字母，命名简洁明确，多个单词用`-`分隔。
2.  全部小写命名，禁止出现大写。**注意:公共组件需要在组件名加上comp-作为前缀以便于和单页面组件进行区分。**
3.  本地图片统一存放在`static`目录下各自业务分包目录下,并且命名上需要加上分包名,例如:`ic_chat_add.png`
3.  在`main.js`中引入的全局方法或者工具类，在使用`Vue.prototype`抛出的时候需要加`$`，例如:`Vue.prototype.$tslmConfig = tslmConfig`。
	这样做是为了在调用的时候跟当前页面的方法进行一个区分。
4.  引入的三方UI库如果适用`uni_modules`模块化规范的话需存在方`uni_modules`目录下,最好是直接从插件市场导入,这样可以减少配置
5.  引入的三方JS库可以存放在`js_sdk`目录下,如果是较复杂的库,可以创建一个`readme.md`文件进行说明
6.  本地封装了基础UI库`tslm-style.scss`,如需扩展,可以在里面添加,理论上不建议封装比较复杂的UI样式,因为UI样式经常会变,封装后实用性不大
***

## 小程序分包注意事项
 * 整个小程序所有分包大小不超过 8M
 * 单个分包/主包大小不能超过 2M**（packages下的每个目录就是一个分包）**
 * 分包后各个分包之间是独立的,无法调用除自己与主包外的资源。比如`packages/user`是无法使用`packages/subject`的组件与JS文件的，但可以使用`common`以及`components`下的。**所以开发过程中，如果发现有组件或者js文件会被跨包调用的话，需要考虑是否把相关组件或者js文件放到主包**。
 * 静态文件：分包下支持 static 等静态资源拷贝，即分包目录内放置的静态资源不会被打包到主包中，也不可在主包中使用
 * js文件：当某个 js 仅被一个分包引用时，该 js 会被打包到该分包内，否则仍打到主包（即被主包引用，或被超过 1 个分包引用）
 * 自定义组件：若某个自定义组件仅被一个分包引用时，且未放入到分包内，编译时会输出提示信息
 * [vendorjs过大的处理方式](https://uniapp.dcloud.io/matter?id=vendorjs%e8%bf%87%e5%a4%a7%e7%9a%84%e5%a4%84%e7%90%86%e6%96%b9%e5%bc%8f)
***

## UniPush
   * [5+App使用UniPush发送消息](https://ask.dcloud.net.cn/article/36622)
   * [个推android和ios的坑](https://ask.dcloud.net.cn/article/1067)
   * [UniPush使用指南](https://ask.dcloud.net.cn/article/35622)
***

## 公共封装说明
1.  `common/tslm-user.js`用户数据:用于保存和处理用户相关数据,token,登录状态等信息,已经挂在到全局,vue中直接使用`this.tslmUser.xx`调用
2.  `common/tslm-config.js`项目配置:获取并保存手机,项目,小程序等相关信息,已经挂在到全局,vue中直接使用`this.tslmConfig.xx`调用
3.  `js_sdk/wa-permission/permission.js`权限校验:处理一些权限事宜
4.  `ext.json`小程序推送配置:小程序推送配置文件,当推送小程序的时候,会动态替换里面的相关参数
5.  `common/tslm-store.js`历史记录缓存工具


## 如何查看线上版本

## 关于布局的一些问题
1.	状态栏高度statusBarHeight:
	uni-app有提供状态栏高度常量,可以通过`height: var(--status-bar-height)`获得,但是在iOS手机的小程序环境下发现取值有误
	所以这里建议大家使用`uni.getSystemInfoSync().statusBarHeight`获取

2.	布局高度样式100vh:等同于`uni.getSystemInfoSync().windowHeight`
	当使用原生导航栏的时候:100vh = 手机屏幕高度-原生导航栏-状态栏高度-tabBar高度(如果有tabBar的话)
	当隐藏原生导航栏的时候:100vh = 手机屏幕高度-tabBar高度(如果有tabBar的话)

3.	iOS的安全区域safeArea:
	我们项目在app端使用的是`manifest.json`配置全局安全区域,因此在app端是可以不需要考虑安全区域问题的,但是小程序下一些底部弹窗就要特殊处理了
	uni-app有提供安全区域高度常量,可以通过`height: var(--safe-area-inset-bottom)`获得
	在iOS小程序环境下,底部弹窗布局需要注意安全区域问题,我们可以设置`padding-bottom: 0;padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);`

4.	`var(--status-bar-height)`,`constant(safe-area-inset-bottom)`,`env(safe-area-inset-bottom)`,`calc(100vh - var(--status-bar-height))`
	
5.	首页头部背景图片`background`的使用，需等图片到来再渲染 `v-if="headBgPic" :style="{ background: headBgPic}`
	

## uniModules
 * [uni_modules](https://uniapp.dcloud.io/uni_modules?id=uni_modules)
 * `uni_modules`是uni-app的插件模块化规范（HBuilderX 3.1.0+支持）
	通常是对一组jsSdk、组件、页面、uniCloud云函数、公共模块等的封装，用于嵌入到uni-app项目中使用，也支持直接封装为项目模板。
	相对于普通的插件，
 * `uni_modules`插件拥有更强的独立性，拥有独立的目录结构，可以更加方便的发布，更新，卸载
	（HBuilderX 3.1.0+对uni_modules插件提供了右键菜单，支持发布，更新，安装依赖等）
 * `uni_modules`有何优势？
	 支持在HBuilderX里直接发布、更新、删除
	 支持依赖（在package.json中配置）
	 插件文件位置统一，不会造成下载一个插件，不知道给工程下多少个目录写入了多少个文件。删除插件时也可以一点删除
***

## Mixins （混入）
 * Mixins是一种分发Vue组件中可复用功能的非常灵活的一种方式
 * 什么时候使用Mixins:页面的风格不用，但是执行的方法和需要的数据类似
 * 混合对于封装一小段想要复用的代码来讲是有用的。
 * 混合很好，它不需要传递状态，但是这种模式当然也可能会被滥用。所以我们还是需要仔细斟酌使用
 * [Vue 之 Mixins （混入）](https://segmentfault.com/a/1190000015698391?utm_source=tag-newest)
 * [混入— Vue.js](https://cn.vuejs.org/v2/guide/mixins.html)
***


## 技术文献
   * [网页适配 iPhoneX，就是这么简单](https://blog.csdn.net/qq_42354773/article/details/81018615)
   * [uni-app 全面屏、刘海屏适配（iphoneX适配）及安全区设置](https://ask.dcloud.net.cn/article/35564)
   * [小程序包括uniapp针对安全区域env(safe-area-inset-*)兼容](https://ask.dcloud.net.cn/article/36494)
   * [uni-app 生命周期](https://uniapp.dcloud.io/collocation/frame/lifecycle?id=%e5%ba%94%e7%94%a8%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f)
   * [uni-app 提供内置 CSS 变量](https://uniapp.dcloud.io/frame?id=css%e5%8f%98%e9%87%8f)
   * [uni-app 高效开发技巧](https://uniapp.dcloud.io/snippet)
   * [uni-app 性能优化建议](https://uniapp.dcloud.io/performance)
   * [uni-app NavigationBar与TabBar固定值](https://uniapp.dcloud.io/frame?id=%e5%9b%ba%e5%ae%9a%e5%80%bc)
   * [ES6的变量声明](https://www.jianshu.com/p/f56af9d7abc6)
   * [ES6中常用的10个新特性讲解](https://www.jianshu.com/p/ac1787f6c50f)
   * [ES6常用方法解析](https://www.jianshu.com/p/13959879c85d)
   * [CSS选取第几个标签元素](https://blog.csdn.net/longgeaisisi/article/details/78154169)
   * [height和line-height的区别](https://blog.csdn.net/cwh0908/article/details/89408297)
   * [HBuilder/HBuilderX真机运行、手机运行、真机联调常见问题](https://ask.dcloud.net.cn/article/97)
   * [uni-app 全局变量的几种实现方式](https://ask.dcloud.net.cn/article/35021)
   * [UniPush使用指南](https://ask.dcloud.net.cn/article/35622)
   * [5+App使用UniPush发送消息，App在线、离线均能收到消息推送，并在通知栏进行提醒，苹果、华为、小米手机均测试通过](https://ask.dcloud.net.cn/article/36622)
   * [uni-app: 从运行原理上面解决性能优化问题](http://www.javanx.cn/20191022/uni-app/)
   * [如何评价uni-app](https://www.zhihu.com/question/309490398?sort=created)
***

>欢迎大家帮忙补充。