01、(一)关于app开发的准备工作和环境的搭建

App环境的搭建和准备工作

01、App开发的发展

• 原生安卓 （java） + kotlin(语言) + swing

  • 面板plane
  • layout
  • 按钮

• 苹果 （Objectc）

• PhoneGap – Javascript—调用安卓的底层 +苹果

• Cordova + Ionic

• 微信小程序

• HTML5+(浏览器+webpack+vue|+PhoneGap/Cordova )

• uniapp

  • 支持APP
  • 微信小程序

02、Uniapp的认识

官网：https://uniapp.dcloud.io/

uni-app 是一个使用 Vue.js (opens new window)开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。

03、UniApp的工具的安装

工具下载：https://www.dcloud.io/hbuilderx.html

1：安装一些插件：

• 建议大家全部安装

2：插件市场：

• uniapp提供了很多的插件和现成的模板。

• https://ext.dcloud.net.cn/?cat1=1&cat2=11

04、如何认识UniApp的插件市场

https://ext.dcloud.net.cn/?cat1=1&cat2=11

运行到浏览器

05、创建第一个UniApp项目

运行项目

在浏览器打开如下：使用F12运行，选择手机模式，并且100%

06、认识UniApp项目的目录结构

官方文档：https://uniapp.dcloud.io/collocation/pages.html

• uni.scss 这个主体颜色，可以删除但是不建议不要删除

• pages.json文件，是核心文件

  pages.json` 文件用来对 uni-app 进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。

• main.js文件：是项目编译的入口文件。主要的作用是用来指定主页的入口以及，vuejs的初始化和导入和第三方组将的导入。比如：uview组件进行导入。自定义组件全局导入。

• App.vue : 主页，引导页，也就未来所有页面的入口页面。也就是说pages里的页面，必须要App.vue到内部。也App.vue是App启动加载的页面。如果你想做一些初始化事情比如：进入App就执行一些业务。

  • 比如：广告宣传页
  • 比如：App展示广告页
  • 这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData

• manifest.json ： 发布部署的文件（指定当app的名字，版本，以及生成图标）

  • 默认情况下：在开发阶段，所有的退出提示都是：hbuilder 提示是否离开。
  • 在发布的时候，你指定app名字的时候，这个名字自动修改和修复。

• index.html：开发阶段的欢迎页面。可以用来做欢迎页面。

• static ： 静态页面。css/ js/公共的图片

  • 注意：如果你想要你静态页面在开发阶段，能够编译微信小程序上，注意你的项目名字路径，千万不要出现括号。一句话：不要目录中出现特殊字符串

• pages：

  • login
  • order
  • reg
  • hotel
  • my
  • 页面组件定义位置，在uniapp新建页面以后会自动注册到pages.json文件中。
  • 要注意一个细节：新建的pages的页面组件，放在pages.json的pages的第一个项，会自动成为首页。

• components: (自定义)

  • 自己定义的组件

• uni_modules

  • 第三方的组件

• unpackage

  • 在开发阶段编译打包的目录，微信小程序就

• service/api

  • 调用接口

• uniCloud-aliyun

  • https://uniapp.dcloud.io/uniCloud/

  • 注册地址：https://unicloud.dcloud.net.cn/

  • 云开发

  • 云存储

  • 云数据库

  • 云缓存

07、UniApp手机的TabBar的设置

官网查看配置：https://uniapp.dcloud.io/collocation/pages.html#tabbar

配置代码：

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	    ,{
            "path" : "pages/login/login",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		/*字体颜色*/
		"navigationBarTextStyle": "white",
		/*旅游项目名*/
		"navigationBarTitleText": "我的项目",
		"navigationBarBackgroundColor": "#007AFF",
		"backgroundColor": "#007AFF"
	},
	"tabBar": {
		"color": "#7A7E83",
		"selectedColor": "#3cc51f",
		"borderStyle": "black",
		"backgroundColor": "#ffffff",
		"list": [{
			"pagePath": "pages/index/index",
			"text": "首页"
		}, {
			"pagePath": "pages/login/login",
			"text": "消息"
		}, {
			"pagePath": "pages/reg/reg",
			"text": "我的"
		}]
	}
	
	
}

• 在开发的时候多看官方文档
• pagePath 的路径必须要真实存在在pages中。否则在小程序编译通不过
• 图标的设置建议正方面
• tabar不建议操作5个

01、如何设置tabbar的小图标

设置网站：https://www.iconfont.cn/

1：选择一个图标

2：设置图片的大小和颜色

注意建议是：正反面不同颜色，尺寸：24像素

将图片放在static目录下，最好新建一个文件夹

pages.json中代码

"tabBar": {
			"color": "#7A7E83",
			"selectedColor": "#3cc51f",
			"borderStyle": "black",
			"backgroundColor": "#ffffff",
			"list": [{
				"pagePath": "pages/index/index",
				"iconPath":"static/tabBar/index.png",
				"selectedIconPath":"static/tabBar/selectedIndex.png",
				"text": "首页"
			}, {
				"pagePath": "pages/login/index",
				"iconPath":"static/tabBar/content.png",
				"selectedIconPath":"./static/tabBar/selectedContent.png",
				"text": "消息"
			}, {
				"pagePath": "pages/reg/reg",
				"iconPath":"static/tabBar/info.png",
				"selectedIconPath":"static/tabBar/selectedInfo.png",
				"text": "我的"
			}]
		}

08、UniApp的App.vue页面

<script>
	export default {
	    // 全局数据 + 缓存
        globalData: { 
			text: 'text123'  
		},
		
        // 公共函数，但是不建议在这里，而是使用模块化
		methods:{
			isEmpty(str){
				return str == null;
			}
		},
		
        // 这些App的钩子函数
		onLaunch: function() {
			console.log('App Launch')
		},
        
        // Vue的钩子函数
		onShow: function() {
			console.log('App Show')
		},
        // APP钩子函数
		onHide: function() {
			console.log('App Hide')
		}
	}
</script>

<style>
	/*每个页面公共css */
	/*@import './common/uni.css';*/

</style>

App.vue : 主页，引导页，也就未来所有页面的入口页面。也就是说pages里的页面，必须要App.vue到内部。也App.vue是App启动加载的页面。如果你想做一些初始化事情比如：进入App就执行一些业务。

• 比如：广告宣传页
• 比如：App展示广告页
• 这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData
• 也自定函数

后续会提供一个方法:

getApp()方法

可以调用App.vue的所有属性和方法，

const app = getApp();
console.log(app.globalData.text);
console.log(app.isEmpty("xxxx")) === false