uniApp

最新推荐文章于 2024-07-04 21:42:11 发布

buleRainbow

最新推荐文章于 2024-07-04 21:42:11 发布

阅读量672

点赞数 1

文章标签： uni-app

本文链接：https://blog.csdn.net/hrj970808/article/details/110673328

版权

uni-app是一个使用Vue.js开发跨平台应用的前端框架，支持iOS、Android、H5等平台。本文涵盖了uni-app的环境搭建、Vuex集成、配置、节点获取、问题解决、路由跳转、Tabbar配置、接口请求、组件使用、基础语法、生命周期、nvue特性、数据存储和CSS单位选择等方面，旨在全面解析uni-app的开发流程和技巧。

摘要由CSDN通过智能技术生成

文章目录

什么是uni-app？

uni-app 是使用 Vue.js 开发跨平台应用的前端框架，开发者编写一套代码，可编译到iOS、Android、H5、小程序等多个平台。

1.搭建环境

上官网安装一下开发工具

这里送上连接 www.dcloud.io/hbuilderx.h…

然后需要安装微信开发者工具最好用最新的

如果直接写app的话可以安装模拟器我自己安装的是Android Studio 如果是mac 再安装Xcode 就可以双端撸起来了

然后用开发工具创建一个模板

2.使用vuex

uni-app已经内置vuex 不需要再安装了

在根目录下新建store文件在其目录创建index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
   
    state: {
   
    	text: 'demo'
    },
    mutations: {
   
    	SetText(state, v) {
   
    		state.text = v
    	}
    },
    actions: {
   
    	setText: function({
   commit}, v) {
   
    		commit('SetText', v)
    	}
    }
})
export default store 复制代码

然后在main.js入口文件

import Vue from 'vue'
import App from './App'
// 这里引入store
import store from './store'
// 这里是重要的一步 这里不写 app会找不到store
Vue.prototype.$store = store
const app = new Vue({
   
    store,
    ...App
})
app.$mount()