vue小程序开发（一） uni-app基本学习

脚手架搭建项目

1. 全局安装

npm install -g @vue/cli

2. 创建项目

vue create -p dcloudio/uni-preset-vue my-project

3. 启动项目(微信小程序)

npm run dev:mp-weixin

4. 微信小程序开发者工具导入项目

​ 根目录

​ 进入目录 再导入

建立完成

目录结构

┌─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            配置页面路由、导航条、选项卡等页面类信息，详见

新建页面

pages.json

用来注册页面，排在第一的页面是首页

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        
        //新增页面
		{
			"path": "pages/index2/index",
			"style": {
                //页面名，呈现在小程序上方
				"navigationBarTitleText": "2"
			}
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}

	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	}
}

样式和sass

• 支持小程序的rpx 和 h5的vm，vh

• 内置有sass的配置了 ，只需要安装对应的依赖即可

  npm install sass-loader node-sass
  

  sass版本和Node版本对应关系

  

  如果出现版本报错，移步：

  https://blog.csdn.net/xiakekeali/article/details/112766575

• vue组件中，在style 标签上加入属性

  效果图

  基本语法

  数据展示

  • 在js的data中定义数据
  • 在template中通过{{}}来显示
    • 在标签的属性上通过 :data-index=‘数据’ 来使用
  

  
  {{msg}}
  {{money}}
  {{isRich}}
  {{person}}
  {{person.name}}
  {{person.skill}}
  
  
  color
  
  
  
  
  

  结果

  

  数据循环

  • 通过v-for来指定要循环的数组
  • item 和 index 分别为 循环项 和 循环索引
  • :key 指定唯一的属性，用来提高循环效率
  

  中

  ==========================
  
      {{item.id}} -- 
      {{item.text}}--
      {{index}}
  
  

  运行结果

  

  条件编译

  • 通过 v-if 来决定显示和隐藏 不适合做频繁的切换显示
  • 通过 v-show 来决定显示和隐藏，适合做频繁的切换显示
  

  中

  ==========================
  
  
      v-if 
      v-show
  
  

  效果

  

  计算属性

  • 可以理解为是对 data中的数据提供了一种加工或过滤的能力
  • 通过computed 来定义计算属性
  
  1. 示例1 实现功能 输出 ￥1000

  中

  $ {{money}}
  
  {{cnMoney}}
  
  

  
  2. 示例3 实现功能 ，过滤掉数组id大于0的内容

  中

  
      
          {{item.text}} -- {{index}}
      
  
  
  

  结果

  

  v-for 和 v-if 不建议一起使用，建议用computed

  事件

  • 注册事件 @click = “handleClick”
  • 定义事件监听函数 需要在 ”methods“中定义
  • 事件的传参
  

  传参方式

  如何拿到标签中的属性

  

  那么如何调用属性中自定义的index呢？？

  handleClick(index,event){
      console.log(index);
      console.log(event);
      console.log(event.currentTarget.dataset.index);
  }
  

  

  组件

  组件的简单使用

  1. 组件的定义

     • 在src目录下新建文件夹components 用来存放组件
     • 在 components 目录下直接新建组件 *.vue

  2. 组件的引入

     • 在页面中 引入 组件 ”import 组件名 from ’组件路径‘ “

  3. 组件的注册

     • 属性 components是一个对象，把组件放进去注册

  4. 组件的使用

     • 在页面的标签中，直接使用引入的组件 ”<组件>“

  示例

  定义

  引入-注册-使用

  效果

  

  组件传递参数

  • 父向子传递参数 通过 属性 的方式
  • 子向父传递参数 通过 触发事件 的方式
  • 通过全局数据传递参数
    • 通过 挂载 vue 的原型上
    • 通过 globalData 的方式

  父向子传递数据

  • 父页面向子组件 ul-com 通过属性名 list 传递了一个数组数据
  • 子组件 通过props 进行接收数据
  

  结果

  

  子向父传递数据

  • 子组件通过 触发事件 的方式向父组件传递数据
  • 父组件通过 监听事件 的方式来接收数据
  

  全局共享数据

  • 通过 Vue 的原型共享数据
  • 通过 globalData 共享数据
  • vuex（未讲）
  • 本地存储（未讲）
  

  假如想项目一启动时，就做一些定义数据

  就可以找到main.js

  

  App.vue中定义

  

  组件插槽

  • 标签其实也是数据的一种，想实现动态的给子组件传递 标签， 就可以使用插槽 slot
  • 通过slot 来实现占位符

  未使用插槽

  my-form.vue

  index6/index.vue

  

  text文本框并没有显示出来， 这就需要在组件里面写一个占位符（即插槽）

  在组件中添加插槽

  

  生命周期

  介绍

  • uni-app框架的生命周期结合了 vue 和 微信小程序的生命周期
  • 全局的APP中 使用 onLaunch 表示应用启动时
  • 页面中 使用 onLoad 或者 onShow 分别表示 页面加载完毕时 和 页面显示时
  • 组件中使用mounted组件挂载完毕时

  应用 指的是 App.vue

  

  页面

  

  组件

  

  结果

  

  uniapp生命周期详解链接

  https://uniapp.dcloud.io/frame?id=%e7%94%9f%e5%91%bd%e5%91%a8%e6%9c%9f

  微信生命周期

  vue生命周期

  当小程序模拟器无反应时

  终端运行

  npm run dev:mp-weixin