uniapp基础学习保姆式教程
原创
一、介绍
如果是刚入门小程序的，又或者刚听到这个名词的人，可能跟我之前一样，带着诸多的疑惑。比如：
什么是uniapp？它和原生微信小程序有什么异同之处？
为什么推荐uniapp开发？
这里一句话两句话解释了可能还是云里雾里的。我的建议是看看下面这个视频，个人觉得讲的很清楚明白。
开发微信小程序使用原生开发还是uniapp开发，详细介绍原生小程序与uni-app开发的优缺点_哔哩哔哩_bilibili
如果对你有帮助，辛苦点个赞👍呗，反正又不花钱~😁
----------------------------------------------------------------------------------------------------------------------
二、环境搭建（hello world）
2.1 下载HBuilderX
HBuilderX-高效极客技巧
当然你可以选择其他IDE，但是官网推荐HBuilderX，天然整合uniapp。
2.2 下载微信开发者工具
我们要最终打包成微信小程序就必须在微信开发者工具去预览，那么需要下载微信开发者工具了。
微信开发者工具下载地址与更新日志 | 微信开放文档
2.3 创建uniapp项目
HBuilderX下载下来后，直接双击运行HBuilderX.exe文件即可，它是免安装的。
然后我们新建一个uniapp项目，按照下图操作即可。
然后它会默认生成项目的基本结构。
2.4 在浏览器运行
然后第一次运行时，控制台会提示自动去下载相关的插件，下载完成后需要你再次重新运行。
2.5 在微信开发者工具运行
然后启动测试一下，发现失败了。经过检查它报错的这两项，也没问题啊。
那么问题可能是出在微信开发者，我们需要进入微信开发者工具->设置->安全，然后把服务的端口号打开。
2.6 在手机上运行
安卓、ios同理，不过需要用数据线连接上。
操作类似，感兴趣的可以去试试，这里不再演示了。不过要注意的是ios端麻烦点，好像现在不支持直接运行了。
三、项目基本目录结构
四、开发规范概述
为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app约定了如下开发规范：
页面文件遵循Vue单文件组件规范
组件标签靠近小程序规范，详细见uni-app组件规范
接口能力（js api）靠近微信小程序规范，但需将前缀wx替换为uni，详见uni-app接口规范
数据绑定及事件处理同Vue.js规范，同时补充了App以及页面的生命周期
为兼容多端运行，建议使用flex布局进行开发
pages.json 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
五、基础
5.1 基础数据绑定、引用
.vue文件中，**{{msg}}**直接引用script里定义的参数，叫做文本插值
这些表达式会在所属 Vue 实例的数据作用域下作为 JavaScript 被解析。每个绑定都只能包含单个表达式
v-bind动态地绑定一个或多个属性，缩写：，让src后的字符能引用script里定义的参数
<template>
<view>
<view>
数据学习
</view>
<view>{{msg}}</view><!-- 支持引用 -->
<view>{{1?'对':'错'}}</view><!-- 支持判断 -->
<view>{{1+1}}</view><!-- 支持运算 -->
<image v-bind:src="imgUrl"></image>
<!-- 缩写 -->
<image :src="imgUrl"></image>
</view>
</template>
<script>
export default {
data() {
return {
msg:'hello',
imgUrl :'sdadadasda'
}
},
methods: {
}
}
</script>
<style>
</style>
<template>
<view>
<view v-for="(item,index) in 10">
<!-- 通过%运算符求余数，实现隔行换色的效果 -->
<view :class="'list-' + index%2">{{index%2}}</view>
</view>
</view>
</template>
<script>
export default {
data() {
return { }
}
}
</script>
<style>
.list-0{
background-color: #aaaaff;
}
.list-1{
background-color: #ffaa7f;
}
</style>
5.2 指令
指令是带有 v- 前缀的特殊属性。
指令属性的值预期是单个 JavaScript 表达式 (v-for 是例外情况)。
指令的作用是，当表达式的值改变时，将其产生的连带影响，响应式地作用于 DOM。
一些指令能够接收一个“参数”，在指令名称之后以冒号（ : ）表示。
5.3 data属性
data 必须声明为返回一个初始数据对象的函数（注意函数内返回的数据对象不要直接引用函数外的对象）；否则页面关闭时，数据不会自动销毁，再次打开该页面时，会显示上次数据。
//正确用法，使用函数返回对象
data() {
return {
title: 'Hello'
}
}
//错误写法，会导致再次打开页面时，显示上次数据
data: {
title: 'Hello'
}
//错误写法，同样会导致多个组件实例对象数据相互影响
const obj = {
title: 'Hello'
}
data() {
return {
obj
}
}
5.4 计算属性computed
在模板中复用表达式，或者任何复杂的逻辑计算，都可以写在计算属性中以供重复调用
绑定方法和普通属性相同，直接使用**{{属性名}}**即可
计算属性是基于它们的响应式依赖进行缓存的,简单地说就是只要计算的结果（参数）没有变，多次调用计算属性不会重复执行和计算，会直接返回缓存中的计算结果（区别于方法，会每次执行）
每一个计算属性都包含一个 getter 和一个 setter ，默认是利用 getter 来读取。所有 getter 和 setter 的 this 上下文自动地绑定为 Vue 实例。
5.5 计算属性的 getter
<template>
<view>
<view>Original message: "{{ message }}"</view>
<view>Computed reversed message: "{{ reversedMessage }}"</view>
</view>
</template>
<script>
export default {
data() {
return {
message: 'Hello'
}
},
computed: {
// 计算属性的 getter
reversedMessage(){
return this.message.split('').reverse().join('')
}
}
}
</script>
结果：
Original message: "Hello"
Computed reversed message: "olleH"
5.6 计算属性的 setter
<template>
<view>
<view>{{ fullName }}</view>
</view>
</template>
<script>
export default {
data() {
return {
firstName: 'Foo',
lastName: 'Bar'
}
},
computed: {
fullName: {
// getter
get(){
return this.firstName + ' ' + this.lastName
},
// setter
set(newValue){
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
}
</script>
运行 fullName = ‘John Doe’ 时，setter 会被调用，firstName 和 lastName 也会相应地被更新。
5.7 侦听器watch
Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。当你有一些数据需要随着其它数据变动而变动时，你很容易滥用 watch 。然而，通常更好的做法是使用计算属性而不是命令式的 watch 回调。
类型：{ [key: string]: string | Function | Object | Array }
一个对象，键是需要观察的表达式，值是对应回调函数。值也可以是方法名，或者包含选项的对象。Vue 实例将会在实例化时调用 $watch() ，遍历 watch 对象的每一个 property 。
示例：
<template>
<view>
<input type="text" v-model="word">
</view>
</template>
<script>
export default {
data() {
return {
word: 'word'
}
},
watch: {
// 使用watch来响应数据的变化
word(newVal, oldVal) {
console.log('最新值是：'+newVal,"原来的值是："+ oldVal);
}
},
}
</script>
<script>
export default {
data() {
return {
a: 1,
b: 2,
c: 3,
d: 4,
e: {
f: {
g: 5
}
}
}
},
watch: {
a: function(val, oldVal) {
console.log('new: %s, old: %s', val, oldVal)
},
// 方法名
b: 'someMethod',
// 该回调会在任何被侦听的对象的 property 改变时被调用，不论其被嵌套多深
c: {
handler: function(val, oldVal) { /* ... */ },
deep: true
},
// 该回调将会在侦听开始之后被立即调用
d: {
handler: 'someMethod',
immediate: true
},
// 你可以传入回调数组，它们会被逐一调用
e: [
'handle1',
function handle2(val, oldVal) { /* ... */ },
{
handler: function handle3(val, oldVal) { /* ... */ },
/* ... */
}
],
// watch vm.e.f's value: {g: 5}
'e.f': function(val, oldVal) { /* ... */ }
}
}
</script>
5.8 Class 与 Style 绑定
对象语法
可以传给 v-bind:class 一个对象，实现动态地切换 class。 也可以在对象中传入更多字段来动态切换多个 class。此外，v-bind:class 指令也可以与普通的 class 共存。
<template>
<view>
<!-- class -->
<view class="static" :class="{ active: isActive}">111</view>
<view class="static" :class="{ active: isActive, 'text-danger': hasError }">222</view>
<!-- style -->
<view v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">333</view>
</view>
</template>
<script>
export default {
data() {
return {
isActive: true,
hasError: false,
activeColor:"green",
fontSize:50
}
}
}
</script>
<style>
.static{
color: #2C405A;
}
.active{
background-color: #007AFF;
}
.text-danger{
color: #DD524D;
}
</style>
渲染结果
<view class="static active"></view>
5.9 数组语法
可以把一个数组传给 v-bind:class，以应用一个 class 列表。
<template>
<view>
<!-- class -->
<view class="static" :class="[activeClass,errorClass]">111</view>
<view class="static" v-bind:class="[isActive ? activeClass : '', errorClass]">222</view><!-- 三元表达式 -->
<view class="static" v-bind:class="[{ active: isActive }, errorClass]">333</view>
<!-- style -->
<view v-bind:style="[{ color: activeColor, fontSize: fontSize + 'px' }]">444</view>
</view>
</template>
<script>
export default {
data() {
return {
isActive: true,
activeClass: 'active',
errorClass: 'text-danger',
activeColor:"green",
fontSize:50
}
}
}
</script>
<style>
.static{
font-size:30rpx;
}
.active{
background-color: #007AFF;
}
.text-danger{
font-size:60rpx;
color:#DD524D;
}
</style>
注意：以:style=""这样的方式设置px像素值，其值为实际像素，不会被编译器转换。
此外还可以用 computed 方法生成 class 或者 style 字符串，插入到页面中，举例说明：
<template>
<!-- 支持 -->
<view class="container" :class="computedClassStr"></view>
<view class="container" :class="{active: isActive}"></view>
<!-- 不支持 -->
<view class="container" :class="computedClassObject"></view>
</template>
<script>
export default {
data () {
return {
isActive: true
}
},
computed: {
computedClassStr () {
return this.isActive ? 'active' : ''
},
computedClassObject () {
return { active: this.isActive }
}
}
}
</script>
5.10 组件
页面组件pages
导航栏组件tabBar
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
//"position": "top",
"list": [{
"pagePath": "pages/index/index",
"iconPath": "static/tabs/home.png",
"selectedIconPath": "static/tabs/home-active.png",
"text": "主页"
}, {
"pagePath": "pages/message/message",
"iconPath": "static/tabs/message.png",
"selectedIconPath": "static/tabs/message-active.png",
"text": "信息"
}, {
"pagePath": "pages/contact/contact",
"iconPath": "static/tabs/contact.png",
"selectedIconPath": "static/tabs/contact-active.png",
"text": "联系"
}]
}
六、页面样式与布局
uni-app 的 css 与 web 的 css 基本一致。
uni-app 有 vue 页面和 nvue 页面。vue 页面是 webview 渲染的、app 端的 nvue 页面是原生渲染的。在 nvue 页面里样式比 web 会限制更多。
本文重点介绍 vue 页面的样式注意事项。
尺寸单位
uniapp支持的通用 css 单位包括 px、rpx。
rpx即响应式px，一种根据屏幕宽度自适应的动态单位，以750宽的品目为基准，750rpx恰好为屏幕宽度，屏幕变宽，rpx实际显示效果会等比放大。
全局样式与局部样式
定义在 App.vue 中的样式为全局样式，作用于每一个页面。在 pages 目录下 的 vue 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 App.vue 中相同的选择器。
注意：
App.vue 中通过 @import 语句可以导入外联样式，一样作用于每一个页面。
nvue 页面暂不支持全局样式
使用sass
我们在项目根目录下，可以看到一个 uni-scss文件。
uni-scss 是 uni-ui提供的一套全局样式 ，通过一些简单的类名和sass变量，实现简单的页面布局操作，比如颜色、边距、圆角等。
那么如何使用sass呢？
首先安装sass插件
七、上拉刷新
前面讲过下拉刷新的一种方式，是通过全局配置。
但是我们不推荐，我们希望那个页面有需要就开启，没有需要不要开启。
我们希望下拉刷新了触发一些事件
只需要通过onPullDownRefresh函数即可。在前面页面的生命周期函数中有列举过。
一旦刷新完成之后，我们就可以通过uni.stopPullDownRefresh();关闭
八、下拉加载
我们发现还没有触底就开始说触底了，这是因为有默认的触底距离 。我们可以设置默认触底距离
然后再来测试一下就好了。这里不演示了。
触底之后，我们可以给他加载下一页数据。
暂时写到这里，太累了。
如果这篇博客反响还不错的话，我会尽快完成跟新的 ，感谢大家的鼓励~
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。