快捷键说明

Uni-App

uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序

uView

uView是uni-app生态专用的UI框架，uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码， 可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台(引言自uni-app网)。

1，安装

// 安装
npm install uview-ui
// 更新
npm update uview-ui

uView依赖SCSS，您必须要安装此插件，否则无法正常运行。

// 安装node-sass
npm i node-sass -D

// 安装sass-loader
npm i sass-loader -D

2，配置

2-1，引入uView主JS库

在项目的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

// main.js
import uView from "uview-ui";
Vue.use(uView);

2-2，引入uView的全局SCSS主题文件

/* uni.scss */
@import 'uview-ui/theme.scss';

2-3，引入uView基础样式

在App.vue中首行的位置引入，注意给style标签加入lang=”scss”属性

<style lang="scss">
    /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
    @import "uview-ui/index.scss";
</style>

2-4， 配置easycom组件模式

此配置需要在项目根目录的pages.json中进行。

// pages.json
{
    "easycom": {
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },
    
    // 此为本身已有的内容
    "pages": [
        // pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
        // ......
    ]
}

2-5，配置小程序appid

在==manifest.json==中的微信小程序配置模块配置appid

如若没用需要先注册 小程序注册获取appid

3，底部导航栏

在使用的时候，需要注意组件的位置，要将它放在和页面包裹所有内容的元素同级的位置，否则可能会造成组件的高度塌陷，有如下几个需要注意的点：

• 通过list参数配置每一个item的参数
• 如果需要配置凸起的按钮，这个按钮的配置需要在list数组的中间位置，同时需要配置mid-button参数为true
• 将组件放在和页面包裹所有内容的元素同级的位置
• 通过v-model绑定一个数值变量，用于指示当前激活项的索引

3-1，list数组中元素参数

let list = [
    {
        // 非凸起按钮未激活的图标，可以是uView内置图标名或自定义扩展图标库的图标
        // 或者png图标的【绝对路径】，建议尺寸为80px * 80px
        // 如果是中间凸起的按钮，只能使用图片，且建议为120px * 120px的png图片
        iconPath: "home",
        // 激活(选中)的图标，同上
        selectedIconPath: "home-fill",
        // 显示的提示文字
        text: '首页',
        // 红色角标显示的数字，如果需要移除角标，配置此参数为0即可
        count: 2,
        // 如果配置此值为true，那么角标将会以红点的形式显示
        isDot: true,
        // 如果使用自定义扩展的图标库字体，需配置此值为true
        // 自定义字体图标库教程：https://www.uviewui.com/guide/customIcon.html
        customIcon: false,
        // 如果是凸起按钮项，需配置此值为true
        midButton: false,
        // 点击某一个item时，跳转的路径，此路径必须是pagees.json中tabBar字段中定义的路径
        pagePath: '', // 1.5.6新增，路径需要以"/"开头
    }
]

3-2，示例

<template>
    <view>
        <view class="u-page">
            <!-- 所有内容的容器 -->
        </view>
        <!-- 与包裹页面所有内容的元素u-page同级，且在它的下方 -->
        <u-tabbar v-model="current" :list="list" :mid-button="true"></u-tabbar>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list: [{
                        iconPath: "home",
                        selectedIconPath: "home-fill",
                        text: '首页',
                        customIcon: false,
                    },
                    {
                        iconPath: "photo",
                        selectedIconPath: "photo-fill",
                        text: '放映厅',
                        customIcon: false,
                    },
                    {
                        iconPath: "account",
                        selectedIconPath: "account-fill",
                        text: '我的',
                        customIcon: false,
                    },
                ],
                current: 0
            }
        },
    }
</script>

3-3，函数

==切换前的回调函数before-switch==

在点击切换之前，如果配置了before-switch参数并绑定的是一个方法的话，将会抛出点击项的索引，并执行此方法。

此回调可以返回一个promise、true，或者false，下面分别阐述三者的处理情况：

• false——如果返回false，将不会切换tab项
• true——如果返回true，将会切换tab项
• promise——如果返回的是一个promise，如果进入then回调，就会和返回true的情况一样，如果进入catch回调，就会和返回false的情况一样

==普通返回==

<template>
    <u-tabbar :before-switch="beforeSwitch"></u-tabbar>
</template>

<script>
    export default {
        methods: {
            beforeSwitch(index) {
                console.log(index)
                // 只能切换偶数项
                if(index % 2 == 0) return true;
                else return false;
            }
        }
    }
</script>

3-4，案例

• ==pages.json==

"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    {
        "path" : "pages/login/login",
        "style" :{
            "navigationBarTitleText": "登录"
        }

    },
    {
        "path" : "pages/index/img",
        "style" :{
            "navigationBarTitleText": "Pics"
        }

    },
    {
        "path" : "pages/self/self",
        "style" :{
            "navigationBarTitleText": "个人"
        }   
    },
    {
        "path" : "pages/type/type",
        "style" :{
            "navigationBarTitleText": "分类"
        }

    }
],
"tabBar": {
    "color": "#909399",
    "selectedColor": "#303133",
    "backgroundColor": "#FFFFFF",
    "borderStyle": "black",
    "list": [
        {
        "pagePath": "pages/index/img",
        "iconPath": "static/home.png",
        "selectedIconPath": "static/home-active.png",
        "text": "首页"
        },

        {
        "pagePath": "pages/type/type",
        "iconPath": "static/type.png",
        "selectedIconPath": "static/type-active.png",
        "text": "分类"
        },
        {
        "pagePath": "pages/self/self",
        "iconPath": "static/my.png",
        "selectedIconPath": "static/my-active.png",
        "text":"我的"
        }
    ]
}

tabBar配置后不显示，无效的问题

注意：list 数组中的第一项要和pages中的第一项要相同，既tabBar.list第一项的pagePath需要与pages的第一项的page相同

• ==页面中==

注意：每个页面中需要配置this.tabbar_list

<template>
    <view>
        <view class="u-page">
            开发中。。。
        </view>
        <u-tabbar v-model="current" :list="tabbar_list" :before-switch="beforeSwitch" :mid-button="true">            </u-tabbar>
        
    </view>
</template>

<script>
    export default {
        data() {
            return {
                tabbar_list:'',
                current:0,
            }
        },
        // 加载
        onLoad() {
            this.tabbar_list = [
                    {
                        pagePath: "/pages/index/img",
                        iconPath: "/static/home.png",
                        selectedIconPath: "/static/home-active.png",
                        text: '首页',
                        isDot: false,
                        customIcon: false,
                    },
                    {
                        pagePath: "/pages/type/type",
                        iconPath: "/static/type.png",
                        selectedIconPath: "/static/type-active.png",
                        text: '分类',
                        midButton: true,
                        customIcon: false,
                    },
                    {
                        pagePath: "/pages/self/self",
                        iconPath: "/static/my.png",
                        selectedIconPath: "/static/my-active.png",
                        text: '我的',
                        isDot: false,
                        customIcon: false,
                    }
            ]
            
        },
        methods: {
            // 底部导航栏切换
            beforeSwitch(index) {    
                console.log(index)
                // 返回true 进行跳转页面 
                //返回 false 不调整页面
                return true;
            },
        }
    }
</script>

<style>

</style>

登录授权

async应该在离await最近的一个函数声明

uni.getUserProfile 只能通过点击事件调用不能在回调函数中调用

激励视频广告

• App平台：https://uniad.dcloud.net.cn/
• 小程序平台：在各自的小程序管理后台操作。

1. 申请广告位id 在各位后台申请广告位id

---

日夜颠倒头发少 ，单纯好骗恋爱脑 ，会背九九乘法表 ，下雨只会往家跑 ，搭讪只会说你好 ---- 2050781802@qq.com