uniApp介绍篇-1.基础框架搭建与排坑备忘

一.uniApp介绍与注意点

1.目录结构

2.跳转页面

①uni.navigateTo 跳转到页面
②uni.switchTab 跳转tabbar
如果页面是在导航栏上,则需要使用②

3.条件编译

 - #ifdef：if defined 仅在某平台存在
 - #ifndef：if not defined 除了某平台均存在

App应用:    APP-PLUS   
微信小程序:  MP-WEIXIN

// #ifdef %PLATFORM% 
平台特有的API实现 
// #endif

4.生命周期

页面中使用onLoad onReady
组件中使用created() mouted() (指引用的组件)

5.样式布局

• 尽可能使用flex布局,减少相对布局与绝对布局的使用

6.图片引用

• App端在v3模式以前和小程序不支持在css中使用本地文件，包括本地的背景图和字体文件。需以base64方式方可使用。
• 为避免引用问题,图片.css.组件都用绝对路径使用
• 引用路径推荐使用以 ~@ 开头的绝对路径
  注意: 微信小程序不支持相对路径（真机不支持，开发工具支持）

7.html标签

• body 改用 page
• div,ul,li 改用 view
• a 改用 navigator
• span 改用 text
• img 改成 image
• input 还用，但type属性改成了confirmtype
• select 改用 picker
• iframe 改用 web-view

8.JsApi

document、cookie、window、location、navigator、localstorage
以上属性在非H5端上无法使用,如使用相关属性需调用uniApp封装的Api
例:

• uni.setStorage(key,data)
• uni.getStorage(key)
• uni.clearStorage()

9.小程序组件支持

H5,APP,小程序组件需要放在项目特殊文件夹 wxcomponents, 即项目根目录下

10.事件调用

为更好的兼容多端,一些vue事件尽量使用uni事件

• @click 使用@tap

11.文件存放

强规定:避免多端打包时,个别端出现问题

• Static 只能用来放图片
• 推荐统一在 Common 放css,js 等文件

注意点

• 当需要在 vue 组件中使用小程序组件时，注意在 pages.json 的 globalStyle 中配置
  usingComponents，而不是页面级配置。
• 所有组件与属性名都是小写，单词之间以连字符-连接
• 页面结构复杂，css样式太多的情况，使用 image 可能导致样式生效较慢，出现 “闪一下” 的情况，此时设置 image{will-change: transform} ,可优化此问题
• 有遮罩层时,禁止页面滚动,需要在上加 @touchmove.stop.prevent=“moveHandle” 方法

二.第三方插件

1.colorUi 样式库

官网: https://www.color-ui.com
简介: 纯样式库,通过添加class名设置来达到不同的显示效果
例:

<button class="cu-btn">默认</button>
<button class="cu-btn round">圆角</button>
只需添加round属性即可

2.luch-request 网络请求库

官网: https://ext.dcloud.net.cn/plugin?id=392
简介: 基于Promise开发的跨平台、项目级别的网络请求库(基于Axios做的改编)
二次封装可看这篇: https://blog.csdn.net/r657225738/article/details/110549308

3.HM-search 搜索栏

官网: https://ext.dcloud.net.cn/plugin?id=91
简介: 包含候选词下拉列表，历史搜索

4.Skeleton 骨架屏

官网: https://ext.dcloud.net.cn/plugin?id=2394
简介: 加载时显示基础结构,增强用户体验感

5.loading 全局加载动画

官网: https://ext.dcloud.net.cn/plugin?id=504
简介: 加载动画,增强交互

6.uCharts 图表库

官网: https://ext.dcloud.net.cn/plugin?id=271
简介: 全端支持图表展示,但是图表类型较少

9.自定义Tabbar凸起导航栏

官网: https://ext.dcloud.net.cn/plugin?id=1274#rating
简介: 自定义的底部导航栏