uniapp构建微信小程序_uniapp小程序创建
赞
踩
脚手架搭建项目
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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
数据循环
通过 v-for来指定要循环的数组
item 和 index 分别为 循环项 和 循环索引
:key 指定唯一的属性，用来提高循环效率
<template>
<view
v-for="(item,index) in list"
:key="item.id"
>
{{item.text}}
</view>
</template>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
条件编译
通过v-if 来决定显示和隐藏 不适合做频繁的切换显示
通过 v-show来决定显示和隐藏 适合做频繁的切换显示
<template>
<view v-if="true">v-if</view>
<view v-show="true">v-show</view>
</template>
- 1
- 2
- 3
- 4
计算属性
可以理解为是对 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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
事件
注册事件 @click=“handleClick”
定义事件监听函数 需要在“methods”中定义
事件的传参
<template>
<view class="content">
<view @click="handelClick">点击我试试</view>
</view>
</template>
<script>
export default {
methods: {
handelClick(){
console.log('1+1=2')
}
}
}
</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
<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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
组件
- 组件的定义
在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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
修改页面的标题
mounted(){
// 修改页面的标题
uni.setNavigationBarTitle({title:"最新"})
}
- 1
- 2
- 3
- 4
轮播图
swiper
1 自动轮播 autoplay
2 指示器 indicator-dots
3 衔接轮播 circular
4 swiper 默认的高度 150px 默认宽度 750rpx 【一般要重置高度】
5 image 默认的宽度 320px 默认的高度 240px
6 计算图片 ( 要轮播的图片 ) 的宽度和高度的比例
7 把图片的比例也写到swiper标签样式
8 swiper-item 100%
<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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
moment.js处理时间格式
fromNow() 实现 显示 XXX月前
moment.locale(“zh-cn”)使用中文语言
<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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
[详细] -->赞
踩
