bunny笔记| uniapp微信小程序开发

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官网
微信小程序开发官网