uni-app:demo&媒体文件&配置全局的变量(三)

简介: uni-app 是一个使用 Vue.js 构建多平台应用的框架,支持微信小程序、支付宝小程序、H5 和 App 等平台。本文档介绍了 uni-app 的基本用法,包括登录示例、媒体文件处理、全局变量配置和 Vuex 状态管理的实现。通过这些示例,开发者可以快速上手并高效开发多平台应用。

引言

uni-app 是一个跨平台的开发框架,它允许开发者使用 Vue.js 来构建应用程序,并能够同时发布到多个平台,如微信小程序、支付宝小程序、H5、App(通过DCloud的打包服务)等。uni-app 的目标是通过统一的代码库,简化多平台开发过程,提高开发效率。

demo

login

<template>
    <div class="page">
        <div class="login-box">
            <div class="title">登录中心</div>
            <!-- @submit="handleSubmit" -->
            <!-- <form> -->
            <div class=" my_form">
                <input class="uni-input account" placeholder="请输入账号" />
                <input class="uni-input password" placeholder="请输入密码" />
                <button type="primary" size="default" @click="handleSubmit">登录</button>
            </div>
            <!-- </form> -->
        </div>
    </div>
</template>
<script setup>
    import {
        useRouter
    } from 'vue-router';
    const router = useRouter();
    const handleSubmit = () => {
        router.push('/home');
    }
</script>
<style lang="scss">
    .page {
        width: 100vw;
        height: 100vh;
    }
    .title {
        font-size: 44rpx;
        font-family: "Microsoft YaHei", sans-serif;
        text-align: center;
        padding-top: 15%;
        padding-bottom: 30rpx;
    }
    .my_form .account,
    .password {
        background-color: white;
        height: 100rpx;
        width: 80%;
        border-radius: 10rpx;
        margin: 50rpx auto;
        box-shadow: 1rpx 2rpx 3rpx #e8e8e8;
        text-align: center;
    }
    .mini-btn {
        width: 80%;
        margin-top: 70rpx !important;
    }
</style>

媒体文件

video

<template>
    <view>
        <view class="uni-padding-wrap uni-common-mt">
            <view>
                <!-- 直接引用便可 -->
                <video id="myVideo" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"
                    @error="videoErrorCallback" :danmu-list="danmuList" enable-danmu danmu-btn controls></video>
            </view>
            <!-- #ifndef MP-ALIPAY -->
            <view class="uni-list uni-common-mt">
                <view class="uni-list-cell">
                    <view>
                        <view class="uni-label">弹幕内容</view>
                    </view>
                    <view class="uni-list-cell-db">
                        <input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
                    </view>
                </view>
            </view>
            <view class="uni-btn-v">
                <button @click="sendDanmu" class="page-body-button">发送弹幕</button>
            </view>
            <!-- #endif -->
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                src: '',
                danmuList: [{
                        text: '第 1s 出现的弹幕',
                        color: '#ff0000',
                        time: 1
                    },
                    {
                        text: '第 3s 出现的弹幕',
                        color: '#ff00ff',
                        time: 3
                    }
                ],
                danmuValue: ''
            }
        },
        onReady: function(res) {
            // #ifndef MP-ALIPAY
            this.videoContext = uni.createVideoContext('myVideo')
            // #endif
        },
        methods: {
            sendDanmu: function() {
                this.videoContext.sendDanmu({
                    text: this.danmuValue,
                    color: this.getRandomColor()
                });
                this.danmuValue = '';
            },
            videoErrorCallback: function(e) {
                uni.showModal({
                    content: e.target.errMsg,
                    showCancel: false
                })
            },
            getRandomColor: function() {
                const rgb = []
                for (let i = 0; i < 3; ++i) {
                    let color = Math.floor(Math.random() * 256).toString(16)
                    color = color.length == 1 ? '0' + color : color
                    console.log(color)
                    rgb.push(color)
                }
                return '#' + rgb.join('')
            }
        }
    }
</script>

配置一个全局的变量

main.js

在这个函数里面

然后便可以在另一个地方使用
<template>
    <view>{{$title}}</view>
</template>

app.vue

在 app.vue 里面 配置这个

globalData: {
            name: 'i am hero'
        },

然后在其他页面中使用

<script>
    var app = getApp()
    export default {
        data() {
            return {
                globalName: app.globalData.name
            }
        }
    }
</script>

vuex

先创建一个 store/index
// #ifndef VUE3
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
    import {
        createStore
    } from 'vuex'
    const store = createStore({
        state: {
            colorList: ['#FF0000', '#00FF00', '#0000FF'],
            colorIndex: 0
        },
        mutations: {
            changeColor(state, color) {
                state.colorList[0] = color
            }
        },
        getters: {
            currentColor: (state) => {
                return state.colorList[state.colorIndex]
            }
        }
    })
    // #endif  
})
export default store

在main里面使用

import store from './store'
App.mpType = 'app'
const app = new Vue({
    store,
    ...App
})
在page里面使用
        computed: {
            ...mapState(['colorList']),
        },
        methods: {
            test() {
                console.log(this.colorList);
            }
        }
import {
    mapState,
    mapMutations
} from 'vuex';
var app = getApp()
import { createSSRApp } from 'vue'
import App from './App.vue'
import store from './store/index.js'
// #ifdef VUE3
export function createApp() {
  const app = createSSRApp(App)
  app.use(store) // 在Vue3中使用use方法来注册Vuex store
  return { app }
}
// #endif
// #ifndef VUE3
import Vue from 'vue'
import App from './App'
Vue.config.productionTip = false
const app = new Vue({
  store, // 在Vue2中直接将store配置传入Vue实例
  render: h => h(App)
})
app.$mount()
// #endif
相关文章
|
13天前
|
移动开发 小程序 开发工具
Demo发布- ClkLog客户端集成 uni-app
在上一期推文中,我们与大家分享了 React Native 的集成 demo。本期,我们将继续介绍 ClkLog 集成 uni-app 的 demo。 uni-app 允许开发者编写一套代码,然后可以编译到 iOS、Android、H5 以及各种小程序等多个平台。因此,本次 demo 中将涵盖上述所有平台,并且我们会详细说明集成过程中遇到的难点及解决方案。
|
2月前
|
Linux 开发工具 数据安全/隐私保护
linux异常一:feng 不在 sudoers 文件中,此事将被报告。yum提示Another app is currently holding the yum lock; waiting for
这篇文章介绍了在CentOS 7系统中安装Docker时遇到的两个常见问题及其解决方法:用户不在sudoers文件中导致权限不足,以及yum被锁定的问题。
42 2
linux异常一:feng 不在 sudoers 文件中,此事将被报告。yum提示Another app is currently holding the yum lock; waiting for
|
3月前
【Azure Logic App】使用Event Hub 连接器配置 Active Directory OAuth 认证无法成功连接到中国区Event Hub的解决之法
An exception occurred while retrieving properties for Event Hub: logicapp. Error Message: 'ClientSecretCredential authentication failed: AADSTS90002: Tenant 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx' not found. Check to make sure you have the correct tenant ID and are signing into the correct cloud. Che
|
4月前
|
开发框架 .NET Windows
【App Service】在App Service中配置Virtual applications and directories,访问目录中的静态文件报错404
【App Service】在App Service中配置Virtual applications and directories,访问目录中的静态文件报错404
|
4月前
|
C++
【Azure Logic App】使用Event Hub 连接器配置 Active Directory OAuth 认证无法成功连接到中国区Event Hub
【Azure Logic App】使用Event Hub 连接器配置 Active Directory OAuth 认证无法成功连接到中国区Event Hub
|
4月前
|
Java 应用服务中间件 开发工具
[App Service for Windows]通过 KUDU 查看 Tomcat 配置信息
[App Service for Windows]通过 KUDU 查看 Tomcat 配置信息
|
4月前
|
Java 应用服务中间件 Windows
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
【App Service for Windows】为 App Service 配置自定义 Tomcat 环境
|
4月前
|
API 网络架构
【Azure Logic App】在中国区的微软云服务上,使用逻辑应用是否可以下载SharePoint上的文件呢?
【Azure Logic App】在中国区的微软云服务上,使用逻辑应用是否可以下载SharePoint上的文件呢?
【Azure Logic App】在中国区的微软云服务上,使用逻辑应用是否可以下载SharePoint上的文件呢?
|
4月前
|
Linux C++ Docker
【Azure Developer】在Github Action中使用Azure/functions-container-action@v1配置Function App并成功部署Function Image
【Azure Developer】在Github Action中使用Azure/functions-container-action@v1配置Function App并成功部署Function Image
|
2月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
630 7