uniapp框架-02-基本语法

uniapp框架-02-基本语法

基础语法

uniapp里面的语法为vue的语法

<template>
    <view class="content">
        <view class="" v-for="item in list" :key="item.id">
            <text>{{item.id}}</text>
            <text>{{item.name}}</text>
        </view>
        <view :class="{'active':isflag}">
            1教室
        </view>
        <text>{{username}}</text>
        <input type="text" v-model="username" />
        <text>{{newTitle}}</text>
        <button type="default" @click="title='Hello 犀牛'">修改title</button>
        <button type="default" @click="goto">跳转</button>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                title: 'Hello 蜗牛',
                list:[
                    {id:1,name:"xiaowang"},
                    {id:2,name:"xiaozhang"}
                ],
                isflag:true,
                username:""
            }
        },
        onLoad() {
            console.log("页面正在加载");
            console.log("123",this.title);
        },
        computed:{
            newTitle(){
                return this.title + "123"
            }
        },
        watch:{
            title:{
                handler(val,val2){
                    console.log(val);
                    console.log(val2);
                }
            }
        },
        methods: {
            goto(){
                uni.navigateTo({
                    url:"../../pagesA/user/user"
                })
            }
        }
    }
</script>
<style>
    .active{
        color:red
    }
</style>

v-for：循环遍历

v-model：双向绑定

:key动态绑定属性

computed：计算属性

watch：属性监控

@click绑定事件

pages.json配置文件

地址为：uniapp.dcloud.io/collocation…

常见的配置信息：

globalStyle全局配置。配置后每个都会生效。

tabBar：页面的tarBar页面配置

pages：页面路由配置

subPackages：分包配置

{
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        {
            "path": "pages/index/index",
            "style": {
                "navigationBarTitleText": "首页",
                "backgroundTextStyle": "dark"
            }
        }, {
            "path": "pages/product/product",
            "style": {
                "enablePullDownRefresh": false
            }
        }
    ],
    "subPackages": [{
        "root": "pagesA",
        "pages": [{
            "path": "user/user",
            "style": {
                "navigationBarTitleText": "用户页面",
                "enablePullDownRefresh": false
            }
        }]
    }, {
        "root": "pagesB",
        "pages": [{
            "path": "goods/goods",
            "style": {
                "navigationBarTitleText": "商品列表",
                "enablePullDownRefresh": false
            }
        }]
    }],
    "preloadRule": {
        "pagesA/user/user": {
            "network": "all",
            "packages": ["__APP__"]
        },
        "pagesB/goods/goods": {
            "network": "wifi",
            "packages": ["pagesA"]
        }
    },
    "tabBar": {
        "color": "#7A7E83",
        "selectedColor": "#3cc51f",
        "borderStyle": "black",
        "backgroundColor": "#ffffff",
        "list": [{
            "pagePath": "pages/index/index",
            "iconPath": "static/home.png",
            "selectedIconPath": "static/home-o.png",
            "text": "主页"
        }, {
            "pagePath": "pages/product/product",
            "iconPath": "static/category.png",
            "selectedIconPath": "static/category-o.png",
            "text": "分类"
        }]
    },
    "globalStyle": {
        "navigationBarTextStyle": "black",
        "navigationBarTitleText": "蜗牛",
        "navigationBarBackgroundColor": "#F8F8F8",
        "backgroundColor": "#F8F8F8"
    }
}

每个页面都会有自己的style配置，请查看文档。

分包机制

因小程序有体积和资源加载限制，各家小程序平台提供了分包方式，优化小程序的下载和启动速度。

uniapp针对小程序提供了分包机制。App端还是整包运行

详细配置：uniapp.dcloud.io/collocation…

面试题：请说一下小程序分包配置流程？

1、在项目下面创建对应的子包目录，子包的路径和pages保持同级目录。每个分包里有独立的static文件夹。加载子包的时候才需要加载这些静态资源

2、在pages.json文件中配置subPackages，用于创建子包目录。

"subPackages": [{
        "root": "pagesA",
        "pages": [{
            "path": "user/user",
            "style": {
                "navigationBarTitleText": "用户页面",
                "enablePullDownRefresh": false
            }
        }]
    }
    }],

root：代表子包的跟路径

pages里面包含子包里面的页面地址，可以有多个页面。每个页面都会自己的style标签

3、分包配置后，可以设置子包预加载

"preloadRule": {
        "pagesA/user/user": {
            "network": "all",
            "packages": ["__APP__"]
        },
        "pagesB/goods/goods": {
            "network": "wifi",
            "packages": ["pagesA"]
        }
    },

子包里面每个页面加载包括

network：代表页面网络配置。

packages：子包加载的顺序。__APP__代表主包加载完毕后再加载子包