uni-app:demo&媒体文件&配置全局的变量(三)-阿里云开发者社区

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

2024-10-16 5

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

引言

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

demo

<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