小来宝典之uni-app初学知识点总结(一)

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉/淘宝)、快应用等多个平台。

环境搭建

  • 安装APP开发版HBuilderX
  • 安装微信开发者工具
  • 项目目录介绍以及开发规范简介

项目目录介绍以及开发规范简介

  • page文件夹,存放页面的文件夹
  • static文件夹,存放静态资源的文件夹 /图片/字体图标,等
  • unpackage>dist 存放最终打包输出的文件
  • App.vue 文件 是项目的根组件 是页面的入口文件,可调用应用的生命周期函数
  • main.js 文件 是项目的入口文件 ,项目加载首先会加载main.js
  • manifest.json 文件 用来配置应用的一些打包的东西
  • pages.json 文件 用来设置整个项目的页面的存放路径,以及窗口的外观
  • uni.scss 文件 常用的样式变量

开发规范

  • 页面文件遵循vue中文件组件 ,后缀为vue
  • 组件标签靠近小程序规范 详见官方文档
  • 接口能力,靠近微信小程序规范,但需前缀wx替换为uni 详见官方文档
  • 数据绑定及事件处理同vue.js规范,同时补充了app及页面的生命周期
  • 为兼容多端运行,建议使用flex布局 进行开发

字体图标

  • uni-app 支持使用字体图标,使用方式与普通 web 项目相同,需要注意以下几点:
  • 支持 base64 格式字体图标。
  • 支持网络路径字体图标。
  • 网络路径必须加协议头 https。
  • 从 http://www.iconfont.cn 上拷贝的代码,默认是没加协议头的。

基础组件

  • 视图容器:view,scroll-view,swiper
  • 基础内容:icon,text,rich-text,progress
  • 表单组件:button,check-box,form,input,textarea,picker,radio,switch
  • 导航:navigator
  • 媒体组件:audio,camera,image,video
  • 地图:map
  • 画布:canvas
  • webview:web-view
  • App nvue 专用组件:list,recycle-list
  • 扩展组件:uni-ui

<来客推(www.laiketui.com)是国内知名商城系统及商城网站建设提供商,为企业级商家提供零售商城、B2B2C多用户商城系统、社区团购、微信分销系统、小程序商城、商城系统等多端商城网站建设解决方案>

申明:本网站部分文章和图片来源网络编辑,如有侵权及时沟通删除,来客电商原创文章,转载请注明来源。

相关新闻

QR code