uni-app 实例项目开发流程，更新中 ...

一、HBuild 构建项目

二、项目启动运行

• HBuild 启动项目
  
• 微信开发者工具运行
  

三、发行unpackage包

四、上传unpackage包

五、登录微信公众平台

• 修改页面初始路径，扫码进入体验版本
  

六、接口封装

• request 请求封装
  
• API 封装
  
• 导入使用
  

七、pages.json 默认导航配置

{
	"path": "pages/home/index",
	"style": {
		"navigationBarTitleText": "视频中心",	 	// 设置导航标题文字
		"navigationBarBackgroundColor": "#191A1E",	// 设置导航背景颜色
		"navigationBarTextStyle": "white",			// 设置导航标题颜色
		"enablePullDownRefresh": true				// 开启下拉刷新
	}
}

八、pages.json 自定义导航配置

{
	"path": "pages/home/index",
	"style": {
		"navigationStyle": "custom"
	}
},

• App.vue 获取设备状态栏高度
  
• 设置自定义导航
  
• 自定义导航效果
  

九、tabBar配置

十、页面生命周期

onLoad(e) {
	/*
	*	监听页面加载，
	*	该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，
	*	其参数为上个页面传递的数据，参数类型为 Object（用于页面传参）
	*/
}
onShow() {
	/*
	*	监听页面显示
	*	页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面
	*/
}
onReady() {
	/*
	*	监听页面初次渲染完成
	*	此时组件已挂载完成，DOM 树($el)已可用，注意如果渲染速度快，会在页面进入动画完成前触发
	*/
}
onHide() {
	/*
	*	监听页面隐藏
	*/
}
onUnload() {
	/*
	*	监听页面卸载
	*/
}
onResize() {
	/*
	*	监听窗口尺寸变化
	*/
}
onPullDownRefresh() {
	/*
	*	监听用户下拉动作，用于下拉刷新
	*/
	// 开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致
	uni.startPullDownRefresh(OBJECT)
	// 停止当前页面下拉刷新
	uni.stopPullDownRefresh()
}
onReachBottom() {
	/*
	*	页面滚动到底部的事件（不是scroll-view滚到底）
	*	常用于下拉下一页数据
	*/
}
onPageScroll(e) {
	/*
	*	监听页面滚动，参数为Object
	*/
}
onTabItemTap(e) {
	/*
	*	点击 tab 时触发，参数为Object
	*/
}
onShareAppMessage() {
	/*
	*	监听用户点击右上角 - 分享
	*/
}
onAddToFavorites() {
	/*
	*	监听用户点击右上角 - 收藏
	*/
}
onShareTimeline() {
	/*
	*	监听用户点击右上角 - 转发到朋友圈
	*/
}

十一、界面

• 交互反馈

  
  // 显示消息提示框
  uni.showToast(OBJECT)
  
  // 隐藏消息提示框
  uni.hideToast()
  
  // 隐藏 loading 提示框
  uni.hideLoading()
  
  // 显示模态弹窗，可以只有一个确定按钮，也可以同时有确定和取消按钮。类似于一个API整合了 html 中：alert、confirm
  uni.showModal(OBJECT)
  
  // 从底部向上弹出操作菜单
  uni.showActionSheet(OBJECT)
  
  

• 设置TabBar

  
  // 动态设置 tabBar 某一项的内容
  uni.setTabBarItem(OBJECT)
  
  // 动态设置 tabBar 的整体样式
  uni.setTabBarStyle(OBJECT)
  
  // 隐藏 tabBar
  uni.hideTabBar(OBJECT)
  
  // 显示 tabBar
  uni.showTabBar(OBJECT)
  
  // 为 tabBar 某一项的右上角添加文本
  uni.setTabBarBadge(OBJECT)
  
  // 移除 tabBar 某一项右上角的文本
  uni.removeTabBarBadge(OBJECT)
  
  // 显示 tabBar 某一项的右上角的红点
  uni.showTabBarRedDot(OBJECT)
  
  // 隐藏 tabBar 某一项的右上角的红点
  uni.hideTabBarRedDot(OBJECT)
  
  // 监听中间按钮的点击事件
  uni.onTabBarMidButtonTap(CALLBACK)
  
  

• 设置导航条

  
  // 动态设置当前页面的标题。
  uni.setNavigationBarTitle(OBJECT)
  
  // 设置页面导航条颜色。如果需要进入页面就设置颜色，请延迟执行，防止被框架内设置颜色逻辑覆盖
  uni.setNavigationBarColor(OBJECT)
  
  // 在当前页面显示导航条加载动画
  uni.showNavigationBarLoading(OBJECT)
  
  // 在当前页面隐藏导航条加载动画。
  uni.hideNavigationBarLoading(OBJECT)
  
  // 隐藏返回首页按钮
  uni.hideHomeButton(OBJECT)
  
  

• 背景

// 动态设置窗口的背景色
uni.setBackgroundColor(OBJECT)
// 实例：
uni.setBackgroundColor({
    backgroundColor: '#ffffff',
    backgroundColorTop: '#222222',
    backgroundColorBottom: '#333333'
});


// 动态设置下拉背景字体、loading 图的样式
uni.setBackgroundTextStyle(OBJECT)
// 实例：
uni.setBackgroundTextStyle({
  textStyle: 'dark' // 下拉背景字体、loading 图的样式为dark
})

十四、uni-popup

<uni-popup ref="message" type="message">
	<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
</uni-popup>
<script>
	import api from '@/api/index.js'
	export default {
	created() {
		this.msgType = 'error'
		this.messageText = `请输入XXXX~`
		this.$refs.message.open()
	}
</script>