前言：掌握HTML+CSS+JavaScript，了解 Vue.js+原生微信程序更容易上手
一、前言
uni-app是基于通用的前端技术栈，采用vue语法+微信小程序api，无额外学习成本。一套代码，多端发布(开发者编写一套代码，可发布到ios、android、H5以及各种小程序等多个平台)。
即使不跨端，uni-app也是更好的小程序开发框架
好处：减少学习成本(个人)，减少开发成本(公司)
二、 搭建开发环境
1、前期准备：安装编辑器HbuilderX(HBuilderX是通用的前端开发工具，但为了uni-app做了特别强化)+微信开发者工具(开发微信小程序必备，建议下载稳定版)
2、创建项目：安装完成后打开HBuilderX，在窗口栏找到：文件=>新建=>项目
创建项目
3、运行，在窗口栏找到：运行，然后根据需求运行到对应平台即可
注意：
1、若是运行到微信开发者工具，第一次运行时需要配置小程序ide的相关路径才能运行成功。（找到微信开发者工具，打开文件所在位置，复制路径）
配置微信开发者工具路径
2、若路径已配置好，第一次运行还报错，可以打开端口号:设置-安全设置-端口号（开启）
三、uni-app核心知识点：
1、开发规范：页面文件遵循Vue单文件组件（SFC）规范。
image.png
2、组件标签靠近小程序规范。
uni开发与普通web开发的区别.png
3、接口能力（JS API）靠近微信小程序规范。
接口能力（JS API）靠近微信小程序规范，但需要把前缀wx换成uni，vue开发不可以直接api获取手机原生功能，而uni-app可以直接使用uni前缀的api获取，如获取当前手机的网络类型：
image.png
4、数据绑定及事件处理同Vue.js规范，同时补充了App及页面的生命周期。
5、为兼容多端运行，建议使用flex布局。
uni-app特色：
1、条件编译：
条件编译.png
2、App端的Nvue（native vue）开发
Nvue内置了weex的渲染引擎，在Nvue中我们既可以使用weex的组件和api，也可以使用uni-app的组件和api。
3、HTML5+引擎
HTML5+引擎：可以帮助我们在app端直接调用原生插件，含大量的api方法。（只能在App端使用，在H5和微信小程序端不可用。）
4、uni-app中的数据绑定
uni-app中的数据绑定绝大部分与Vue一致
<template>
<!-- 1、模版语法 -->
<!-- 2、数据绑定 -->
<!-- 3、条件判断 :判断某一块元素是否需要渲染-->
<!-- 4、列表渲染 :通过一个数组来渲染列表-->
<!-- 5、基础组件的使用 :官网=>组件-->
<!-- 6、自定义组件的使用（简单使用） -->
<!-- 7、基础api的用法 -->
<!-- 8、条件编译 -->
<!-- 9、页面布局 -->
<view>
<!-- <view class="content" :class="className" @click="open"> -->
<view class="content" v-bind:class="className" v-on:click="open">
{{title}}
</view>
<!-- <view>{{show?'条件判断为真时显示该内容111':'条件判断为假时显示该内容000'}}</view> -->
<view v-if="show">条件判断为真时显示该内容111</view>
<view v-else>条件判断为假时显示该内容000</view>
<button type="default" @click="show=!show">切换内容</button>
<view>
<view v-for="(item,index) in arr">{{item}}-{{index}}</view>
<view v-for="(item,value) in arr1">{{item}}-{{value}}</view>
</view>
<view hover-class="active1"> <!-- div -->
<text>11111</text> <!-- span -->
</view>
<!-- 自定义组件 -->
<btn color="blue" @change='change'>插入组件中插槽的内容</btn>
<movable-area style="height:100px;width: 100px;border: 1px solid red;">
<movable-view>1212</movable-view>
</movable-area>
</view>
</template>
<script>
import btn from '@/componment/btn/btn.vue'
export default {
components:{
btn
},
data() {//初始化数据
return {
title: '我是一个初始化值',
className: 'active',
show: false,
arr:['uni-app','vue','html'],
arr1:{
key1:'value1',
key2:'value2',
key3:'value3'
}
}
},
onLoad() {
// 两秒之后将tiele的值变为“hello uni-app”
setTimeout(()=>{
/* 小程序“this.setData({
title:'hello uni-app',
}) */
this.title = 'hello uni-app';
},2000)
},
methods: {//自定义的事件、方法
open () {
this.title = '啊啊啊我被点击了'
},
change (e) {
console.log('我是当前页面的事件，我返回了'+e);
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.active1{
border: 1px solid red;
}
</style>
5、condition启动模式
condition启动模式配置，仅在开发期间生效，用于模拟直达页面的场景。如：小程序转发后，用户点击打开的页面。
image.png
image.png
6、组件
uniapp 对比 vue
view ------ div
text ------ span
image ------ img
其他标签基本一致，详情查看官网
7、nuiapp中样式以及sass的使用
1、rpx是响应式的px,是一种根据屏幕宽度自适应的动态单位。一750宽的屏幕为基准，750rpx恰好为屏幕宽度。屏幕越宽，rpx的实际效果会等比放大。
2、使用@import语句可以导入外联样式表。
3、支持常用的选择器(element、class、id等），注意：uni-app中不能使用通配符选择器*.
4、在App.vue中的样式一般为全局样式。
5、uni-app支持使用的字体图标，使用方式与普通web项目相同，需注意：
①字体文件小于40kb，uni-app会自动将其转化为base64格式。
②字体文件大于40kb，需要开发者自己转换，否则使用将不生效。
③字体文件的引用路径推荐使用~@开头的绝对路径：
@font-face{
font-family:test1-icon;
src:usl('~@/static/iconfont.ttf');
}
6、scss/sass的使用：工具-插件安装-找到之后直接安装
8、uni-app中的数据绑定/事件绑定：与vue一模一样
9、uni-app的生命周期
生命周期：一个对象从创建、运行到销毁的整个过程。
生命周期函数：在生命周期的每个阶段都会伴随着对应函数的触发，这些函数就称为生命周期函数。
uni-app支持如下应用生命周期函数：
uni-app的生命周期函数
uni-app支持的页面生命周期函数：
uni-app支持的页面生命周期函数
网友评论