uni-app的第一个程序

左手的ㄟ右手 2021-07-24 21:40 503阅读 0赞

**目录**

一 官网

1 入口

2 相关文档

二 环境搭建

三 入门项目

四 运行方式

1 在google浏览器运行

2 在微信开发者工具中运行

3 运行在手机中

五 项目结构介绍

六 uni-app开发规范

七 修改全局样式

1 修改pages.json

2 效果

--------------------

# 一 官网 #

## 1 入口 ##

[http://uniapp.dcloud.io/][http_uniapp.dcloud.io]

## 2 相关文档 ##

*  介绍： [http://uniapp.dcloud.io/README][http_uniapp.dcloud.io_README]
 *  框架：[http://uniapp.dcloud.io/collocation/pages?id=pages][http_uniapp.dcloud.io_collocation_pages_id_pages]
 *  组件： [http://uniapp.dcloud.io/component/README][http_uniapp.dcloud.io_component_README]
 *  API： [http://uniapp.dcloud.io/api/README][http_uniapp.dcloud.io_api_README]

# 二 环境搭建 #

1 HBuilder：前端开发工具

2 微信开发者工具：微信小程序运行环境

下载地址： [https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html][https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html]

# 三 入门项目 #

新建项目

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

# 四 运行方式 #

## 1 在google浏览器运行 ##

运行位置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

运行效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

## 2 在微信开发者工具中运行 ##

运行位置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3][]

运行效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 4][]

## 3 运行在手机中 ##

运行位置

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 5][]

运行效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 6][]

# 五 项目结构介绍 #

*  pages.json：用来对uni-app进行全局配置，决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar等。
 *  manifest.json：是应用的配置文件，用于指定应用的名称、图标、权限等。
 *  App.vue：是根组件，所有的页面都是在App.vue先进行切换的，是页面入口文件，可以调用应用的生命周期函数。
 *  main.js：项目的入口文件，主要作用是初始化vue实例并使用需要的插件。
 *  uni.scss：文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
 *  unpackage：打包目录，在这里有各个平台的打包文件。
 *  pages： 所有页面存放目录。
 *  static：静态资源目录，例如图片等。
 *  components：组件存放目录

# 六 uni-app开发规范 #

*  页面文件遵循 Vue 单文件组成（SFC）规范。
 *  组件标签靠近小程序规范。
 *  接口能力（JS API）靠近微信小程序规范，但需将前缀wx替换为uni。
 *  数据绑定及事件处理同 Vue.js 规范，同时补充了App及页面的生命周期。
 *  为兼容多端运行，建议使用 flex 布局进行开发。

# 七 修改全局样式 #

## 1 修改pages.json ##

{
    	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    		{
    			"path": "pages/index/index"
    		}
    	],
    	"globalStyle": {
    		"navigationBarTextStyle": "white",
    		"navigationBarTitleText": "绿帽子",
    		"navigationBarBackgroundColor": "#7FFF00",
    		"backgroundColor": "#7CCD7C",
    		"enablePullDownRefresh": true,
    		"backgroundTextStyle":"light"
    	}
    }

## 2 效果 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 7][]

[http_uniapp.dcloud.io]: http://uniapp.dcloud.io/
[http_uniapp.dcloud.io_README]: http://uniapp.dcloud.io/README
[http_uniapp.dcloud.io_collocation_pages_id_pages]: http://uniapp.dcloud.io/collocation/pages?id=pages
[http_uniapp.dcloud.io_component_README]: http://uniapp.dcloud.io/component/README
[http_uniapp.dcloud.io_api_README]: http://uniapp.dcloud.io/api/README
[https_developers.weixin.qq.com_miniprogram_dev_devtools_download.html]: https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/bb87d0215e7a470980a75988dc251046.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: /images/20210724/487189fa70bc4fdea72ac770fcc9f36d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: /images/20210724/4f23e678e5574140b61a9766e1b2c742.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3]: /images/20210724/2217d6381f794783a09874d0b60d9316.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 4]: /images/20210724/2196dce254b7429cb926aaaa1b42d2cc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 5]: /images/20210724/8f2bc4c305324ce49f1aba821f54b9b1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 6]: /images/20210724/ed4f7a83d1d24e71aff305a7a0e5197f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 7]: /images/20210724/c29591c9f52f4d779c9a8e21fda10b31.png