uniapp中pages.json相关介绍、数据绑定及生命周期-蒲公英云

pages.json中相关代码介绍

uniapp中tabBar 的设置：
在pages.json中设置tabBar “ 点击（查看相关用法）”
相关tabBar代码：

"tabBar": {
    "color": "#7A7E83",
    "selectedColor": "#3cc51f",
    "borderStyle": "black",
    "backgroundColor": "#ffffff",
    "list": [{
        "pagePath": "pages/component/index",
        "iconPath": "static/image/icon_component.png",
        "selectedIconPath": "static/image/icon_component_HL.png",
        "text": "组件"
    }, {
        "pagePath": "pages/API/index",
        "iconPath": "static/image/icon_API.png",
        "selectedIconPath": "static/image/icon_API_HL.png",
        "text": "接口"
    }]
}

tabBar 中的list数组顺序的调整可以改变显示的位置
pages.json代码中的navigationBarTitleText表示为：若首页未设置title则默认显示为uni-app

"globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "uni-app",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }

在pages.json中pages数组中第一项表示应用启动页

"pages": [ 
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页"
            }
        }
        ,{
                    "path" : "pages/news/news",
                    "style" : {
                        "navigationBarTitleText": "新闻"
                    }
            }
            ,{
                    "path" : "pages/test/test",
                    "style" : {
                        "navigationBarTitleText": "测试"
                    }
            }
    ],

当前这段pages数组的代码启动页为首页，若想要将新闻页作为启动页只需将新闻页与首页交换位置
在这里插入图片描述
结论：通过调整pages的顺序可以控制初始化显示的位置
main.js是uni-app的入口文件
App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件,是一个应用配置，用来配置App的全局样式以及用来监听应用的生命周期
可以在vue文件中的onLoad函数中定义uni方法

onLoad() {
            // uni.$on("testEmit",(rel)=>{
            //     console.log(rel)
            // });
            uni.$once("testEmit",(rel)=>{
                console.log(rel)//只会被调用一次
            })
        },

数据绑定

小程序中可以写为<view :class="box{ {1}}">test</view>可以运行但在HX中会提示错误
uni中写为<view :class="'box'+1">test</view>

<view :style="{width:'100px',height:'100px',backgroundcolor:'red'}">

以上代码在微信开发者工具中查看为：
在这里插入图片描述
绑定多个class 以数组的形式（注意外用双引则内用单引）

<view :class="['box11','box22']"></view>

遍历数组

（在script中定义names数组）

<view>
        <view v-for="(item,index) in names" :key="index">
            {
   {item}}
        </view>
    </view>

动态的切换class（样式可自行添加）

<view>
            <view 
                v-for="(item,index) in names" 
              :key="index"
                :class="{box33:index===cu}"
                @click=="setIndexNum(index)"
                >
                {
   {item}}
            </view>
        </view>

script中的代码段：

methods: {//点击切换
    setIndexNum(index){
        this.cu=index;
}

v-show=”flase”相当于display:none 属性
v-if=”flase”相当于删除该元素

生命周期

应用生命周期

在App.vue文件中代码如下：

<script>
    // 只能在App.vue里监听应用的生命周期
    export default {
        onLaunch: function() {
            console.log('初始化完成时触发(全局只触发一次)')
        },
        onShow: function() {
            console.log('当 uni-app 启动，或从后台进入前台显示')
        },
        onHide: function() {
            console.log('当 uni-app 从前台进入后台')
        }
    }
</script>

onLaunch
onLaunch中option用来获取进入小程序或退出小程序的场景值可在网页打印处（console）查看

<script>
    export default {
        onLaunch: function(option) {
            console.log('App Launch');
            console.log(option)
        },
        onShow: function() {
            console.log('App Show')
        },
        onHide: function() {
            console.log('App Hide')
        }
    }
</script>

在这里插入图片描述
场景值显示为1001（表示进入了小程序）；点击微信开发者工具中退出按钮时可查看场景值

点击该按钮后出现一下场景：

**onLoad监听用户进入小程序
onHide监听用户离开小程序
onError 当 uni-app 报错时触发
onUniNViewMessage 对 nvue 页面发送的数据进行监听
**

页面生命周期

<script>
    export default {
        data() {
            return {
            };
        },
        onLoad(){
            console.log("页面初始化执行一次onLoad");
        },
        onReady(){
            console.log("页面加载完毕 执行一次onReady");
        },
        onShow(){
            console.log("页面进入执行 执行多次onShow");
        },
        onHide(){
            console.log("页面进入离开 执行多次onHide");
        },
        onUnload(){
            console.log("监听页面卸载  onUnload");
        },
        onResize(){
            console.log("监听窗口变化  onResize");
        },
        onPullDownRefresh(){
            console.log("用户下拉菜单时执行");
        },
        onTabItemTap(){
            console.log("用户点击了tabber");
        },
        onShareAppMessage(){
            console.log("用户进行了分享");
            return{
                title:"转发的标题",
                path:"pages/news/news",//转发的页面，
                imageUrl:"https://www.baidu.com/img/bd_logo1.png?where=super"//转发图片
            }
        },
        onPageScroll(){
            console.log("监听页面滚动");
        }
    }
</script>

onLoad 监听页面的加载
onShow 当 uni-app 启动，监听用户进入小程序
onReady 页面加载（执行一次）
onHide 监听页面隐藏（页面进入离开执行多次）
onUnload 监听页面卸载
onResize 监听窗口尺寸变化
onPullDownRefresh 监听用户下拉动作，一般用于下拉刷新（需要在 pages.json 里，找到的当前页面的pages节点，并在 style 选项中将enablePullDownRefresh设置为true。）
onReachBottom 页面滚动到底部的事件（不是scroll-view滚到底），常用于下拉下一页数据
onTabItemTap 点击 tab 时触发
onShareAppMessage 当用户点击右上角分享时触发
onPageScroll 监听页面滚动
onNavigationBarButtonTap 监听原生标题栏按钮点击事件
onBackPress 监听页面返回
onNavigationBarSearchInputChanged 监听原生标题栏搜索输入框输入内容变化事件
onNavigationBarSearchInputConfirmed 监听原生标题栏搜索输入框搜索事件，用户点击软键盘上的“搜索”按钮时触发。
onNavigationBarSearchInputClicked 监听原生标题栏搜索输入框点击事件
（可自行测试）

组件生命周期函数

uni-app 组件支持的生命周期，与vue标准组件的生命周期相同
在自定义组件中写

<script>
    export default {
        data() {
            return {
                say:"liyan"
            };
        },
        props:["msg"],
        beforeMount() {
            console.log("在挂载开始之前调用")
        },
        mounted() {
            console.log("挂载到实例上去之后调用");
            this.$nextTick(function(){
                // 渲染完毕
                console.log("OK");
            })
        },
        methods:{
            test(){
                //this.$emit("testShowName",{name:"liyan"})
                uni.$emit("testEmit",{name:"li"})
            }
        }
    }
</script>