uni-app入门

uni-app

是一个使用 Vue.js 开发所有前端应用的框架

特点

功能架构图

开发工具

HBuilderX

创建项目

在点击工具栏里的文件 -> 新建 -> 项目：

选择uni-app

运行uni-app

• 浏览器运行
• 真机运行
• 模拟器运行（下载并安装模拟器，mumu （7555），雷电（5555））
  模拟器配置
  
• 在微信开发者工具里运行(首先要下载微信开发者工具，并在微信开发工具，设置中的安全设置服务器端口开启)
  小程序配置
  

目录结构

• package.json 页面配置目录
• main.js程序入口
• App.js根组件
• static静态资源目录
• pages页面存放目录
• components 组件存放目录
• wxcomponents微信专用组件存放目录

index.vue页面分析

• template模板
• script业务逻辑
• style样式

常用组件

• view块元素
• text行内元素
• navigator导航

条件编译

常用条件

#ifdef APP-PLUS APP
#ifdef MP-WEIXIN 微信
#ifdef H5 h5

1. 模板中

写法：

   <!-- #ifdef APP-PLUS -->
         需条件编译的代码  //仅出现在 App 平台下的代码
     <!-- #endif-->

2. 样式中

  /* ifdef APP-PLUS */
         需条件编译的代码  //仅出现在 App 平台下的代码
    /* #endif */

3. 配置中

 //ifdef APP-PLUS ||H5
         "navigationBarTitleText": "uni-app",
   //#endif 

单独配置：

"h5":{},
"app-plus":{}

常用配置

1. 页面配置pages

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",//路径
			"style": {
				"navigationBarTitleText": "uni-app",
				"titleNView":false//隐藏导航条（非小程序）
			}
		}	
    ],

2. globalStyle全局配置

"globalStyle": {
		"navigationBarTextStyle": "black",//导航文字的颜色
		"navigationBarTitleText": "uni-app",//导航标题
		"navigationBarBackgroundColor": "#F8F8F8", //导航背景颜色
		"backgroundColor": "#F8F8F8"//页面背景颜色
	},

更多：https://uniapp.dcloud.io/platformid=%e6%9d%a1%e4%bb%b6%e7%bc%96%e8%af%91

生命周期

应用生命周期

页面生命周期

• onBackPress(e){}监听返回

例子：单击两次退出应用

//监听返回
		onBackPress(e) {
			if(e.from=='backbutton'){
				if(this.num==1){
					uni.showToast({
						title:"再次单击退出"
					})
					this.num++;
					setTimeout(()=>{this.num=1},1000)
				}else if(this.num==2){
					plus.runtime.quit();//对app管用
					
				}
				
			}
		},

应用级生命周期

https://uniapp.dcloud.io/api/lifecycle

内置组件

• view
• text 文本
• selecttable文字长按可选
• image 图片
• navigator 导航
• swiper 幻灯片 swiper-item幻灯片 一页

内置api

网络请求

• uni-request()

界面

• uni.showToast({title:’‘xxxx’}) 提示
• uni.showLoading()加载提示

系统

• uni.getSystemInfo获取系统信息

• uni.getNetworkType 获取网络信息

• uni.onNetworkStatusChange 网络状态发送变化

• https://uniapp.dcloud.io/api/system/network?id=onnetworkstatuschange

plus

http://www.html5plus.org/doc/zh_cn/push.html

• plus.runtime.quit(); 退出 对app管用

拓展组件

uni-swiper-dot幻灯片点

CSS变量

• height: var(–status-bar-height); 系统状态栏高度
• https://uniapp.dcloud.io/frame?id=css%e5%8f%98%e9%87%8f

案例

• 页面事件传参
  uni.$emit("事件名",值) 发送事件
  uni.$on("事件名",e=>{})接收事件
• vuex

根目录新建store文件夹
index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
//导入vue、vuex 使用vuex
const store=new Vuex.Store({
	state:{counter:5},
	mutations:{}
})
//导出
export default store

main.js

import Vue from 'vue'
import App from './App'
import store from './store'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
    ...App,
	store
})
app.$mount()

使用：

<view>{{$store.state.counter}}</view>

• 选择图片、上传图片

upImg(){
				var that = this;
				// 选择本地图像 （相册，相机）
				uni.chooseImage({
				    success: (chooseImageRes) => {
				        const tempFilePaths = chooseImageRes.tempFilePaths;
					// 临时文件地址
					uni.uploadFile({
						url: 'https://www.xxx.com/ajax/file.php', //仅为示例，非真实的接口地址
						filePath: tempFilePaths[0],
						name: 'file',							 
						success: (uploadFileRes) => {
							console.log(uploadFileRes.data);
							// 服务端返回的数据
							that.pic = "http://xxx.com"+JSON.parse(uploadFileRes.data).pic;
								
						}
					});
				    }
				});
			} 

• 分享

share() {
				uni.share({
					provider: "weixin", //微信分享
					scene: "WXSceneSession",//场景
					type: 0,//类型图文
					href: "http://uniapp.dcloud.io/",
					title: "欧诗漫直降300",
					summary: "欧诗漫直降300",
					imageUrl: "https://img-cdn-qiniu.dcloud.net.cn/uniapp/images/uni@2x.png",
					success: function(res) {
						console.log("success:" + JSON.stringify(res));
						uni.showToast({
							title:"分享成功"
						})
					},
					fail: function(err) {
						uni.showToast({
							title:"分享失败"
						})
						console.log("fail:" + JSON.stringify(err));
					}
				});
			}

打包app