uni-app的使用：
基础部分：
-环境搭建
-页面外观配置
-数据绑定
-生命周期
-组件
-条件注释跨域兼容
-事件
-导航跳转
-组件创建和通讯
开发环境HBuilder X
新建--项目--ui-app --自定义命名--默认模板即可
（1）pages.json文件设置globaStyle全局样式
官网-框架中自行选择设计
"globalStyle": {
"navigationBarTextStyle": "white",//此处仅支持black和white
"navigationBarTitleText":"Bunny-app",//标题
"navigationBarBackgroundColor": "#912CEE",//标题栏背景色
"backgroundColor": "#b4aee8",//窗口背景色
"enablePullDownRefresh": true,//设置下拉框
"backgroundTextStyle":"light"//下拉loading的颜色dark / light
}
(2)在pages下新建一个页面 新建--目录 在该目录下新建一个.vue文件
注意：一定要在pages.json下 把路径加进来。另外，这里我们可以在pages.json文件用h5的方式改变样式
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/message/message",
"style": {
"navigationBarTitleText": "Bunny-app-信息页",
"h5":{
"pullToRefresh":{
"color":"#e4bad4"
}
}
}
},
(3)配置底部的babbar 在 pages.json文件中加入路径 在pages文件目录下新建对应页面的vue文件
"tabBar":{
"color":"#000",
"backgroundColor":"#ecf",
"selectedColor":"red",
"borderStyle":"white",
//"position":"top",
"list": [
{
"text":"首页",
"pagePath":"pages/index/index",
"iconPath":"static/1.jpg",
"selectedIconPath":"static/1.jpg"
},
{
"text":"信息",
"pagePath":"pages/message/message",
"iconPath":"static/1.jpg",
"selectedIconPath":"static/1.jpg"
},
{
"text":"联系",
"pagePath":"pages/contact/contact",
"iconPath":"static/1.jpg",
"selectedIconPath":"static/1.jpg"
}
]
},
"condition":{
"current":0,
"list":[
{
"name":"详情页",
"path":"pages/detail/detail",
"query":"id=80"
}
]
}
}
以信息页举个例子，文件目录pages/message/message.vue
<template>
<view class="mas">wellcome to bunny-shop</view>
</template>
<script>
</script>
<style>
.mas{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
</style>
在浏览器端可以看到如下图所示页面
image.png
同样在微信开发者工具中也可以查看页面效果，此处现实
首页页面
image.png
源码暂且不提供。
小白的小白看这里，教你如何运行
（1）浏览器预览视图
image.png
（2）微信开发者工具预览，这两者之间其实是会有色彩上差异显示的，默认的吧。下载的话：搜索
微信开发者工具下载就好了
image.png
微信小程序的开发的学习后期将继续更新，本次学习先到这里啦。该笔记是后补充的，所以还有些小细节可能没提到，请大家看官网开启学习之路吧。
uniapp官网
微信小程序开发官网
