uni-app开发

---

环境部署

HBuilderX

网址:https://www.dcloud.io/hbuilderx.html

uni-app开发编译必须HBuilderX

安装最新版本，旧版本直接删除即可。编译的时候版本不一致会出现问题

安装包下载App版本

软件的安装包解压即可。路径不要放在系统盘

Dcloud注册登录

后续下载插件，打包APK(安卓的APP安装包)。必须要注册并邮箱认证，注册后，会发送一个邮箱到填写注册邮箱。到邮箱里点击邮箱的链接，才可以注册成功

安装插件

项目开发过程中编译过程中，需要使用到的一些插件

内置浏览器 方便一边开发一边查看效果

sass编译 项目包中有sass文件需要安装 uni-ui组件库里有sass文件

Prettier 格式化插件

创建项目包

微信开发者工具配置好端口后，关闭微信开发者工具

在HBuilder中配置微信开发者工具的运行环境，使用微信开发者工具的根目录路径

模拟器手机端

安装安卓模拟器 在Hbuilder中配置模拟器的运行环境 adb.exe 然后通过安卓模拟器打开项目

*在后续的学习开发中，只使用H5浏览器查看效果。项目案例整体完成之后，再运行

框架语法学习

---

项目包结构目录

组件

vue的单文件组件

普通组件 是作为页面的一部分 通常放在components文件夹下

• 在vue中使用组件 需要先引入=>注册=>调用
• uni-app对应组件，加载机制easycom。默认会加载componts/组件名称/组件名称.vue 直接使用组件 首字母小写和中划线

页面组件 作为完整的页面或者功能展示使用。pages文件夹

• 页面组件有两层结构 index.vue /pages/index/index.vue

• 创建一个新的页面 鼠标右键pages文件夹 新建页面(P)

  

• pages.json 配置的第一个页面，会默认加载访问

路由机制

uni-app使用了小程序的路由加载方式

• 栈式导航 返回按钮
  • 组件标签跳转
  • 编程式跳转
• 标签导航 底部tab栏导航

生命周期函数

在整个应用，页面，组件使用过程中，从它开始到结束的整个过程。

uni-app的生命周期分为三大类：

• 应用周期

  onLaunch 首次加载

  onShow 应用显示时 应用在前台显示

  onHide 应用隐藏时 应用放到后台中 onShow和onHide之间的时间区间就是用户的使用时间

• 页面周期 类似微信小程序

  onLoad 监听页面加载 接收路由参数作为形参传入

  onReachBottom 触底加载 列表的翻页效果

  onPullDownRefresh 下拉刷新 加载最新数据

  onPageScroll 监听页面滚动 获取到滚动位置和距离 回到顶部按钮

• 组件周期 vue单文件组件 组件的生命周期和vue是一致的

  创建->挂载->更新->销毁

  create->mounted->updated->destroyed

  mounted发送请求

底部标签导航

实现思路：

1. 获取图标 iconfont 获取小图标
2. 图标存放
3. 创建多个pages页面
4. 配置导航路径

实现过程

1. 把下载好的图片进行命名放入项目包的static目录

2.建立多个pages页面

3.配置pages.json文件

{
	"pages": [
		//pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
		    "path" : "pages/wx/wx",//页面路径
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "",
		        "enablePullDownRefresh": false
		    }
		    
		},
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		},
		{
		    "path" : "pages/details/details",
		    "style" :                                                                                    
		    {
		        "navigationBarTitleText": "",
		        "enablePullDownRefresh": false
		    }
		    
		}    
        ,{
            "path" : "pages/txl/txl",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/fx/fx",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/user/user",
            "style" :                                                                                    
            {
                "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
	    "color": "#7A7E83",
	    "selectedColor": "#3cc51f",
	    "borderStyle": "black",
	    "backgroundColor": "#ffffff",
	    "list": [{
			// 要与页面路径一致
	        "pagePath": "pages/wx/wx", 
	        "iconPath": "/static/icon/wx.png",
	        "selectedIconPath": "/static/icon/wx_hl.png",
	        "text": "微信"
	    }, {
	        "pagePath": "pages/txl/txl",
	        "iconPath": "/static/icon/txl.png",
	        "selectedIconPath": "/static/icon/txl_hl.png",
	        "text": "通讯录"
	    },
		{
		    "pagePath": "pages/fx/fx",
		    "iconPath": "/static/icon/fx.png",
		    "selectedIconPath": "/static/icon/fx_hl.png",
		    "text": "通讯录"
		},
		{
		    "pagePath": "pages/user/user",
		    "iconPath": "/static/icon/user.png",
		    "selectedIconPath": "/static/icon/user_hl.png",
		    "text": "我"
		}
		]
	}
}

后续的学习需要复习的是：

1.Vue的基础语法 插值 属性绑定：时间绑定 options配置 data methods compouted

2.路由学会标签跳转 和编程跳转