您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码:  验证码,看不清楚?请点击刷新验证码 必填



  求知 文章 文库 Lib 视频 iPerson 课程 认证 咨询 工具 讲座 Modeler   Code  
会员   
   
 
     
   
 订阅
  捐助
uni-app实战——创建项目、项目结构详解
 
作者:王致列
148 次浏览     评价:  
 2020-7-31 
 
编辑推荐:
本文重点介绍了如何使用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

好了,大概就介绍到这里了,看多了容易晕,可以去看一下官网

 

 
   
148 次浏览     评价: 订阅 捐助
相关文章

深度解析:清理烂代码
如何编写出拥抱变化的代码
重构-使代码更简洁优美
团队项目开发"编码规范"系列文章
相关文档

重构-改善既有代码的设计
软件重构v2
代码整洁之道
高质量编程规范
相关课程

基于HTML5客户端、Web端的应用开发
HTML 5+CSS 开发
嵌入式C高质量编程
C++高级编程
最新课程计划
 讲座 前端开发框架uni-app
 主讲:苏雯斐
 时间:2020年8月15日
 
 实录 企业架构师的能力模型
 主讲:俎涛
 
 
 
最新文章
如何设计高扩展的在线网页制作平台
electron入门心得
使用 Electron 构建桌面应用
VUE.JS组件化开发实践
深入理解JSCore
最新课程
HTML 5 + CSS3 原理与开发应用
Web前端高级工程师必备技能实战
Vue大型项目开发实战
React原理与实践
Vue.js进阶与案例实践
更多...   
成功案例
中交集团 构建Web自动化测试框架
某著名电信公司 Vue.js进阶与案例
国电通网络技术 HTML5+CSS3 +web前端框
移动通信 移动互联网应用开发原理
某电力行 android开发平台最佳
更多...