| 编辑推荐: |
本文重点介绍了如何使用uni-app创建项目，并讲解uni-app的结构。
本文来自于csdn,由火龙果软件Anna编辑推荐。 |
|
创建项目
1.点击文件——>新建——>项目
2.选择uni-app——>填写项目名称——>选择默认模板
注意这里的项目名称不是你的app 的名称，app的名称需要在代码里定义
项目结构详述
1.首先我们看一下官方的解释
2.创建成功后，我们打开pages目录，这里是页面目录，默认模板只有一个index页面，我们打开它来看看
这里要注意一下，我们以后写一个页面，一般是一个template里面嵌套一个view，然后在view里面编写你的代码
<template>
<view class="content">
</view>
</template> |
最好不要一个template里面写多个view并列，否则会有一些未知的错误,下面是错误示范
<template>
<view>
</view>
<view>
</view>
</template> |
然后是js的代码，里面主要是vue的js语法
<script>
export default {
data() {
return {
title: 'Hello'
}
},
onLoad() {
},
methods: {
}
}
</script> |
最后是css代码，用来美化页面
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.title {
font-size: 36upx;
color: #8f8f94;
}
</style> |
页面就包含以上三个部分，我们点减号把代码收起，可以清晰的看到它的代码结构。
3.再来看一下pages.json这个文件
{
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "uni-app"//页面导航栏的名称
}
}
],
"globalStyle": {
"navigationBarTextStyle": "black",
"navigationBarTitleText": "我的第一个app",//默认导航栏名称
"navigationBarBackgroundColor": "#F8F8F8",
"backgroundColor": "#F8F8F8"
}
}
|
4.再来看一下manifest.json这个文件
里面有很多配置，比如应用名称、模块权限配置（支付、分享等权限）。。。
5.main.js
这里主要是一个全局的js，我们写的通用的js方法可以封装，然后在这里引入，然后就可以在每个页面里用了。
import Vue
from 'vue'
import App from './App'
Vue.config.productionTip = false
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount() |
6.App.vue
好了，大概就介绍到这里了，看多了容易晕，可以去看一下官网
|
