uni-app快速上手顺序

文章目录

  • 1,官方文档
    • 1.1组件——>模板层(分基础组件和扩展组件/外部插件)
      • 1.1.1基础组件内置直接引用:
      • 1.1.2扩展组件/外部插件
      • 1.1.3更多uni-app的模板、示例
    • 1.2vue.js——>脚本层
    • 1.3接口——>脚本层
    • 1.4CSS3——>样式层
    • 1.5尺寸单位
  • 2,直接打开Hbuilder创建项目体验
    • 2.1认识目录结构
    • 2.2全局配置
  • 3,关于如何模拟运行
  • 4,直接调用原生API
  • 5,打包发行
    • 5.1HBuilder发行
    • 5.2HBuilder发行云打包
    • 5.3微信开发者工具上传
  • 7,快速体验

白话:uni-app是用前端都熟系的技术合成的用于一套代码跨多端(14个平台)的前端应用开发框架。具有一定前端基础可以看官网快速上手。

1,官方文档

uni-app官网 (dcloud.net.cn)/uni-app开发框架教程-学习视频教程-腾讯课堂 (qq.com)

uni-app 是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序等多个平台。

1.1组件——>模板层(分基础组件和扩展组件/外部插件)

1.1.1基础组件内置直接引用:

uni-app快速上手顺序_第1张图片
uni组件快捷键编写:u+组件首字母
uni-app快速上手顺序_第2张图片

1.1.2扩展组件/外部插件

传统vue组件,需要安装、引用、注册,三个步骤后才能使用组件。easycom将其精简为一步。 只要组件安装在项目的components目录下,并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册,直接在页面中使用。

自定义easycom配置的示例
如果需要匹配node_modules内的vue文件,需要使用packageName/path/to/vue-file-$1.vue形式的匹配规则,其中packageName为安装的包名,/path/to/vue-file-$1.vue为vue文件在包内的路径。

"easycom": {
  "autoscan": true,
  "custom": {
    "^uni-(.*)": "@/components/uni-$1.vue", // 匹配components目录内的vue文件
    "^vue-file-(.*)": "packageName/path/to/vue-file-$1.vue" // 匹配node_modules内的vue文件
  }
}
如果不使用easycom,手动引用和注册vue组件,则需要分3步写如下代码:
1,import导入组件,2,components里注册组件,3,template中使用组件
	
	

1.1.3更多uni-app的模板、示例

详见插件市场

利用插件学习,或者直接二次开发利用!

uni插件:DCloud 插件市场

1.2vue.js——>脚本层


                    
                    

你可能感兴趣的:(web前端,经验分享,其他,python)