做网站模板链接放哪里,页面设计师,网站开发与iso9001关系,房地产营销网站建设1.uniapp基础 官方文档#xff1a;uni-app官网 1.1开发工具 #xff08;1#xff09;工具#xff1a; HBuilderX HBuilderX-高效极客技巧 1.2 新建项目 #xff08;1#xff09; 文件》新建项目 #xff08;2#xff09;选择相应的配置信息#xff0c;填写项目根路…1.uniapp基础 官方文档uni-app官网 1.1开发工具 1工具 HBuilderX HBuilderX-高效极客技巧 1.2 新建项目 1 文件》新建项目 2选择相应的配置信息填写项目根路径以及项目名称 1.3 项目结构 一个uni-app工程默认包含如下目录及文件 ┌─uniCloud 云空间目录阿里云为uniCloud-aliyun,腾讯云为uniCloud-tcb详见uniCloud
│─components 符合vue组件规范的uni-app组件目录
│ └─comp-a.vue 可复用的a组件
├─utssdk 存放uts文件
├─pages 业务页面文件存放的目录
│ ├─index
│ │ └─index.vue index页面
│ └─list
│ └─list.vue list页面
├─static 存放应用引用的本地静态资源如图片、视频等的目录注意静态资源都应存放于此目录
├─uni_modules 存放[uni_module](/uni_modules)。
├─platforms 存放各平台专用页面的目录详见
├─nativeplugins App原生语言插件 详见
├─nativeResources App端原生资源目录
│ ├─android Android原生资源目录 详见
| └─ios iOS原生资源目录 详见
├─hybrid App端存放本地html文件的目录详见
├─wxcomponents 存放小程序组件的目录详见
├─unpackage 非工程代码一般存放运行或发行的编译结果
├─AndroidManifest.xml Android原生应用清单文件 详见
├─Info.plist iOS原生应用配置文件 详见
├─main.js Vue初始化入口文件
├─App.vue 应用配置用来配置App全局样式以及监听 应用生命周期
├─manifest.json 配置应用名称、appid、logo、版本等打包信息详见
├─pages.json 配置页面路由、导航条、选项卡等页面类信息详见
└─uni.scss 这里是uni-app内置的常用样式变量 1.4 项目运行 配置文档 uniapp-hubildx配置-CSDN博客 该文档只有常用几个配置其他配置请参考官方配置文档。 2 uniapp项目
2.1uniapp中的Vue vue2-vue3全部文档Vue2-Vue3学习笔记全-CSDN博客 1VUE核心文档1.Vue核心-CSDN博客 2VUE组件化编程2.VUE组件化编程-CSDN博客 3VUE脚手架3.使用脚手架-CSDN博客 4VUE的AJAX4.Vue中的AJAX-CSDN博客 5vuex的使用5.vuex使用-CSDN博客 6VUE的路由6.vue中的路由-CSDN博客 7VUE常用UI7.Vue UI库-CSDN博客 8VUE3入门Vue3入门-CSDN博客 uniapp中的view与htmlvue中的div用法一样。 h5标签与小程序可能会不兼容导致一些标签例如h2i等在浏览器页面生效但是小程序运行不生效。 故使用常规vue写法写出的页面只适配普通的手机浏览器页面小程序等运行是可能会出现样式等等的问题。 2.2 页面配置与全局配置
2.2.1 新建文件 选择文件夹pages》新建页面 A文件名称生成A.vue的文件。 B勾选后会自动生成一个与A名称相同的文件夹且文件在该文件夹下。 CC选择后会自动将A注册到pages.json中无需手动添加。 2.2.2 pages.json pages.json 配置文件中注册的第一个页面为默认展示页面。 navigationBarTitleText页面展示最上方显示标题。 {pages: [ //pages数组中第一项表示应用启动页参考https://uniapp.dcloud.io/collocation/pages{path: pages/index/index,style: {navigationBarTitleText: uni-app}},{path : pages/index/list/list,style : {navigationBarTitleText : 新闻列表,navigationBarTextStyle:#2a2c37}}],globalStyle: {navigationBarTextStyle: black,navigationBarTitleText: uni-app,navigationBarBackgroundColor: #F8F8F8,backgroundColor: # },uniIdRouter: {}
}2.2.3 stylePage 1在pages.json中可以进行一些基本配置详细配置信息可以参考官网。 2pages.json的page数组中的某个对象的style属性配置只对该页面生效。 pages: [ //pages数组中第一项表示应用启动页参考https://uniapp.dcloud.io/collocation/pages{{path : pages/index/list/list,style : {navigationBarTitleText : 新闻列表,navigationBarTextStyle:#2a2c37}], 3最下方的globalStyle配置对全局生效但是之后再pages里的对象未配置style属性时生效。 globalStyle: {navigationBarTextStyle: black,navigationBarTitleText: uni-app,navigationBarBackgroundColor: #F8F8F8,backgroundColor: # }, 4uniapp官网提供的部分配置信息 属性类型默认值描述平台差异说明navigationBarBackgroundColorHexColor#F8F8F8导航栏背景颜色同状态栏背景色APP与H5为#F8F8F8小程序平台请参考相应小程序文档navigationBarTextStyleStringblack导航栏标题颜色及状态栏前景颜色仅支持 black/whitenavigationBarTitleTextString导航栏标题文字内容navigationBarShadowObject导航栏阴影配置参考下方 导航栏阴影uni-app x 不支持navigationStyleStringdefault导航栏样式仅支持 default/custom。custom即取消默认的原生导航栏需看使用注意微信小程序 7.0、百度小程序、H5、App2.0.3disableScrollBooleanfalse设置为 true 则页面整体不能上下滚动bounce效果只在页面配置中有效在globalStyle中设置无效微信小程序iOS、百度小程序iOSbackgroundColorHexColor#ffffff窗口的背景色微信小程序、百度小程序、抖音小程序、飞书小程序、京东小程序backgroundTextStyleStringdark下拉 loading 的样式仅支持 dark/lightuni-app x 不支持enablePullDownRefreshBooleanfalse是否开启下拉刷新详见页面生命周期。onReachBottomDistanceNumber50页面上拉触底事件触发时距页面底部距离单位只支持px详见页面生命周期uni-app x 不支持backgroundColorTopHexColor#ffffff顶部窗口的背景色bounce回弹区域仅 iOS 平台backgroundColorBottomHexColor#ffffff底部窗口的背景色bounce回弹区域仅 iOS 平台disableSwipeBackBooleanfalse是否禁用滑动返回App-iOS3.4.0titleImageString导航栏图片地址替换当前文字标题支付宝小程序内必须使用https的图片链接地址支付宝小程序、H5、App(uni-app x 不支持)transparentTitleStringnone导航栏透明设置。支持 always 一直透明 / auto 滑动自适应 / none 不透明支付宝小程序、H5、APP(uni-app x 不支持)titlePenetrateStringNO导航栏点击穿透支付宝小程序、H5app-plusObject设置编译到 App 平台的特定样式配置项参考下方 app-plusApph5Object设置编译到 H5 平台的特定样式配置项参考下方 H5H5mp-alipayObject设置编译到 mp-alipay 平台的特定样式配置项参考下方 MP-ALIPAY支付宝小程序mp-weixinObject设置编译到 mp-weixin 平台的特定样式微信小程序mp-baiduObject设置编译到 mp-baidu 平台的特定样式百度小程序mp-toutiaoObject设置编译到 mp-toutiao 平台的特定样式抖音小程序mp-larkObject设置编译到 mp-lark 平台的特定样式飞书小程序mp-qqObject设置编译到 mp-qq 平台的特定样式QQ小程序mp-kuaishouObject设置编译到 mp-kuaishou 平台的特定样式快手小程序mp-jdObject设置编译到 mp-jd 平台的特定样式京东小程序usingComponentsObject引用小程序组件参考 小程序组件App(uni-app x 不支持)、微信小程序、支付宝小程序、百度小程序、京东小程序leftWindowBooleantrue当存在 leftWindow时当前页面是否显示 leftWindowH5topWindowBooleantrue当存在 topWindow 时当前页面是否显示 topWindowH5rightWindowBooleantrue当存在 rightWindow时当前页面是否显示 rightWindowH5maxWidthNumber单位px当浏览器可见区域宽度大于maxWidth时两侧留白当小于等于maxWidth时页面铺满不同页面支持配置不同的maxWidthmaxWidth leftWindow(可选)page(页面主体)rightWindow(可选)H52.9.9 2.3 uniapp中的组件 小程序API微信开放文档 与uniappAPI基本一致。 2.4 px与rpx px px 是像素Pixel的缩写是一个相对固定的单位。在不同的设备上1px 所代表的实际物理长度是不同的因为不同设备的屏幕分辨率不同。在高分辨率屏幕上1px 可能会显得更小。px 常用于网页开发和其他不需要考虑设备屏幕尺寸差异的应用中。 rpx rpx 是一种响应式的单位主要用于微信小程序以及其他需要适应不同屏幕尺寸的应用程序。微信小程序将屏幕划分为 750rpx 的宽度这样可以保证在不同设备上显示的一致性。使用 rpx 的好处是可以根据屏幕实际宽度进行自适应布局无需为不同设备编写不同的样式代码。转换关系假设屏幕宽度为 W则 1rpx W / 750px。例如在 iPhone6s 上屏幕宽度为 375px那么 1rpx 375px / 750 0.5px。 3 Vue与小程序生命周期 Vue生命周期请参考:1.Vue核心-CSDN博客 应用生命周期 onLaunch当小程序启动时触发全局只会触发一次。onShow当小程序从前台进入后台再返回前台时触发。onHide当小程序从前台进入后台时触发。onError当小程序发生错误时触发。 这些函数是在app.js文件中定义的通过App(Object)函数注册一个小程序并指定其生命周期回调。 页面生命周期 页面生命周期则是针对小程序中的每个页面包括以下几个回调函数 onLoad页面加载时触发会传入页面参数。onReady页面初次渲染完成时触发。onShow页面显示/切入前台时触发。onHide页面隐藏/切入后台时触发。onUnload页面卸载时触发。 组件生命周期 created在组件被创建后立即执行此时组件视图还未添加到页面中。通常可以在这个函数中初始化一些数据和变量。 attached在组件完全初始化完毕、进入页面节点树后触发。这个生命周期可以做一些异步请求、数据更新等操作。 ready当组件及其所有子组件都准备就绪时触发代表组件渲染完成并显示在界面上。 moved如果组件在一个已有的节点树内移动位置则会触发此生命周期。 detached在组件离开页面节点树后触发。退出一个页面时如果组件还在页面节点树中则 detached 会被触发。
