[JavaScript知识库]uniapp入门

1.概述

1.uni-app概述

Dcloud是uniapp框架开创者

提供了很多服务开发者的工具，如 HbuilderX =>开发者工具、uniapp=>开发框架

uni-app是一个使用vue.js开发所有前端应用的框架、开发者编写一套代码，可发布到iOS、Android、Web、以及各种小程序、快应用等多个平台

2.为什么要学uni-app

vue语法+微信小程序语法 多端移动端项目

1.uni-app是一个可以使用多端的开源框架，一套代码可以同时生成原生app端、小程序端和h5端等3大平台
2.uni-app对前端开发人员比较友好，学习成本比较低，首先uni-app是基于vue.js的，其次封装的组件和微信小程序的组件语法一致
3.uni-app扩展能力墙，封装了H5+,支持nvue，也迟迟原生Android，ios开发，可以将原有的移动应用和H5应用改成uni-app应用

3.其他多端框架

美团的：mpvue(vue)
WePY是一款让小程序支持组件化开发的框架，通过与预编译的手段让开发者可以选择自己喜欢的风格开发小程序
Taro是由京东 - 凹凸实验室打造的一套遵循React语法规范的多端统一开发框架（react）
react-native（facebook:2015年）多端开发框架（android ios）（react）

2.项目创建

项目创建有两种方式，第一种是通过HBuilderx工具，另一种是使用vue-cli脚手架

vue-cli脚手架创建

vue create -p mydemo

运行项目

项目创建完成后，首先进入项目目录下执行 npm run serve,此时编译的是h5端项目，若需要编译其他终端，停止此服务，执行npm run dev运行即可

npm run dev:%PLATFORM%

PLATFORM平台的意思，如小程序端 npm run dev:mp-weixin

发行项目

npm run build:%PLATFORM%

例如f发行打包h5端

npm run build:h5

平台对照码

3.项目配置pages.json

全局配置和页面配置

1.globalStyle全局外观配置

文件: pages.json文件

globalStyle <===>window,同原生微信小程序全局配置中的window选项用于设置应用的状态栏、导航条、标题、窗口背景色等

"globaStyle": {
    "navigationBarBackgroundColor": "#007AFF",
    "navigationBarTitleText": "app测试",
    "navigationBarTextStyle":"black",
    "navigationStyle": "custom",
    "enablePullDownRefresh": true
}

2.页面配置

文件位置：pages.json

pages ----->{path:‘路径’,style:window},用于设置页面的路由、状态栏、导航条、标题、窗口背景色等

//页面配置项
"pages": [
    //pages 数组中第一项表示应用启动页
    {
        //页面路由
        "path": "pages/index/index",
        //window配置项
        "style": {
            "enablePullDownRefresh": false,
            "navigationStyle": "default"
        }
    },
    {
        //页面路由
        "path": "pages/user/user",
        //window配置项
        "style": {
            "navigationBarTitleText": ""
            "navigationStyle": "default"
        }
    }
]

3.配置tabBar

"tabBar":{
		"backgroundColor":"#999999",
		"selectedColor":"#ff033",
		"color":"black",
		"list":[
			{
				"pagePath":"pages/index/index",
				"text":"首页",
				"iconPath":"./static/images/icon/index.png",
				"selectedIconPath":"./static/images/icon/indexFull.png"
			},
			{
				"pagePath":"pages/user/user",
				"text":"我的",
				"iconPath":"./static/images/icon/my.png",
				"selectedIconPath":"./static/images/icon/myFull.png"
			}
		]
	}

4,uniapp基础语法

uniapp语法：vue语法（数据绑定 列表渲染 条件渲染 事件绑定等）+微信小程序语法（组件api生命周期 页面事件函数等）

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JI70RvAp-1640961197920)(C:\Users\xwl\AppData\Roaming\Typora\typora-user-images\image-20211231164140531.png)]

1.数据绑定

使用vue语法，标签属性绑定：v-bind | : 标签内容绑定: {{}}

2.条件渲染

使用vue语法 v-if v-else-if v-else

3.列表渲染

使用vue语法 v-for ：key

1.在H5平台使用v-for循环整数和其他平台存在差异，如v-for="(item,index) in 10"中，在H5平台item从1开始，其他平台从0开始，可使用第二个参数index来保持一致

<view class="" v-for="(item,index) in 10" :key="index">
		下标是{{index}} --值是{{item}}
	</view>

2.在非H5平台循环对象时不支持第三个参数,如 v-for="(value,name,index) in object"中，index参数是不支持的

<view class="" v-for="(value,name,index) in object" :key="index">
		下标是{{index}} --- name是{{name}}---value是{{value}}
</view>

object:{id:1001,name:'张三',age:20}

4.事件绑定

使用vue语法， v-on | @

不能使用微信小程序中bind或者是catch绑定事件，但是可以使用微信小程序事件类型 如@tap

<button type="default" @click="two">vueClick</button>
<button type="default" @tap="one">wxClick</button>

5.计算属性

computed 语法同vue

6.静态资源引入使用

模板：

<!-- 绝对路径，/static指根目录下的static目录，在cli项目中/static指src目录下的static木露露 -->
	<!-- @指向项目根目录 cli项目中指向src目录 -->
	<image src="/static/images/0.jpg" mode=""></image>
	<image src="@/static/images/1.jpg" mode=""></image>
	<image src="../../static/images/1.jpg" mode=""></image>

js:

//绝对路径 @指向项目跟目录，在cli项目中@指向src目录
import add from '@/common/add.js'
//相对路径
import add from '../../common/add.js'
//注意：js文件不支持使用/开头的方式引入

css:

/*绝对路径*/ @指向项目跟目录，在cli项目中@指向src目录
@import url('/common/uni.css')
@import url('@/common/uni.css')
/*相对路径*/
@import url('../../common/uni.css')
//也支持小程序语法
@import '相对路径'

7.样式配置

1.uni-app支持的通用css单位包括px、rpx，多端开发建议使用rpx

2.px转rpx工具自动转换设置

工具栏-设置-编辑器设置–开启px转换rpx选项，根据实际设计稿宽度，设置转换比例

3.uniapp中支持scss/sass使用

? 工具-插件按章-scss/sass编译插件安装

4.uniapp中支持less使用

? 工具-插件安装-less编译插件安装

<style lang="scss" scoped>
	$width:100%;
	$heigth:300rpx;
	$border:1rpx solid blue;
	.box {
		width: @width;
		height: @height;
		border: @border;
	}
</style>

5.生命周期

uniapp中完全支持vue（组件声明周期）和小程序的生命周期函数（应用声明周期和页面生命周期）

uniapp生命周期包括：应用生命周期、页面生命周期和组件生命周期

使用规则如下：

1.在app.vue中可以使用小程序的应用级别的生命周期函数

2.在路由页面组件（pages目录）中可以使用小程序的页面生命周期和vue的组件生命周期函数

3.在componsent目录中的组件页面中只能使用vue的生命周期函数不能使用小程序的页面生命周期函数

6.组件通信

1.父传子

属性传递：props
<Son :datas="object"></Son>

object: {
			name:'zhangsan',
			age:20
		}

2.子传父

事件传递： this.$emit(’事件名’,‘数据’)

子组件
pushData() {
	this.$emit('sonData',this.arr)
}

父组件
setData(data) {
	console.log(data)
	this.arr = data
}

我是父组件 {{arr[0] ? arr[0]: '没有数据'}}
<Son :datas="object" @sonData="setData"></Son>

3.兄弟之间组件传值

事件总线 $emit() $on

新建 utiles/bus.js

import Vue from 'vue'
expect default new Vue()

组件1

sendData() {
	Bus.$emit('dataToOtherCom',this.ohter)
	console.log(1)
}

组件2

Bus.$on('dataToOtherCom',(msg)=>{
	console.log(msg)
	this.ohter = msg
})

4.uni-app页面通讯

unniapp页面通讯语法用于兄弟组件传值，本质是对vue中$emit $on $once $off等通信语法的封装

如果项目中使用vue原生语法就不用使用uniapp，两者选其一即可

uni.$emit() 触发全局的自定义事件，附加参数都会传给监听器回调
uni.$on() 监听全局自定以事件 事件可有uni.$emit触发，回调函数会接受所有传入事件触发函数的额外参数
uni.$once() 全局值监听一次
uni.$off() 移出监听事件

com1
sendUni() {
	uni.$emit('sendUni','兄弟组件传值')
}
com2() {
    created() {
        uni.$on('sendUni',(msg)=>{
            console.log(msg)
        })
        uni.$once('sendUni',(msg)=>{
            cosole.log(msg)
        })
    },
     destroyed() {
         //取消事件监听 避免内存泄漏
         uni.$off('sendUni')
     }
}

7.全局变量

1.公共模块（模块化）

定义一个专用的模块，用来组织和挂你这些全局的变量，在需要的页面引入，这种方式维护起来比较方便，缺点是每次都要引入

utils/config.js

let url = 'https://route.showapi.com'
export default url

son.vue

import url from '../utils/config'
console.log(url)

2.挂载Vue.prototype

将一些使用频率比较高的常量或者方法，直接扩展到Vue.prototype上，每个对象都会继承下来

这种方式，只需要在main.js中定义好即可在页面中直接调用

import URL from './utils/config.js'
Vue.prototype.$URL = URL

console.log(this.$URL)

3.globalData

uni-app引入了alobalData概念，并且在包括H5、App等平添都实现了

globalData是一种比较简单的全局变量使用方式

微信小程序语法 在app.vue中定义
globalData: {
    name: '张三'
}

使用

let app = getApp()
console.log(app.globalData.name)

4.本地缓存

语法同微信小程序 将wx开头替换成uni开头

存储数据
获取数据
根据key删除数据
清除所有缓存数据
获取当前缓存信息

5.Vuex

Vuex是一个专门为Vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以响应的规则保证状态以一种可预测的方式发生变化，一般用于大型项目的开发，uniapp中内置vuex无需安装

1.创建仓库
新建 store/index.js文件
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        age:20
    },
    mutations: {
        change(state,num) {
            stat.age+=num
        }
    }
})

2.将仓库store挂载到prototype
main.js文件
import store from '../store/index.js'
vue.prototype.$store = store

3.在页面文件中使用store
import {mapState} from 'vuex'
computed: {
    ...mapState['age']
}
methods: {
    changeAge() {
        this.$store.commit('change',10)
    }
}

8.uniapp路由

uin-app页面路由为框架统一管理，开发者需要在pages.json里配置每个路由页面的路径及页面样式。类似小程序在app.json中配置也i按路由一样，所以uni-app的路由用法与Vue Router不同

uni-app有两种页面路由跳转方式：使用navigator组件跳转、调用API跳转。语法完全同微信小程序语法，通过get方式传值，在目标页面的onLoad生命周期函数中获取页面传递的参数

组件方式
<navigator url="../globall/global>name=zhangsan">跳转到global</navigator>

api方式
goGlobal() {
    uni.navigateTo({
        url: '../global/global？age=20'
    })
}

9.运行环境判断

uni-app可通过process.env.NODE_ENV判断当前环境是开发环境还是生产环境，一般用于连接测试服务器或生产服务器的动态切换（切换到是业务请求地址）

在HBuilderX中，点击运行编译出来的代码是开发环境，点击发行编译出来的代码是生产环境

使用语法

utils/config.js

if(process.env.NODE_ENV==='development') {
    URL = 'http://localhost:3000'
}ellse {
    URL = 'https://api....'
}

10.平台判断

有效解决平台（platform）兼容性问题

1.编译期判断

编译期判断，即条件编译，不同平台在编译出包后已经是不同的代码

条件编译使用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同的平台
条件编译是利用注释实现的，在不同语法里注释的写法不一样，js使用 //注释 css使用/* vue/nvue模板里使用<!---->

使用语法

<template>
	<!--#iddef H5 -->
    <h1>
        我是h1
    </h1>
    <!--#endif -->
</template>

// #ifdef H5
alert('hello')
// #endif

.box {
    /*#ifdef H5*/
    color: red;
    /* #endif */
    /*#ifdef MP-WEIXIN*/
    color:blue;
    /*#endif*/
}

2.运行期判断

更多的是获取用户的设备信息，处理不同平台的业务逻辑兼容性建议使用条件编译

uni.getSystemInfoSync().platform   wx.getSystemInfoSync()
用法
switch(uni.getSustemInfoSync().platform) {
    case 'android':
        console.log('运行Android上')
        break
    case 'ios': 
          console.log('运行ios上')
          break
    default: 
          console.log('运行在开发者工具上')
          break
}

11.网络请求

1.数据请求

语法：

uni.request()方法  基本使用参数同微信小程序中wx.request()方法

注意事项：

小程序端：
	不存在跨域问题，注意配置域名白名单和校验ssl证书问题
app端：
	不存在跨域问题，注意android和ios端校验ssl整数问题
h5端：
	存在跨域问题，需要解决
     内置模拟器（不存在跨域）

同源策略

同域名 同协议 同端口号
端口号：区分服务
一般跨域问题发生在浏览器端 为了防止恶意攻击 安全
csfr：跨站点请求伪造攻击 sql注入 js脚本
http
https http+ssl(安全套接字) 非对称加密方式
ssl证书：
优点：更安全
缺点：速度稍慢

解决跨域方案：

主流的方案：
第一种：前端配置代理
	本地测试没有问题 上线 代理不会打包 需要服务端做转发配置
第二种：服务端允许跨域
	前端不需要做任何操作更改正常请求就可以：需要服务设置允许跨域即可
    服务端解决跨域的思路思路都一样，只是根据不同的语言配置语法可能不相同
 服务端与服务端通信不存在跨域问题

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-56Sv2CV5-1640967074579)(C:\Users\xwl\AppData\Roaming\Typora\typora-user-images\image-20211231234930110.png)]

解决跨域

1.配置代理

1.首先在项目根目录中manifest.json文件中找到源码视图，再次添加h5跨域配置项
"h5": {
    "devServer": {
        "proxy": {
            "/api": {
                "target": "http://localhost:3000"
            }
        }
    }
}
2.重启uniapp服务，清除浏览器缓存
3.配置完毕后重启项目，如果欸有效果清除浏览器缓存再重试
proxyHttp() {
    //根据不同的平台重写请求地址
    let url = 'http://localhost:3000/api/getcate'
    // #ifdef h5
    url='/api/getcate'
    //#endif
    uni.request({
        url,
        success:res=>{console.log(res)},
        fail:err=>{console.log(err)}
    })
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9QlZ2PSN-1640967074587)(C:\Users\xwl\AppData\Roaming\Typora\typora-user-images\image-20211231234947586.png)]

2.服务端允许跨域

1.放开服务端项目的入口文件app.js中以下注释代码即可
使用cors模块实现跨域资源共享
//解决跨域
const cors = require('cors')
app.use(cors()) //解决跨域问题 默认允许所有请求都能访问后端接口
2.注释或者删除uniapp中配置的代理代码片段
3.重新uniapp服务，清除浏览器缓存
Http() {
    // 正常请求即可 地址不需要处理
    uni.request({
        url: 'http://localhost:3000/api/getcate',
        success:res=>{console.log(res)},
        fail:err=>{console.log(err)}
    })
}

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HzuVFWKZ-1640967074591)(C:\Users\xwl\AppData\Roaming\Typora\typora-user-images\image-20211231235004560.png)]

12.uView组件库

uView是uni-app生态专用的UI框架

1.安装

第一种方式是npm安装

第二种是直接下载zip压缩包（建议使用），能更方便阅读源码，更好适配多端

npm install uview-ui

2.配置

uView依赖SCSS，必须安装此插件，否则无法正常运行

1.引入uView主js库

在项目根目录main.js中，引入并使用uView的js库，注意要放在import Vue之后

import uView from 'uview-ui'
Vue.use(uView)

2.再引入uView的全局SCSS主题文件

在项目根目录的uni.scss中引入

@import "uview-ui/theme.scss"

3.引入uView基础样式

注意：在App.vue中首行的位置引入，注意个style标签加入lang=”scss“属性

<style lang="scss">
	@import "uview-ui/index.scss"
</style>

4.配置eaasycom组件模式

此配置需要在项目根目录的pages.json中进行

uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完成后，需要重启HX或重新编译项目才能正常使用uView的功能

请确保pages.json中只有一个easycom字段，否则自行合并多个引入规则

{
    "easycom": {
        "^u-(.*)": "@/uview-ui/components/u-$1.vue"
    },
 	"pages": {
        ...
    }
}

什么是easycom模式

由于uView使用easycom模式，无需引入组件即可直接使用，但是此功能需要HbuilderX2.5.5及以上版本才支持。easycom打包的时候是按需引入的，您可以放心引入uView的整个组件库，发布打包时会自动剔除没有使用的组件（注：调用的时候仍然是全部引入的）

3.快速上手

<u-icon name="photo" color="#2979ff" size="28"></u-icon>