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

基础框架搭建与排坑备忘

  • 一.uniApp介绍与注意点
    • 1.目录结构
    • 2.跳转页面
    • 3.条件编译
    • 4.生命周期
    • 5.样式布局
    • 6.图片引用
    • 7.html标签
    • 8.JsApi
    • 9.小程序组件支持
    • 10.事件调用
    • 11.文件存放
    • 注意点
  • 二.第三方插件
    • 1.colorUi 样式库
    • 2.luch-request 网络请求库
    • 3.HM-search 搜索栏
    • 4.Skeleton 骨架屏
    • 5.loading 全局加载动画
    • 6.uCharts 图表库
    • 9.自定义Tabbar凸起导航栏

一.uniApp介绍与注意点

1.目录结构

uniApp介绍篇-1.基础框架搭建与排坑备忘_第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
简介: 自定义的底部导航栏
uniApp介绍篇-1.基础框架搭建与排坑备忘_第2张图片

你可能感兴趣的:(Uniapp,uni-app,javascript,微信小程序)