持续更新uni-app学习笔记

Posted 2022-02-12 Rudon滨海渔村

优先级

1）官方手册优先

uni-app官网uni-app：一个使用 Vue.js 开发跨平台应用的前端框架https://uniapp.dcloud.io/README2）面向效果找组件

https://hellouniapp.dcloud.net.cn/pages/component/view/viewhttps://hellouniapp.dcloud.net.cn/pages/component/view/view

3）v-for等指令手册（vue手册，因为uni-app基于vue）

指令 | Vue.jsVue.js - The 渐进式 javascript 框架https://v3.cn.vuejs.org/api/directives.html

烂笔头

...乱序笔记...

• 尺寸单位 屏幕宽度 750rpx宽为屏幕基准（设计图应为750px）
   

• 安装uni-ui增强组件
  https://ext.dcloud.net.cn/plugin?id=55
  点击“使用 HBuilderX 导入插件”
  装完即可使用，无需引入和配置
   

• 资源文件加载规范
  【注意】js文件路径不能以斜杠开头
  <image src="@/static/logo.png"></image>
  import add from '@/common/add.js'
  @import url('@/common/uni.css');
   

• uni-app项目自动换行（项目显示效果）
  编辑/App.vue的style部分
  view word-break: break-all;
   

• uni-app前端操作云数据库
  https://www.bilibili.com/video/BV17p4y1a71x?p=1
  25分钟入门
   

• HBuilderX代码自动换行（编辑器代码自动换行）
  菜单“工具” > 设置 > 编辑器配置 > 自动换行
   

• HBuilderX代码自动保存
  编辑后自动保存,自动刷新预览
  https://ext.dcloud.net.cn/plugin?id=5892
  点击“使用 HBuilderX 导入插件”
  菜单“工具” > 设置 > Settings.json > 插件配置 > Auto Saver > 勾选“编辑时自动保存”
   

• uni-app开发中vue和nvue的区别
  uni-app开发中vue和nvue的区别 - 翼速应用uni-app提供了两种渲染方式：webview渲染和原生渲染，分别对应两种类型的页面：vue和nvue。二者在开发时存在应用差异，也各有优势，可根据项目需要使用。https://www.ysext.com/articleinfo/289.htmluni-app 入门之 nvue (weex) 爬坑记 - 啤酒煮鸡蛋 - 博客园前言 uni app 是 DCloud 出品的新一代跨端框架，可以说是目前跨端数最多的框架之一了，目前支持发布到：App（android/ios）、H5、小程序（微信小程序/支付宝小程序/百度小程序/https://www.cnblogs.com/hl1223/p/10384307.html

• uni-app优秀商城示例
  代码规范易入门，建议装上看看目录结构
  GitHub - liuming9157/mzshopContribute to liuming9157/mzshop development by creating an account on GitHub.https://github.com/liuming9157/mzshop

• HBuilderX快捷键
  
  ctrl+K 格式化
  ctrl+D 删整行
  ctrl+C 复制整行（如果没有选中内容的话）
  ctrl+X 剪切整行（如果没有选中内容的话）
  ctrl+/ 注释、反注释
   

• HBuilder自定义代码块
  自动补全 / 代码提醒 / 自定义组件 / 自定义命令
  参考自 https://blog.csdn.net/zhengzizhi/article/details/105020140
  【目标1】
  敲view+回车输出 <view></view>
  菜单栏 > 工具 > 代码块设置 > Vue代码块
  在vue.json右边的“自定义代码块”中输入：

  "view": 
      "prefix": "view",
      "body": [
          "<view>",
          "\\t$0",
          "</view>"
      ]
  

   OK! 在template中键入view即可看到第一个提示项view，回车，Enjoy！
  
  【目标2】
  敲clog或者consolelog+回车输出 console.log("");
  菜单栏 > 工具 > 代码块设置 > javascript代码块
  在javascript.json右边的“自定义代码块”中输入：

  "consolelog": 
      "prefix": "consolelog",
      "body": [
          "console.log(\\"$0\\");"
      ]
  

   OK! 在script中键入clog或者consolelog即可看到第一个提示项consolelog，回车
  实际上HBuilder自带了clog这个快捷键命令

• uni-app常用指令
  v-bind

  <image v-bind:src="imgUrl"></image>
  <!-- 缩写 -->
  <image :src="imgUrl"></image>

  v-on

  <view v-on:click="doSomething">点击</view>
  <!-- 缩写 -->
  <view @click="doSomething">点击</view>

  v-if

  <view v-if="seen">现在你看到我了</view>
  <view v-else>你看不到我了</view>

  
  v-if 和 v-show 区别
  
  v-for

  <view v - for="(item, index) in items">
    index   -   item.message  
  </view>

  除了数组，也可以遍历一个对象的所有属性
   

• uni-app 点击按钮回到顶部
  uni-app 点击按钮回到顶部_杨葱儿-CSDN博客_uniapp点击回到顶部参考官方文档：https://uniapp.dcloud.io/api/ui/scroll?id=pagescrollto<button type="primary" @click="tapscroll">回到顶部</button>tapscroll:function()uni.pageScrollTo(scrollTop: 0,duration: 300)https://blog.csdn.net/weixin_44285250/article/details/106801622

• UNI-APP 官方视频教程
  https://uniapp.dcloud.io/resource
   

• text换行符 / 传统br换行
  方法1）不用text组件，直接用行级标签view：

  <view>文字1111</view>
  <view>文字2222</view>

  方法2）
  文字中插入view空标签：

  <text>亲爱的XX老师，</text>
  <view></view>
  <text>多年未见，甚是想念...</text>

• uni-app 成功提示 / 错误提示 / alert / showtoast

  uni.showToast(
      title: 'message'
  );

• 指令v-model="xx"数据双向绑定

  <input v-model="message" placeholder="edit me"/>

• 通过变量动态控制class是否显示

  <template>
      <view>
          <view ：class="[isActive ? activeClass ： '', errorClass]"></view>
  
          <view class="static" :class=" 'active': isActive, 'text-danger': hasError ">222</view>
  
          <view class="container" :class="computedClassStr"></view>
          <view class="container" :class="active: isActive"></view>
      </view>
  </template>
  <script>
        export default 
            data () 
                return 
                    isActive: true
                
            ,
            computed: 
                computedClassStr () 
                    return this.isActive ? 'active' : ''
                ,
                computedClassObject () 
                    return  active: this.isActive 
                
            
        
  </script>

  more in 数组语法
   

• 原生事件对象$event
  包括例如click时间、点击时鼠标x、y位置等

  event: "type":"click","timeStamp":18320.499999997992,"detail":"x":317,"y":37,"target":"id":"","offsetLeft":0,"offsetTop":0,"dataset":,"x":317,"y":37,"currentTarget":"id":"","offsetLeft":0,"offsetTop":0,"dataset":.....

• 事件修饰符 and  事件映射表

  @touchmove.stop.prevent="moveAct"
  @click.stop="doThis"

• 计算属性computed
  原来的表述式判断：
  author.books.length > 0 ? 'Yes'：'No'
  使用类似中间件的computed方法：

  export default 
      data() 
          return 
              author: 
                  name: 'John Doe',
                  books: [
                      'Vue 2 - Advanced Guide',
                      'Vue 3 - Basic Guide',
                      'Vue 4 - The Mystery'
                  ]
              
          
      ,
      computed: 
          // 计算属性的 getter
          publishedBooksMessage() 
              return this.author.books.length > 0 ? 'Yes' : 'No'
          
      
  

• 侦听器watch
  选项：immediate
   

• 跨端兼容 | 条件编译
  1.注释方式的不同
  js使用 // 注释
  css 使用 /* 注释 */
  vue/nvue 模板里使用 <!-- 注释 -->
  2.不同平台判断

  #ifdef H5 || MP-WEIXIN
  H5或者微信小程序上的专用代码
  #endif
  
  <!-- #ifndef APP-PLUS -->
  除了App平台以外的专用代码
  <!-- #endif -->

• uni-app 跳转页面指定位置、锚点跳转
  1）【官方方法】 - 不推荐，要写固定height
  scroll-view
  2）【先算DOM高度，再scroll指定高度】
  uni-app 跳转到另一个页面的指定位置 - 简书第一步，给指定页面想要跳转的位置加一个class第二步，点击跳转时，给页面传值 第三步，跳转到的页面接收 第四步，获取指定class的居上高度，并滚动https://www.jianshu.com/p/bdd0cf599a8b

• uni-app 目录结构

  ┌─uniCloud              云空间目录，阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb（详见uniCloud）
  │─components            符合vue组件规范的uni-app组件目录
  │  └─comp-a.vue         可复用的a组件
  ├─hybrid                App端存放本地html文件的目录，详见
  ├─platforms             存放各平台专用页面的目录，详见
  ├─pages                 业务页面文件存放的目录
  │  ├─index
  │  │  └─index.vue       index页面
  │  └─list
  │     └─list.vue        list页面
  ├─static                存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
  ├─uni_modules           存放[uni_module](/uni_modules)规范的插件。
  ├─wxcomponents          存放小程序组件的目录，详见
  ├─main.js               Vue初始化入口文件
  ├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
  ├─manifest.json         配置应用名称、appid、logo、版本等打包信息，详见
  ├─pages.json            配置页面路由、导航条、选项卡等页面类信息，详见
  └─uni.scss              这里是uni-app内置的常用样式变量

  
   

• uni-app存放多行文字到外置js的变量
  【填坑日记】uni-app如何调用页面vue以外的js文件变量 - js如何赋值多行文字给变量_Rudon滨海渔村的博客-CSDN博客效果图步骤创建/static/js/longText.js并定义下标为calculatedexport default calculated: `代码行1代码行2代码行3代码行4`在视图文件/pages/index/index.vue中import这个js文件，并且赋值给app的一个变量，再输出<template><view> codes.calculated</view><https://blog.csdn.net/qq285744011/article/details/122478275

• uni-app类似pre标签、code标签的多行文字输出，允许左右滚动查看
  首先：存放多行文字到外置js的变量（方法）
  然后，使用scroll-view+textarea显示

  <scroll-view scroll-y="false" scroll-x="true" >
      <textarea :value="var" style="width:2000rpx;" auto-height="true"/>
  </scroll-view>

• pages.json 全局配置
  页面路径、窗口、导航栏、底部tabbar等
  << globalStyle >>

  navigationBarBackgroundColor 导航栏背景色
  navigationBarTextStyle 导航栏字体色（黑|白）
  navigationBarTitleText 导航栏标题
  navigationStyle 隐藏导航栏custom / default
  backgroundColor 下拉时的底板背景色
  backgroundTextStyle 下拉loading (dark/light)
  enablePullDownRefresh 开启下拉刷新 真假
  onReachBottomDistance 距离px 触底触发
  transparentTitle 导航栏透明度 always auto none
  ------------------------------------
  如果是auto，建议设置导航栏点击穿透是Yes
  "titlePenetrate": "YES"
  否则透明的导航栏会遮挡页面
  ------------------------------------
  pageOrientation 横竖屏限制
  auto 自动portrait 竖屏landscape 横屏
  leftWindow topWindow rightWindow
  控制显示 (真|假)
  rpxCalcMaxDeviceWidth
  rpxCalcBaseDeviceWidth
  rpxCalcIncludeWidth
  dynamicRpx
  maxWidth
  ...

• uni-app经典布局
   

  topWindow等说明 
   

• 盒式布局对齐方法 (display: flex的容器里面的元素对齐)
  网格布局中 justify-content align-content 和 place-content_陈开心的博客-CSDN博客有时，整个网格大小可能小于其 网格容器(grid container) 大小。 如果网格轨道（ grid tracks）使用固定的单位设置 大小（比如 px），就可能出现这种情况。在这种情况下，可以设置网格容器内的网格的对齐方式。Sometimes the edges of the grid do not correspond to the edges of the grid containe...https://blog.csdn.net/u013565133/article/details/102930246纵向对齐
  【align-content】
  start 上
  center 中
  end 下
  space-around 四分天下，左青龙右白虎
  space-between 隔空相望，天下太平
  space-evenly  三分天下

  横向对齐
  【justify-content】
  start 左
  center 中
  end 右
  space-around、space-between、space-evenly

  组合对齐 - 先是纵向，再是横向
  【place-content】
  start,start 左上
  end,center 中间靠下面
  end 右下
   

• 状态管理vuex - 登录状态管理
  状态管理Vuexuni-app：一个使用 Vue.js 开发跨平台应用的前端框架https://uniapp.dcloud.io/vue-vuex
  比全局变量更牛，更适合大中型
  情景：未登录跳到pages/login/login/，已登录跳到pages/home/home/
  步骤：....未完待续
   

• ...

• ...

• 更多...

================= More happiness coming soon ===================