这是我参与8月更文挑战的第5天，活动详情查看：8月更文挑战

基础框架搭建与排坑备忘

一.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 样式库

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

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

2.luch-request 网络请求库

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

3.HM-search 搜索栏

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

4.Skeleton 骨架屏

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

5.loading 全局加载动画

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

6.uCharts 图表库

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

9.自定义Tabbar凸起导航栏

官网: ext.dcloud.net.cn/plugin?id=1… 简介: 自定义的底部导航栏在这里插入图片描述

uniapp基础框架搭建与排坑备忘