uni-app课程心得_如果 nvue 页面 @animationfinish 事件不能返回正确的数据,可同时监听 @cha

目录

1.uni-app环境搭建

1.下载HBuilderX

2.通过HBuilderX可视化界面创建第一个uni-app应用

 3.下载微信小程序

 2.全局文件配置

1.pages.json文件

2.manifest.json文件

3.uni-app实际运用中的组件

1.基础组件列表

2.视图组件

2.1swiper

2.2scroll-view

3.表单组件

3.1button

3.2checkbox-group

3.3form

4.在uni-app中使用中必不可少sass插件的使用css的概述：

2、使用步骤：

5.生命周期

1.应用生命周期

2.页面生命周期函数

3.组件生命周期

6.页面路由

什么是路由？

1.哪些会触发页面跳转

2.微信小程序中实现页面路由的几种方式

7.为什么要学习uni-app这一门课程

8.总结

---

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

官网：uni-app官网 (dcloud.net.cn)

1.uni-app环境搭建

1.下载HBuilderX

HBuilderX官网下载地址：HBuilderX-高效极客技巧

选择相应的版本就可以了

 选择正式版，可以下载Windows版和Mac OS版，其各有两个版本，分别是标准版和APP开发版。其中，标准版可直接用于Web开发、MarkDown、字处理场景、小程序等。如果开发App.则需要手动安装插件。App开发版预置开发App所需的插件，开箱即用。如果只是开发小程序和H5，则安装标准版即可。这里下载的是App开发版。

HBuilder X下载完成后即可安装，Windows版和Mac OS版的安装都很简单，按提示操作即可。

2.通过HBuilderX可视化界面创建第一个uni-app应用

第一步：打开HBuilderX，点击工具栏里的文件 -> 新建 -> 项目

 第二步：选择  uni-app

 类型，输入工程名，选择模板，点击创建，即可成功创建

 最后：项目创建完成之后即可运行，打开项目的任意文件，如App.vue，选择“运行”-->"运行到浏览器“命令，选择浏览器，即可在浏览器中体验uni-app的H5版。

 3.下载微信小程序

第一步：安装微信开发者工具，下载地址：微信开发者工具下载地址与更新日志 | 微信开放文档

选择合适的版本下载，一步步默认安装即可。安装完成之后，要使用uni-app开发，需要打开微信小程序开发者工具的服务端口，进行微信小程序开发者工具，选择"设置"-->"安全设置"命令，将"服务端口"改完打开状态，如图所示

 第二步：安装并配置完毕之后，打开HBuilderX，进入项目，选择“运行”-->"运行到小程序模拟器“-->"微信开发者工具“命令，即可在微信开发者工具中体验uni-app，如图

 2.全局文件配置

1.pages.json文件

pages.json文件主要用于对uni-app进行全局配置，可以在配置项设置默认页面的窗口、设置页面路径及窗口、设置组件自动引入规则、设置底部tab及分包加载配置等。

pages.json文件配置的参考文档地址

pages.json 页面路由 | uni-app官网

2.manifest.json文件

manifest.json文件可以配置H5、小程序、App信息，如配置代理，H5模板以及小程序AppID、App的名称、图标、权限等。

manifest.json文件配置的参考文档地址

App Android@android | uni-app官网

3.uni-app实际运用中的组件

uni-app为开发者提供了一系列基础组件，类似HTML里的基础标签元素，但uni-app的组件与HTML不同，而是与小程序相同，更适合手机端使用。虽然不推荐使用HTML标签，但实际上如果开发者写了div等标签，在编译到非H5平台时也会被编译器转换为view标签，类似的还有span转text、a转navigator等，包括css里的元素选择器也会转换。但为了管理方便、策略统一，写代码时建议使用view等组件。

组件的官方文档地址：组件使用的入门教程 | uni-app官网

1.基础组件列表

基础组件分为以下十几大类：

视图容器（View Container）：

表单组件（Form）：

路由与页面跳转（Navigation）：

以上这些都是日常使用中，使用比较频繁的组件。

2.视图组件

2.1swiper

滑块视图容器。

一般用于左右滑动或上下滑动，比如banner轮播图。

注意滑动切换和滚动的区别，滑动切换是一屏一屏的切换。swiper下的每个swiper-item是一个滑动切换区域，不能停留在2个滑动区域之间。

属性说明

change 事件返回 detail 中包含一个 source 字段，表示导致变更的原因，可能值如下：

• autoplay 自动播放导致swiper变化。
• touch 用户划动引起swiper变化。
• 其他原因将用空字符串表示。

swiper做左右拖动的长列表的专项问题

• swiper是单页组件，适合做banner图轮播和简单列表左右滑动。
• 因为性能问题，用swiper做复杂长列表，需要较高的优化技巧以及接受一些限制。
• 这是一个范例，插件市场新闻模板示例，它在App端使用了nvue的原生渲染，实现高性能的左右拖动长列表；并支持可自定义的任何形式的下拉刷新。它在非App端使用的模式是只缓存左右一共3列的数据，dom中的数据过多时，它会自动释放。就是说App上，只要看过这一页，再进去时内容是还在的。而在非App上，只能做到缓存3页数据，其他页即便看过，再进去也会重新加载。并且非App的这种情况下，不再提供下拉刷新。虽然插件市场也有其他前端模拟的下拉刷新，但性能不佳。一般小程序的大厂案例里，提供左右拖长列表的，都是这种做法。

Tips

• 如果 nvue 页面 @animationfinish 事件不能返回正确的数据，可同时监听 @change 事件。
• 使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height。
• 注意：其中只可放置 <swiper-item> 组件，否则会导致未定义的行为。
• 如果遇到current、current-item-id属性设置不生效的问题参考：组件属性设置不生效解决办法
• banner图的切换效果和指示器的样式，有多种风格可自定义，可在uni-app插件市场搜索
• 如需banner管理后台，参考uniCloud admin banner插件：云端一体banner - DCloud 插件市场
• swiper在App的vue中、百度支付宝头条QQ小程序中，不支持内嵌video、map等原生组件。在微信基础库2.4.4起和App nvue2.1.5起支持内嵌原生组件。竖向的swiper内嵌视频可实现抖音、映客等视频垂直拖动切换效果。
• 同时监听 change transition，开始滑动时触发transition, 放开手后，在ios平台触发顺序为 transition... change，Android/微信小程序/支付宝为 transition... change transition...

2.2scroll-view

可滚动视图区域。用于区域滚动。

需注意在webview渲染的页面中，区域滚动的性能不及页面滚动。

属性说明

使用竖向滚动时，需要给 <scroll-view> 一个固定高度，通过 css 设置 height；使用横向滚动时，需要给<scroll-view>添加white-space: nowrap;样式。

3.表单组件

3.1button

按钮。

属性说明

3.2checkbox-group

多项选择器，内部由多个 checkbox 组成。

属性说明

#checkbox

多选项目。

属性说明

3.3form

表单，将组件内的用户输入的<switch> <input> <checkbox> <slider> <radio> <picker> 提交。

当点击 <form> 表单中 formType 为 submit 的 <button> 组件时，会将表单组件中的 value 值进行提交，需要在表单组件中加上 name 来作为 key。

属性说明

以上这些表单组件都是日常必不可少的组件

4.在uni-app中使用中必不可少sass插件的使用css的概述：

Sass (英文全称：Syntactically Awesome Stylesheets) 是一个最初由 Hampton Catlin 设计并由 Natalie Weizenbaum 开发的层叠样式表语言。

Sass 是一个 CSS 预处理器。

Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。

Sass 完全兼容所有版本的 CSS。

菜鸟教程参考链接：链接

2、使用步骤：

              一、在hbuilder开发工具安装sass插件，前往插件市场安装，如果需要登录，自己注册一个账号登录即可。

  二、在写样式的style的标签添加lang="scss"属性。

  三、开始使用scss语法编写样式。

5.生命周期

1.应用生命周期

1、App(Object object)
微信小程序应用生命周期从注册小程序生命周期开始说起，拿Vue.js这比喻，我们要使用Vue就得先new一个Vue对象。而微信小程序通过App(Object object)这个函数来注册小程序，接受一个 Object 参数，其指定小程序的生命周期回调等。
Tip: App() 必须在 app.js 中调用，必须调用且只能调用一次。不然会出现无法预期的后果。

2、App()参数
App(Object object)也可称为注册程序，这个程序里包含了些关于小程序生命周期相关的函数。或称为App()函数的参数，参数类型是Object object。如下

3、示例代码

App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data'
})

这里需要特别说明的是 globalData 这个函数/对象，这里可以写成函数也可以写成一个单独的变量，这个函数的作用通常是存储全局变量。

2.页面生命周期函数

小程序的页面生命周期函数需要在页面.js 中进行声明。如：

Page({
    /**
     * 页面的初始数据
     */
    data: {
    },
 
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {
        console.log('本地生活页面加载完毕');
    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {
        console.log("初次渲染完毕！");
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        console.log("页面显示完成");
    },
    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {
        console.log("页面已被隐藏！");
    },
    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {
        console.log("GG");
    },
 
    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {
        console.log('正在刷新！');
    },
 
    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {
        console.log('正在加载更多！');
    },
 
    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {
        console.log('用户正在分享！');
    }
})

3.组件生命周期

3.1组件全部的生命周期函数

小程序组件可用的全部生命周期如下表所示。

3.2组件主要的生命周期函数

在小程序组件中，最重要的生命周期函数有 3 个，分别是 created、attached、detached。它们各自的特点如下：

3.2.1组件实例刚被创建好的时候，created 生命周期函数会被触发

此时还不能调用 setData

通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段

3.2.2在组件完全初始化完毕、进入页面节点树后， attached 生命周期函数会被触发

此时， this.data 已被初始化完毕

这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）

3.2.3 在组件离开页面节点树后， detached 生命周期函数会被触发

退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数

此时适合做一些清理性质的工作

6.页面路由

什么是路由？

路由（routing）是指分组从源到目的地时，决定端到端路径的网络范围的进程。我们可以理解微信小程序页面路由，根据路由规则（路径）从一个页面跳转到另一个页面的的规则。

1.哪些会触发页面跳转

1. 小程序启动，初始化第一个页面
2. 跳转新页面，调用wx.navigateTo 或者 <navigator />
3. 页面重定向，调用wx.redirectTo 或者 <navigator />
4. 页面返回，调用wx.navigateBack ,页面左上角返回按钮
5. wx.switchTab实现tabBar页面切换

Tips: 所有页面都必须在app.json中注册,例如

{
    "pages": [
        "pages/index/index",
        "pages/classification/classification",
        "pages/start/start",
        "pages/detail/detail",  
    ]
}

---

2.微信小程序中实现页面路由的几种方式

1. wx.navigateTo，保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面

wx.navigateTo({
  url: 'pages/detail/detail',
  success: function(res) {},
  ...
})

1. wx.redirectTo,关闭当前页面，跳转到应用内的某个页面,但是不允许跳转到 tabbar 页面

wx.redirectTo({
  url: 'pages/detail/detail',
  success:function(res){},
  ...
})

1. <navigator />组件跳转方式

<navigator url=pages/detail/detail">跳转</navigator>

1. wx.navigateBack返回上一页

wx.navigateBack({
	delta: 1,
})

Tips: delta为1时表示返回上一页，为2时表示上上一页，以此类推；如果dalta大于已打开的页面总数，则返回到首页。返回后，元界面会销毁

1. wx.switchTab跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
   app.json:

{
  "tabBar": {
    "list": [{
        "pagePath": "pages/index/index",
        "text": "首页",
    },
    {
        "pagePath": "pages/car/car",
        "text": "购物车",
      },
   ...
  }
}

index.js:

wx.switchTab({
  url: 'pages/car/car'
})

7.为什么要学习uni-app这一门课程

1. 跨平台开：uni-app是一种基于Vue.js的跨平台开发框架，可以同时开发iOS、Android、H5等多个平台的应用程序。这样可以节省开发人员时间和精力，只需次代码，就可以在多个平台上运行。

2. 开发效率高：使用uni-app可以利用Vue.js的开发模式，开发速度相对较快。通过一套代码实现多个平台的开发，避免了重复的工作，提高了开发效率。

3. 资源共享：uni-app可以共享Vue.js生态系统中的大量插件和组件，这为开发者提供了更多的选择和便利。可以从Vue.js的社区中获取到丰富的资源和支持。

4. 应用范围广：uni-app不仅可以开发移动应用程序，还可以开发桌面应用和小程序等。这样可以扩展应用的范围，满足不同平和场景的需求。

总的来说，学习uni-app可以帮助开发者提高开发效率、拓宽应用范围，更好地适应跨平台开发的需求。同时，uni-app也是当前比较热门的技术之一，掌握这门技术也有助于提升自己的竞争力和就业机会。

8.总结

总的来说，学习uni-app需要有一定的Vue.js基础知识，并要了解各个平台的差异和限制。通过入学习和实践，结合官方文档和社区资源，可以解决遇到的困难，提高uni-app的开发能力。