uniapp-学习总结1

uniapp学习使用总结

1. ​ uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台

2. 创建uni-app

   1. 通过 HBuilderX 可视化界面
   2. 通过vue-cli命令行
      1. 全局安装vue-cli
      2. vue create -p dcloudio/uni-preset-vue my-project
      3. 选择默认模板
      4. 运行（具体看配置文件）
         1. npm run serve 运行在h5
         2. npm run dev:mp-weixin
      5. 在小程序中启动 选择目录mp-weixin
         

3. 项目目录

   1. 

4. 安装依赖

   1. 安装依赖时候最好用 npm i xxx -s
   2. 安装sass的时候
      1. npm i node-sass
      2. npm i sass-loader@7.3.1
      3. 在安装好node-sass和sass-loader后在vue组件中使用lang=scss编译运行时报错
         原因是sass-loader版本过高建议在7左右
         npm install sass-loader@7.3.1

5. 每次运行时候，先要用npm安装，再用cnpm安装sass，不然会报错

6. 基本语法

   1. 数据展示
      

   2. 数据循环
      

   3. 条件判断
      

   4. 计算属性
      
      可以作为v-if和v-for同时使用的一种解决办法

7. 事件

   1. 基本使用
   2. 事件传参
      1. 在回调中加括号，传入参数，接收参数
      2. 若需要传递事件对象，传参的时候括号加入$event,接收e
         

8. 组件

   1. 组件基本使用

   2. 组件传参

      1. 父传子

      2. 子传父
         

      3. 全局传递
         

   3. 插槽

9. 生命周期

   1. 应用生命周期
   2. 页面生命周期
   3. 

10. 路由

11. 

12. 项目搭建

    1. 一般是在page下建立文件夹名称以及index.vue文件

    2. 字体图标 阿里巴巴

    3. uni-ui

       1. https://ext.dcloud.net.cn/plugin?id=55

       2. npm install @dcloudio/uni-ui
          

       3. import {uniBadge} from '@dcloudio/uni-ui'
          //import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' //也可使用此方式引入组件
          export default {
              components: {uniBadge}
          }
          

       4. <uni-badge text="1"></uni-badge>
          

    4. uni-api

13. ajax请求封装
    

14. flex布局

    1. 50%排列 可以用border 白色代替padding 很常用
       
       

15. css tree

    1. ctrl +shift +p

16. moment js 的使用

17. 数据渲染优化

    1. 问题，当渲染数据时，会先渲染未定义，再等待数据
    2. 优化，在首页最顶部标签判断数据是否为空，为空则不显示

18. ctrl+h 查找替换

19. 布局样式最佳方式

    1. 首先根据模型图写html结构，并添加类和样式
    2. 再根据csstree插件得到样式结构
    3. 根据模型快速写出样式

20. 根据felx来进行顶部固定

    1. 页面felx clomu
    2. 头部固定，身体overflow auto

21. scroll-view scroll-y @scrolltolower="handels" 滚动 触底事件

22. 在uniapp里面的生命周期

    1. 页面生命周期
       1. 也可以使用onload
    2. 组件生命周期

23. 修改标题

    1. uni.setNavigationBarTitle({ title: "分类" });

24. 路由跳转是用的超链接

25. onreachbottom触底事件

26. 组件插槽的使用

27. 左右滑动组件的封装 P64

28. 下载图片

29. 单位 1px=2rpx=2upx

30. https://www.bilibili.com/video/BV1Sc41187nZ?p=14&spm_id_from=pageDriver

31. 快速选择相同行文本的操作

32. uni-app无法触发onReachBottom事件 https://www.cnblogs.com/ishoulgodo/p/13678639.html

33. 注册全局组件时候app不生效 h5生效 https://blog.csdn.net/qq_36157085/article/details/111608861?utm_medium=distribute.pc_relevant.none-task-blog-2_defaultbaidujs_title~default-0.control&spm=1001.2101.3001.4242

34. uniapp中在线预览（打开）文件 https://blog.csdn.net/qq_42597536/article/details/109742895

35. l-file附件选择上传下载APP-H5-小程序 https://ext.dcloud.net.cn/plugin?id=1015 https://www.cnblogs.com/that-jay/p/13276926.html

36。处理暂无数据 https://segmentfault.com/q/1010000021346224
​