特点: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 插件使用
使用插件市场: