uni-app是一个使用vue.js开发跨平台应用的前端框架。uni-app通过编写vue.js代码，编译到ios、android、微信小程序等多个平台，保证其正确性，达到极佳的体验。uni-app继承vue.js，提供完整的vue.js开发体验。uni-app组件规范和扩展API与微信小程序基本一致。有一定vue.js和微信小程序开发经验的开发者可以快速上手uni-app，开发兼容多终端的应用。uni-app提供pages.json的条件编译优化：配置页面路由、导航栏、tabs等页面类信息。manifest.json：配置应用名称、appid、logo、版本app.vue应用配置，用于配置app的全局样式和监控应用的生命周期。main.js：vue初始化入口文件static目录：存放应用引用静态资源pages目录：业务页面文件存放目录components目录：组件文件存放目录uni-app页面样式和布局重要提示请删除app.vue中的全局样式，view{display:flex;}需要flex的时候可以使用flex。尺寸单位uni-app框架目前只支持长度单位px和%。与传统网页不同，px是相对于基础宽度的单位，并且已经适配了移动端屏幕。它的原理类似于rem。uni-app的基础宽度是750px。开发者只需要按照设计稿样式中的px值即可。设计稿1px与framestyle1px的换算公式如下：uni-app基础宽度为750px。开发者只需要根据设计稿确定frame样式中的px值即可。样式导入使用@import语句导入外部样式表。@import后面是要导入的外部样式表的相对路径，以语句结束。内联样式框架组件支持使用style和class属性来控制组件style的样式：静态样式统一写入类，style接收动态样式。运行分析时，请尽量避免将静态样式写入style，以免影响渲染速度。class：用于指定样式规则，其属性值为样式规则中类选择器名称的集合，样式类名不需要带,以空格分隔的样式类名称。选择器目前支持以下选择器：.class.intro选择所有class="intro"的组件#id#firstname选择id="firstname"元素的组件view选择所有viewsComponents元素，elementview,checkbox选中所有文档的视图组件和所有checkbox组件::afterview::after在视图组件后插入内容，仅对微信小程序和5+apps::beforeview::before在视图中插入内容有效组件前面，只有微信小程序和5+app生效。全局样式和局部样式将app.vue中的样式定义为全局样式，作用于每个页面。pages目录下的vue文件中定义的样式是部分样式，只作用于对应的页面，覆盖app.vue中的同一个选择器。注意：大纲样式可以通过app.vue中的@import语句导入，同样适用于每个页面。flex布局支持跨平台，框架推荐使用flex布局。重要提示请删除app.vue中的全局样式view{display:flex;}。需要flex时使用flex。尺寸单位uni-app框架目前支持长度单位px和%，与传统网页不同，px是相对于基础宽度的单位，已经适配了移动端屏幕，其原理和rem类似。uni-app的基础宽度是750px。.content{flex:1;证明内容：居中；对齐项目：居中；}.title{字体大小：36px；color:#8f8f94;}pages.jsonpages.json文件用于uni-app的全局配置，决定页面文件的路径，窗口性能，设置多个tab等。pages.json配置项列表globalStyleObjectNo设置默认页面的窗口显示pagesObjectArrayYes设置页面路径和窗口显示tabBarobjectNo设置底部tab显示情况ObjectNo启动方式配置"globalStyle":{"navigationBarTextStyle":"white",globalStyle用于设置应用的状态栏、导航栏、标题、窗口背景色等navigationBarBackgroundColor导航栏背景色navigationBarTextStyle导航栏标题颜色navigationBarTitleText导航栏标题文字内容navigationStyle导航栏样式backgroundColor窗口navigationStyle的背景色只有在pages.json->globalStyle中设置才有效。启用自定义后，所有窗口都没有导航栏。pages接收一个数组来指定应用程序由哪些页面组成。每一项代表对应页面的信息。要在应用程序中添加/减少页面，需要修改Pages数组。weui框架weui是一套小程序的ui框架。所谓ui框架就是一套界面设计方案。有了组件，我们就可以用它们组装出一个内容丰富的小程序。使用Ui框架，我们可以让我们的小程序变得更美观。体验weui小程序weui是微信官方设计团队设计的与微信原生视觉体验一致的基础样式库。手机微信搜索或扫描weui小程序即可在手机上体验。我们也可以下载weui小程序的源码，在开发者工具中看看它是如何工作的。下载压缩包解压后可以看到weui-wxss-master文件夹，点击开发者工具栏中的项目菜单选择导入项目，即可在开发者工具中查看weui的源码。项目名称，你可以自己命名。从下拉列表中选择应用程序。小任务：为什么weui-wxss-master下的dist文件夹不是weui-wxss-master？结合开发者工具模拟器中weui的实际体验和weui的源码，找到weui基础组件中的article、flex、grid、panel，表单组件中的button，以及对应的pages文件夹下的页面文件列表。并查看页面文件的wxml和wxss代码，了解它们是如何写的。小任务，点击开发者工具栏预览，微信扫描二维码，体验与官方weui小程序的不同。weui的界面虽然很简单，但是背后包含了很多的设计理念，我们可以细读。weui使用pagesimagestyleweui.wxssapp.jsapp.jsonapp.wxss使用开发者工具打开模板小程序app.wxss文件第二行，添加如下代码：@import'style/weui.wxss';wxml文件如何添加flex布局文本、链接、图片等元素和组件，我们希望给这些元素和组件一个更加结构化的布局，不再是简单的上下关系，而是左右关系，以及左右上下的嵌套关系。布局也是一种样式，也属于css的学问。小程序的布局采用了flex布局，flex是一种弹性布局，用于为盒子模型提供最大的灵活性。Python小程序网站建设.list-item{background-color:#82c2f7;高度：100px；文本对齐：居中；border:1pxsolid#bdd2f8;}让组件变成左右关系.flex-box{display:flex;}tabBar如果应用是多tab应用，可以指定tabbar的表现和对应通过tabBar配置进行tab切换显示的页面。当位置设置为置顶时，图标属性说明将不会显示：nameString应用名称appidString应用ID说明应用说明versionName版本名称versionCode版本号app-plus具体配置quickapp快应用具体配置mp-weixion微信小程序具体配置mp-baidu百度专用配置mp-alipay支付宝小程序专用配置manifest.json文件配置mp-weixin属性类型说明如果本账号内容做的不好（例如：涉及版权或其他问题），请联系我们及时给我们改正，我们会尽快处理。请喜欢它！因为您的认可/鼓励是我写作最大的动力！欢迎关注大叔小生简书！这是一个有品质有态度的博客
