uni-app

特点：vue的语法 + 小程序的标签和api 

1、css

style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view :style='{color:color}'> </view>

选择器：在 uni-app 中不能使用 * 选择器，page 相当于 body 节点

2、生命周期

uni-app 完整支持 Vue 实例的生命周期，还新增应用生命周期及页面生命周期，即uniapp 对vue 和小程序的生命周期都支持。

• created
• mounted
• undated
• destroyed
• onload
• onshow
• onReady
• onHide
• onUnload

3、globalData

Vue 之前是没有这类概念的，但 uni-app 引入了globalData概念

// app.vue 定义全局变量globalData
<script>
export default {
	// 整个uniapp 项目的生命周期
	onLaunch: function() {
		console.log('App Launch');
	},
	onShow: function() {
		console.log('App Show');
	},
	onHide: function() {
		console.log('App Hide');
	},
	globalData:{
		// 这是全局变量
		nameArr:['迪迦','盖亚','塞罗','泰罗']
	}
};
</script>

// 获取globalData 全局变量
<script>
	let app =  getApp(); 
</script>

4、重构案例

4.1、项目工作环境初始化

uniapp的两种使用方式推荐使用基于HBuilder X的形式，因此在操作之前请先做好其安装工作。

a. 使用HBuilder x新建一个项目

b. 填入项目的基本信息，项目名称根据自身需要自行决定

c. 后续我们将使用HBuilder X进行编码、开发，而小程序开发者工具作为小程序的预览工作；为了将让HBuilder X能够将编译好的小程序代码准确的传给小程序开发者工具，此处我们需要设置小程序工具，以允许小程序开发者工具被其他程序调用：

d. 在HBuilder X中设置运行，以体验执行效果

启动时可能会弹出窗口询问小程序开发者工具的安装位置，如果弹出该窗口，请根据自己电脑上安装的位置选中安装目录，随后点击确定。

最终设置操作完毕，后续我们每次在HBuilder X中修改的代码一经保存，微信小程序开发者工具就会实时更新显示效果。

另外不要忘了给我们的最终输出程序类型做配置：

如果需要其他类型的小程序输出，操作也是如此。

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				// "navigationBarTitleText": "uni-app"
			}
		}
	    ,{
            "path" : "pages/fen/fen",
            "style" :                                                                                    
            {
                // "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/car/car",
            "style" :                                                                                    
            {
                // "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }
            
        }
        ,{
            "path" : "pages/mine/mine",
            "style" :                                                                                    
            {
                // "navigationBarTitleText": "",
                "enablePullDownRefresh": false
            }            
        }
    ],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "顺丰快递",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"tabBar": {
	    "color": "#7A7E83",
	    "selectedColor": "#3cc51f",
	    "borderStyle": "black",
	    "backgroundColor": "#ffffff",
	    "list": [{
	        "pagePath": "pages/index/index",
	        "iconPath": "static/index1.png",
	        "selectedIconPath": "static/index2.png",
	        "text": "首页"
	    }, {
	        "pagePath": "pages/fen/fen",
	        "iconPath": "static/fen1.png",
	        "selectedIconPath": "static/fen2.png",
	        "text": "分类"
	    }, {
	        "pagePath": "pages/car/car",
	        "iconPath": "static/car1.png",
	        "selectedIconPath": "static/car2.png",
	        "text": "购物车"
	    }, {
		    "pagePath": "pages/mine/mine",
		    "iconPath": "static/mine1.png",
		    "selectedIconPath": "static/mine2.png",
		    "text": "我的"
		}
		]
	}
}

项目目录：

5、条件编译

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

语法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾

• #ifdef：if defined 仅在某平台存在
• #ifndef：if not defined 除了某平台均存在
• %PLATFORM%：平台名称

页面的条件编译

<!-- #ifdef H5 -->
	<view class="">
		h5端
	</view>
<!-- #endif -->
		
<!-- #ifdef MP-WEIXIN -->
	<view class="">
		微信端
	</view>
<!-- #endif -->

编译样式的条件

	/* #ifdef H5 */
		.on{
			font-size: 50rpx;
			background: purple;
		}
	/* #endif */

pages.json的条件编译

	// #ifdef H5
		{
	          "path" : "pages/detail/detail",
	          "style" : {}
	      }
	// #endif

static目录的条件编译

6、uniapp 插件使用

使用插件市场：