前言：
uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web、以及各种小程序、快应用等多个平台。
本文通过开发一个简单页面，总结了一下uni-app开发流程。
- uni-app项目结构
通过HBuilderX 新建项目，可以选择不同模板，如图：
新建项目
项目结构
pages.json 文件用来对 uni-app 进行全局配置，设置页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。
manifest.json 文件是应用的配置文件，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。
main.js是 uni-app 的入口文件，主要作用是初始化vue实例、定义全局组件、使用需要的插件如 vuex。
uni.scss文件的用途是为了方便整体控制应用的风格。预置了一批scss变量，比如按钮颜色、边框风格。uni.scss是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。
App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。
这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData应用生命周期仅可在App.vue中监听，在页面监听无效。
通过开发应用首页，进行uni-app学习。实现效果：
- 新建页面
项目->右键->新建页面,选择相应模板，默认页面自动注册，也可以直接修改pages.json文件，是否显示标题栏，标题栏样式，是否有返回按钮，搜索框等。
pages数组中第一项表示应用启动页面。uni-app官网 (dcloud.net.cn)
https://uniapp.dcloud.net.cn/collocation/pages.html#pages
配置tabbar 设置显示文字、图片、字体样式，点击后样式等。
- 扩展组件引用
引用组件需要导入 – 注册 – 使用三个步骤
- 从插件市场 https://ext.dcloud.net.cn/ 下载或者从uni-app demo中uni_modules 中拷贝，如宫格组件 。
拷贝到项目components文件夹
import uniGrid from '@/components/uni-grid/uni-grid.vue'
import uniGridItem from '@/components/uni-grid-item/uni-grid-item.vue'
注册
components: {
uniGrid,
uniGridItem
}
使用
<uni-grid :column="3" :showBorder="false" :highlight="true" @change="change">
<uni-grid-item v-for="(item, index) in menus" :index="index" :key="index">
<view class="grid-item-box" style="background-color: #fff;">
<uni-icons type="image" :size="30" color="#777" />
<text class="text">{{item}}</text>
</view>
</uni-grid-item>
</uni-grid>
- 网络请求
这样通过浏览器就可以预览效果了。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
