Uniapp框架使用说明

开发工具

HBuilderX：官方IDE下载地址，下载App开发版（280M左右那个）

是的，你没有看错，只需要这一个工具就可以啦，当然如果需要开发微信小程序的话还需要下载微信开发者工具，快捷传送门

新建项目

使用HBuilderX新建项目：

填写项目名称
填写项目目录地址
选择项目模板，我一般使用自带uni组件的项目模板，根据开发需求也可以使用其他模板

项目结构

一个uni-app工程，默认包含如下目录及文件：

┌─components            uni-app组件目录（官方组件或者第三方插件放置目录）
│  └─comp-a.vue         可复用的a组件（对应的组件。无需引入，直接使用）
│
┌─common                放置公共js文件，图标文件等
│
├─hybrid                存放本地网页的目录
│
├─platforms             存放各平台专用页面的目录
│
├─pages                 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue       index页面
│  └─list
│     └─list.vue        list页面
│
├─static                存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
│
├─wxcomponents          存放小程序组件的目录
│
├─main.js               Vue初始化入口文件
│
├─App.vue               应用配置，用来配置App全局样式以及监听 应用生命周期
│
├─manifest.json         配置应用名称、appid、logo、版本等打包信息
│
└─pages.json            配置页面路由、导航条、选项卡等页面类信息

页面结构

页面文件遵循Vue 单文件组件 (SFC) 规范
每个 .vue文件包含三种类型的顶级语言块 <template>、<script> 和 <style>，还允许添加可选的自定义块：

<template>
  <view class="example">{{ msg }}</view>
</template>

<script>
export default {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

新建了工程，认识了项目的结构和页面结构，我们接下来就开始编码了……

项目开始

1. 新建一个页面

鼠标指在pages目录上，右键选择‘新建页面’，输入页面名称，点击完成，完成页面的新建。
在pages.json文件夹内注册该页面。
在pages.json下添加，navigationBarTitleText为该页面的标题：

    {
		"path": "pages/test/test",
		"style": {
			"navigationBarTitleText": "测试页面"
		}
	}

结果如下：

注意：pages下的第一个页面为启动该应用是显示的页面。

{
	"pages": [{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "uni-ui基础项目"
		}
	}, {
		"path": "pages/test/test",
		"style": {
			"navigationBarTitleText": "测试页面"
		}
	}],
	"globalStyle": {
		"navigationBarTextStyle": "white",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#007AFF",
		"backgroundColor": "#FFFFFF"
	}
}

2. 编写页面

在模板中编写页面结构，控件使用uniapp自带组件，点击查看组件文档。每个组件的使用都有详细的文档说明，这里不赘述，直接查看文档即可。
在<script>中编写js逻辑代码，做交互处理。
在<style>中编写样式，同html样式，一般为了兼容都使用flex布局。

uniapp给我们提供了一个示例项目，用来演示每个组件的使用，所以我们在开发样式过程中，为了方便快捷的完成央视开发，可以直接去示例项目中找到合适的组件复制代码进行相应的样式修改即可。

接口配置地址

接口配置地址在main.js文件中设置：

Vue.prototype.$RequestUrl = 'https://172.10.0.68:8080/';//接口请求地址
Vue.prototype.$successCode = '0';//请求成功code值

接口请求

接口请求需要进行封装，统一应用内的接口请求方式，在封装接口内做统一处理，封装的接口在common/api文件内。

在页面</script>模块内引入定义的接口请求方法：

<script>
import api from '../../common/api/api.js';
export default {
	...
};
</script>

接口请求方法：

			let self = this;//在接口结果处理是需要使用self，不能使用this
			let param = {
				//参数
			};
			api.request({
				requestUrl: this.$RequestUrl,//接口地址
				url: '/login',//接口名称
				method: 'POST',//请求方式 POST或者GET
				data: param,//参数
				header: { 'content-type': 'application/x-www-form-urlencoded' },//请求头
				success: res => {
					if (res.data.errno == self.$successCode) {
						//成功的处理
						self.data=res.data.data;
					} else {
						//失败的处理
					}
				},
				fail() {
					//失败的处理
				},
				complete() {
					//完成的处理
				}
			});

注意：接口请求目前封装了一般请求方式和单文件上传，如需更多可以到common/api中根据需求自行封装。

页面跳转

页面跳转uni.navigateTo(OBJECT)

//在起始页面跳转到test.vue页面并传递参数
let param = {
	id: '1'
};
let paramStr = JSON.stringify(param); // 这里转换成 字符串
uni.navigateTo({
	url: '../../pages/test?paramStr=' + encodeURIComponent(paramStr)
});

//test.vue的onLoad方法中接收数据
onLoad: function(e) {
	var data = JSON.parse(decodeURIComponent(e.paramStr)); // 字符串转对象
	this.id= data.id;
},

重定向uni.redirectTo(OBJECT)，关闭当前页面，跳转到应用内的某个页面。

uni.redirectTo({
    url: 'test?id=1'
});

uni.reLaunch(OBJECT)，关闭所有页面，打开到应用内的某个页面。

uni.reLaunch({
    url: 'test?id=1'
});

uni.switchTab(OBJECT)，跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。

uni.switchTab({
    url: '/pages/index/index'
});

uni.navigateBack(OBJECT)，关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
uni.navigateTo({
    url: 'B?id=1'
});

// 此处是B页面
uni.navigateTo({
    url: 'C?id=1'
});

// 在C页面内 navigateBack，将返回A页面
uni.navigateBack({
    delta: 2
});

回调传参

使用uni.$on，uni.$emit，uni.$off的方式进行页面通讯

// 接收信息的页面
// $on(eventName, callback)  
uni.$on('page-popup', (data) => {  
    console.log('标题：' + data.title)
    console.log('内容：' + data.content)
})  

// 发送信息的页面
// $emit(eventName, data)  
uni.$emit('page-popup', {  
    title: '我是title',  
    content: '我是content'  
});

//结束监听
// $off(eventName, data)  
uni.$off('page-popup',(data) => {  
    console.log('标题：' + data.title)
    console.log('内容：' + data.content)
});

使用Vuex，定义全局变量

在工程目录下新建store/index.js，state中添加变量值，mutations添加变量修改方法。

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const store = new Vuex.Store({
	state: {
		hasLogin: false,//是否登录
		nickname: "", // 暱称
		signature: "", // 签名
		avatar: "", // 头像
	},
	mutations: {
		login(state, val) {
			state.hasLogin = true;
			state.nickname = val.nickName; // 暱称
			state.signature = val.signature // 签名
			state.avatar = val.avatarUrl; // 头像
		},
	
		logout(state) {
			state.hasLogin = false;
			state.nickname = "";
			state.signature= "";
			state.avatar = "/static/logo.png";
		}
	},
	actions: {

	}
})

export default store

在页面<script>模块内内引入vuex。

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	...
};
</script>

获取值，两种方式

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
			
		};
	},
	computed: {
		//方法1，直接使用如下代码声明变量hasLogin
		...mapState(['hasLogin'])
	},
	onShow() {
		//方法1使用变量
		if (!this.hasLogin) {	
		}
		//方法2，使用如下方式获取全局变量
		if (!this.$store.state.hasLogin) {	
		}
	},
	methods: {
	}
};
</script>

修改值

<script>
import { mapState, mapMutations } from 'vuex';
export default {
	data() {
		return {
		};
	},
	computed: {
		...mapState(['hasLogin'])
	},
	onShow() {
	},
	methods: {
		...mapMutations(['login']),
		clickLogin(){
			//登录成功后,调用上面声明的login方法，修改store里面的值
			this.login();
		}
		
	}
};
</script>

使用自定义素材（iconfont图标）

登录https://www.iconfont.cn/，搜索需要的图标，将图标添加购物车，然后将购物车内的图标添加到项目中。
“图标管理” -> “我的项⽬”，选择具体项⽬以后，选择"Unicode"然后点击"点击复制代码"，将内容复制到根目录下common/css/iconfont.css文件内替换，并在url上加上"https:"

@font-face {
  font-family: 'iconfont';  /* project id 1704723 */
  src: url('https//at.alicdn.com/t/font_1704723_0q0i8rnb4nbk.eot');
  src: url('https//at.alicdn.com/t/font_1704723_0q0i8rnb4nbk.eot?#iefix') format('embedded-opentype'),
  url('https//at.alicdn.com/t/font_1704723_0q0i8rnb4nbk.woff2') format('woff2'),
  url('https//at.alicdn.com/t/font_1704723_0q0i8rnb4nbk.woff') format('woff'),
  url('https//at.alicdn.com/t/font_1704723_0q0i8rnb4nbk.ttf') format('truetype'),
  url('https//at.alicdn.com/t/font_1704723_0q0i8rnb4nbk.svg#iconfont') format('svg');
}

添加自定义图标格式如下,例如 delete，将content替换成iconfont上对应的图标代码。

.delete:before {
	content: "\e6f6";
}

使用时直接在class中声明iconfont 和图标自定义名称即可显示。

<view class="iconfont delete"></view>

运行环境判断

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

if(process.env.NODE_ENV === 'development'){
    console.log('开发环境')
}else{
    console.log('生产环境')
}

判断平台
条件编译是用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。
#ifdef：if defined 仅在某平台存在
#ifndef：if not defined 除了某平台均存在
%PLATFORM%：平台名称

// #ifdef H5
    alert("只有h5平台才有alert方法")
// #endif

样式的条件编译必须使用/* 注释*/ 的写法

/*  #ifdef  %PLATFORM%  */
平台特有样式
/*  #endif  */

%PLATFORM% 可取值如下：

值	平台
APP-PLUS	App
APP-PLUS-NVUE	App- nvue
H5	H5
MP-WEIXIN	微信小程序
MP-ALIPAY	支付宝小程序
MP-BAIDU	百度小程序
MP-TOUTIAO	字节跳动小程序
MP-QQ	QQ小程序
MP-360	360小程序
MP	微信小程序/支付宝小程序/百度小程序/字节跳动小程序/QQ小程序/360小程序

兼容小程序分包

由于小程序对发布包大小有限制单包不可以超过2M，分包不可超过8M。所以为了发布功能复杂的小程序需要对工程进行分包处理。

在manifest.json中设置打开分包

    "mp-weixin" : {
        "appid" : "",
        "optimization" : {
            "subPackages" : true
        }
    }

在package.json中设置subPackages分包。
使用方法：
假设支持分包的 uni-app 目录结构如下：


┌─pages               
│  ├─index
│  │  └─index.vue    
│  └─login
│     └─login.vue    
├─pagesA   
│  ├─static
│  └─list
│     └─list.vue 
├─pagesB    
│  ├─static
│  └─detail
│     └─detail.vue  
├─static             
├─main.js       
├─App.vue          
├─manifest.json  
└─pages.json

则需要在 pages.json 中填写

{
    "pages": [{
        "path": "pages/index/index",
        "style": { ...}
    }],
    "subPackages": [{
        "root": "pagesA",
        "pages": [{
            "path": "list/list",
            "style": { ...}
        }]
    }, {
        "root": "pagesB",
        "pages": [{
            "path": "detail/detail",
            "style": { ...}
        }]
    }]
}

Uniapp框架使用说明

目录

开发工具

新建项目

项目结构

页面结构

项目开始

1. 新建一个页面

2. 编写页面

接口配置地址

接口请求

页面跳转

回调传参

使用Vuex，定义全局变量

使用自定义素材（iconfont图标）

运行环境判断

兼容小程序分包

如何使用 JS 判断用户是否处于活跃状态

lightdb秒级增加列和删除列（not null带默认值）

lightdb数据库超时相关控制参数

通过HPA+CronHPA组合应对业务复杂弹性伸缩场景

❤️‍🔥 Solon Cloud Event 新的事务特性与应用

lightdb mysql 8.0兼容之不可见主键

使用 JS 实现在浏览器控制台打印图片 console.image()

基于Ubuntu-22.04安装K8s-v1.28.2实验（四）使用域名访问网站应用

Android PorterDuff.Mode圖形混合處理

Android 動畫——屬性動畫Property Animation

Uniapp框架使用說明

朋友圈日期時間算法實現

Android 動畫——Layout Animations佈局動畫

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結