uniapp入门

uniapp是一个使用Vue.js开发跨平台应用的开发框架，可以生成多个平台的应用，并具有量小，简单易用，一次编写，多端运行等特点。

现在uniapp基本是在HBuilder X上完成编写的。HbuilderX 提供了丰富的代码辅助功能，可以大大提高开发效率。并且在官网上有各个插件的使用方法，使得编写代码更加容易

uniapp官网网址：https://uniapp.dcloud.net.cn/

1.在刚开始就要了解uniapp项目各个文件的作用：

pages为页面，*.vue为vue页面，static为静态图片资源，index.html为主程序，manifest.json是程序配置；pages.json为页面注册和路由，负责页面之间的跳转

 2.在了解完各个文件的作用后应该完成pages.json的配置

（1）

在项目中每创建一个页面，都要来pages.json配置一下该页面。其中第排在pages数组的第一项就为启动页面，在style中可设置页面的样式,如：

"navigationBarTitleText": "uni-app"           表示该页面的标题栏的标题

"navigationBarBackgroundColor"           表示该页面的标题栏的背景色

"navigationBarTextStyle"                        表示该页面的标题栏的标题颜色（仅支持 black/white）

"navigationStyle"                                    表示该页面的标题栏是否存在（默认存在）

（2）

在tarBar页面主要是配置页面的底部导航栏

底部导航栏的内容要写成列表形式，如：

tabBar中可配置color(tab中文字色),selectedColor(选中时的颜色),borderSyle(边框色),backgroundColor(背景色),list(tab列表)。

在list中pagepath表示页面的地址，iconPath是导航栏的内容图标颜色，

selectedIconPath表示选中该页面时的颜色

3.main.js的配置

如果不是用服务器上的数据就不需要配置，

当需要从服务器上调取数据时就要开始main.js的配置了

import App from './App'

// #ifndef VUE3
import Vue from 'vue'
import './uni.promisify.adaptor'
Vue.config.productionTip = false
Vue.prototype.$baseUrl = "http://127.0.0.1:8080"
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

// #ifdef VUE3
import { createSSRApp } from 'vue'
export function createApp() {
  const app = createSSRApp(App)
  app.config.globalProperties.$baseUrl = "http://127.0.0.1:8080"
  return {
    app
  }
}
// #endif

 

其中：Vue.prototype.$baseUrl = "http://127.0.0.1:8080"

app.config.globalProperties.$baseUrl = "http://127.0.0.1:8080"

后面所跟的地址为你的服务器接口地址。