引言
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
