脚手架搭建项目
1.全局安装
npm install -g @vue/cli
2.创建项目
vue create -p dcloudio/uni-preset-vue my-project
vue create -p E:\project\uni-preset-vue my-project
3.启动项目(微信小程序)
npm run dev:mp-weixin
4.微信小程序开发者工具导入项目
进入微信开发者工具，导入项目
E:\project\my-project\dist\dev\mp-weixin
项目结构介绍
项目目录
数据展示
在js 的 data 中定义数据
在 template中通过{{ 数据}} 来显示
在标签的属性上通过 :data-index='数据’来使用
<template>
<view class="content">
<view>{{ msg }}</view>
<view>{{ money }}</view>
<view>{{ isRich }}</view>
<view>{{ person.name }}</view>
<view>{{ person.skill }}</view>
<view :data-color="color">color</view>
</view>
</template>
<script>
export default {
data() {
return {
msg:"hello world",
money:10000,
isRich:false,
person:{
name:"小羊",
skill:"吃草"
},
color: "aqua"
}
}
}
</script>
数据循环
通过 v-for来指定要循环的数组
item 和 index 分别为 循环项 和 循环索引
:key 指定唯一的属性，用来提高循环效率
<template>
<view
v-for="(item,index) in list"
:key="item.id"
>
{{item.text}}
</view>
</template>
条件编译
通过v-if 来决定显示和隐藏 不适合做频繁的切换显示
通过 v-show来决定显示和隐藏 适合做频繁的切换显示
<template>
<view v-if="true">v-if</view>
<view v-show="true">v-show</view>
</template>
计算属性
可以理解为是对 data中的数据提供了一种加工或者过滤的能力
通过 computed 来定义计算属性
<template>
<view>￥{{ money }}</view>
<view> {{ cnMoney }}</view>
<view v-for="item in filterList" :key="item.id">{{ item.text }}</view>
</template>
<script>
export default {
data() {
money:10000,
list:[
{
id: 0,
text: "apple"
},
{
id: 1,
text: "apple1"
},
{
id: 2,
text: "apple2"
},
]
},
computed: {
cnMoney(){
return "￥" +this.money
},
filterList(){
return this.list.filter(v => v.id <= 0)
}
},
}
</script>
事件
注册事件 @click=“handleClick”
定义事件监听函数 需要在“methods”中定义
事件的传参
<template>
<view class="content">
<view @click="handelClick">点击我试试</view>
</view>
</template>
<script>
export default {
methods: {
handelClick(){
console.log('1+1=2')
}
}
}
</script>
<template>
<view class="content">
<view data-index="11" @click="handelClick(1,$event)">点击我试试1</view>
<view data-index="22" @click="handelClick(2,$event)">点击我试试2</view>
</view>
</template>
<script>
export default {
methods: {
handelClick(index,event){
console.log(index)
console.log(event)
console.log(event.currentTarget.dataset.index)
}
}
}
</script>
组件
- 组件的定义
在src目录下新建 文件夹 components 用来存放组件
在 components 目录下直接新建组件*.vue
- 组件的引入
在页面中引入组件“import 组件名 from’组件路径
- 组件的注册
在页面中的实例中，新增属性 components
属性 components 是一个对象，把组件放进去注册
- 组件的使用
在页面的标签中，直接使用引入的组件<组件></组件>
组件传递参数
父向子传递参数 通过 属性 的方式
父页面向子组件 ul-com 通过属性名 list 传递了一个数组数据
子组件 通过 props 进行接收 数据
子向父传递参数 通过 触发事件 的方式
子组件通过 触发事件 的方式向父组件传递数据
父组件通过 监听事件 的方式来接收数据
使用全局数据传递参数
通过 挂载 vue 的原型上
main.js
Vue.prototype.baseurl="www.yyqsdjc.cn"
引用：this.baseurl
通过 globalData 的方式
APP.vue
globalData:{base:"[https://yyqsdjc.netlify.app/"](https://yyqsdjc.netlify.app/")}
引用：getApp().globalData.text='base'
组件插槽
标签其实也是数据中的一种，想实现动态的给子组件传递 标签，就可以使用插槽 slot
通过slot 来实现占位符 <slot></slot>占位符
生命周期
uni-app框架的生命周期结合了 vue 和 微信小程序 的生命周期全局的APP中 使用 onLaunch 表示应用启动时【APP.vue】
页面中 使用 onLoad 或者 onShow 分别表示 页面加载完毕时 和 页面显示时【页面】
组件中 使用 mounted 组件挂载完毕时【组件】
完整的生命周期：
7.2 完整生命周期
uni-app https://uniapp.dcloud.io/frame?id=生命周期
vue https://cn.vuejs.org/v2/guide/instance.html?#生命周期
微信小程序 https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html
分段器
分段器指的是 uni-ui 中的一个组件，其实就是我们俗称的 标签页，tab栏
使用：
// 使用
<template>
<view>
// 导航栏
<view>
<uni-segmented-control
:values="items.map(v=>v.title)"
:current="current"
@clickItem="onClickItem"
style-type="text"
active-color="#d4237a"
></uni-segmented-control>
</view>
// 项目
<view class="content">
<view v-if="current === 0">
<home-recommend></home-recommend>
</view>
<view v-if="current === 1">
<home-category></home-category>
</view>
<view v-if="current === 2">
<home-new></home-new>
</view>
<view v-if="current === 3">
<home-album></home-album>
</view>
</view>
</view>
</template>
<!-- 引入+注册 -->
<script>
import { uniSegmentedControl } from "@dcloudio/uni-ui";
export default {
components: {
uniSegmentedControl
},
data() {
return {
items: [
{ title: "推荐" },
{ title: "分类" },
{ title: "最新" },
{ title: "专辑" }
],
current: 1
};
},
methods: {
onClickItem(e) {
if (this.current !== e.currentIndex) {
this.current = e.currentIndex;
}
}
}
};
</script>
修改页面的标题
mounted(){
// 修改页面的标题
uni.setNavigationBarTitle({title:"最新"})
}
轮播图
swiper
1 自动轮播 autoplay
2 指示器 indicator-dots
3 衔接轮播 circular
4 swiper 默认的高度 150px 默认宽度 750rpx 【一般要重置高度】
5 image 默认的宽度 320px 默认的高度 240px
6 计算图片 ( 要轮播的图片 ) 的宽度和高度的比例
7 把图片的比例也写到swiper标签样式
8 swiper-item 100%文章来源：https://www.toymoban.com/news/detail-851828.html
<template>
<view class="album_swiper">
<swiper
autoplay
indicator-dots
circular
>
<swiper-item
v-for="item in banner"
:key="item.id"
>
<image :src="item.thumb"></image>
</swiper-item>
</swiper>
</view>
</template>
<style lang="scss" scoped>
.album_swiper {
swiper {
// 750rpx 326.0869565217392
// height: calc(750rpx / 2.3 );
height: 326.1rpx;
image {
height: 100%;
}
}
}
</style>
moment.js处理时间格式
fromNow() 实现 显示 XXX月前
moment.locale(“zh-cn”)使用中文语言文章来源地址https://www.toymoban.com/news/detail-851828.html
<template>
<view class="user_time">{{ imgDetail.cnTime }}</view> //英文
</template>
<script>；
import moment from "moment";
moment.locale("zh-cn")； // 中文
export default {
onLoad()
{
this.imgDetail.cnTime=moment(this.imgDetail.atime*1000).fromNow();
}
</script>
到了这里，关于uniapp构建微信小程序的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
![[uni-app] 微信小程序 如何修改替换头像](https://imgs.yssmx.com/Uploads/2024/02/516718-1.png)
