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

最新推荐文章于 2024-05-07 17:05:25 发布

WWWOWhite

最新推荐文章于 2024-05-07 17:05:25 发布

阅读量6.9k

点赞数 3

分类专栏： uni-app 文章标签： uniapp 微信小程序

本文链接：https://blog.csdn.net/qq_45915904/article/details/124161917

版权

uni-app 专栏收录该内容

4 篇文章 2 订阅

订阅专栏

脚手架搭建项目

全局安装

npm install -g @vue/cli

创建项目

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

启动项目(微信小程序)

npm run dev:mp-weixin

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

根目录

进入目录再导入

建立完成

目录结构

┌─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 实现功能输出￥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>

示例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);
}

组件

组件的简单使用

组件的定义
- 在src目录下新建文件夹components 用来存放组件
- 在 components 目录下直接新建组件 *.vue
组件的引入
- 在页面中引入组件 ”import 组件名 from ’组件路径‘ “
组件的注册
- 属性 components是一个对象，把组件放进去注册
组件的使用
- 在页面的标签中，直接使用引入的组件 ”<组件></组件>“

示例

定义

<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

WWWOWhite

关注

3
点赞
踩
42

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue小程序开发（一） uni-app基本学习

vue小程序开发（一） uni-app基本学习脚手架搭建项目新建页面样式和sass基本语法数据展示数据循环条件编译计算属性事件传参方式组件组件的简单使用示例组件传递参数父向子传递数据子向父传递数据全局共享数据组件插槽未使用插槽在组件中添加插槽生命周期介绍当小程序模拟器无反应时脚手架搭建项目全局安装npm install -g @vue/cli创建项目vue create -p dcloudio/uni-preset-vue my-project启动项目(微信小程序)npm ru
复制链接

扫一扫