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

• • 脚手架搭建项目
  • 新建页面
  • 样式和sass
  • 基本语法
  • • 数据展示
    • 数据循环
    • 条件编译
    • 计算属性
  • 事件
  • • 传参方式
  • 组件
  • • 组件的简单使用
    • 示例
    • 组件传递参数
    • 父向子传递数据
    • 子向父传递数据
    • 全局共享数据
    • 组件插槽
    • • 未使用插槽
      • 在组件中添加插槽
  • 生命周期
  • • 介绍
  • 当小程序模拟器无反应时

脚手架搭建项目

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 标签上加入属性 <style lang = 'scss'>即可

index2/index.vue

<template>
	<view class="content">
		<view class="rpx">rpx</view>
		<view class="vw">rpx</view>
		<view class="sass">sass</view>
	</view>
</template>

<script>
	export default {

	}
</script>

<style lang="scss">

	.rpx{
		/* rpx 小程序中的单位 750rpx = 屏幕的宽度 */
		width :750rpx;
		height: 100rpx;
		background-color:aqua;
	}

	.vw{
		/* vm h5单位 100vw = 屏幕的宽度 100vh = 屏幕的高度 */
		width:50vw;
		height: 50vh;
		background-color: tan;
	}

	.content{
		.sass{
			background-color:red;
			color:$uni-color-primary;
		}
	}
</style>

效果图

基本语法

数据展示

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

<!-- 使用数据 -->
<view>{{msg}}</view>
<view>{{money}}</view>
<view>{{isRich}}</view>
<view>{{person}}</view>
<view>{{person.name}}</view>
<view>{{person.skill}}</view>

<!-- 标签上通过属性的方式使用数据 -->
<view :data-color="color">color</view>


<script>
    export default {
        data(){
            return{
                //存放数据
                msg:"黑马程序员",
                //数字
                money:100,
                //boolean类型
                isRich:false,

                //对象
                person:{
                    name:"孙悟空",
                    skill:"72变"
                },
                //颜色
                color:"auqa",

                //数组
                list:[
                    {
                        id:0,
                        text:"苹果"
                    }
                    ,
                    {
                        id:1,
                        text:"🍌"
                    }
                    ,
                    {
                        id:2,
                        text:"🚗"
                    }
                ]
            }
        }
    }
</script>

结果

数据循环

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

<template> </template>中

<view>==========================</view>
<view v-for="(item,index) in list" :key="item.id">
    {{item.id}} -- 
    {{item.text}}--
    {{index}}
</view>

<script>
    export default {
        data(){
            return{
                //数组
                list:[
                    {
                        id:0,
                        text:"苹果"
                    }
                    ,
                    {
                        id:1,
                        text:"🍌"
                    }
                    ,
                    {
                        id:2,
                        text:"🚗"
                    }
                ]
            }
        }
    }
</script>

运行结果

条件编译

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

<template> </template>中

<view>==========================</view>

<view>
    <view v-if="true">v-if </view>
    <view v-show="false">v-show</view>
</view>

效果

计算属性

• 可以理解为是对 data中的数据提供了一种加工或过滤的能力
• 通过computed 来定义计算属性

1. 示例1 实现功能 输出 ￥1000

<template> </template>中

<view>$ {{money}}</view>

<view>{{cnMoney}}</view>

<script>
    export default {
        data(){
            return{
                money:100
            }
        },
        //计算属性
        computed:{
            //直接把 cnMoney看成是再data中的普通的数据一样来使用即可
            cnMoney(){
                //$ 1000
                return "$"+ this.money;
            }
        }
    }
</script>

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

<template> </template>中

<view>
    <view v-for="(item,index) in filterList"
          :key="item.id">
        {{item.text}} -- {{index}}
    </view>
</view>

<script>
    export default {
        data(){
            return{
                list:[
                    {
                        id: 0,
                        text:"苹果"
                    }
                    ,
                    {
                        id: 1,
                        text:"🍌"
                    }
                    ,
                    {
                        id: 2,
                        text:"🚗"
                    }
                ]
            }
        },
        //计算属性
        computed:{
            //过滤数组
            filterList(){
                //只要id > 0 都不要
                return this.list.filter(v=>v.id<= 0);
            }
        }
    }
</script>

结果

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

事件

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

传参方式

如何拿到标签中的属性

<template>
<view class="content">
    <view data-index="11" @click="handleClick(1,$event)">点击我试试1</view>
    <view data-index="22" @click="handleClick(2,$event)">点击我试试2</view>
</template>
<script>
    export default {
        methods:{
            handleClick(index,event){
                console.log(index);
                console.log(event);
            }
        }
    }
</script>

那么如何调用属性中自定义的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. 组件的使用

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

示例

定义

<template> 
<image class= "img-border" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.yygx.net%2FfileYYGX%2Fjournal%2Farticle%2Fyygx%2F2020%2F3%2F9257-1.jpg&refer=http%3A%2F%2Fwww.yygx.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1640596226&t=6b86c267d92c15be48a1816dc1a005d7">
    </image>
</template>

<script>
    export default {

    }
</script>

<style>
    .img-border{
        border-radius: 50%;
    }
</style>

引入-注册-使用

<template>
	<view class="content">
    <!-- 4 使用组件 -->
    <img-border></img-border>
    
    </view>


</template>

<script>
    //2 引入自定义组件
    import imgBorder from "@/components/img-border"
    export default {
        //3 注册组件
        components:{
            imgBorder
        }
    }
</script>

<style lang="scss">
</style>

效果

组件传递参数

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

父向子传递数据

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

结果

子向父传递数据

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

全局共享数据

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

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

就可以找到main.js

App.vue中定义

组件插槽

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

未使用插槽

my-form.vue

<template>
<view class="form">
    <view class="form_title">标题</view>
    <view class="form_content">内容</view>
    </view>
</template>

<script>
    export default {

    }
</script>

<style>
</style>

index6/index.vue

<template>
<view class="content">
    <my-form>
        <view>
            <input type="text">
            <radio></radio>
            <checkbox></checkbox>
    </view>
    </my-form>
    </view>

</template>

<script>

    import myForm from "@/components/my-form"

    export default {
        components: { myForm },


    }
</script>

<style lang="scss">

</style>

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