【扫盲教程】Uniapp相关介绍

项目部002

认识和了解Uniapp

• 扫盲教程1

1、什么是Uniapp

• 官方网址： https://uniapp.dcloud.io/
• uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/快手/钉钉/淘宝）、快应用等多个平台。

2、为什么是Uniapp

• 跨平台更多，通过条件编译可以优雅的在一个项目里调用不同平台的特色功能，真正做到“一套代码，多端发行”。
• 上手容易：使用vue和js作为技术栈，vue和js都是很流行的技术，技术成熟且上手容易，学习起来也有很多的资料、教程。
• 生态强大，支持npm包，具有丰富的自定义组件和众多SDK，app端支持和原生混合编码，具有插件市场，市场中有非常多的插件可供下载使用。
• HbuilderX编辑器：HBuilderX是通用的前端开发工具，但为uni-app做了特别强化，具有很好的代码提示和多端编译功能。

3、尝试上手开发

• 使用HbuilderX打开官方示例，并且尝试将他编译到微信小程序
• 各个小程序的配置方法，以微信小程序开发工具的配置为例： 微信小程序开发者工具下载地址

HBuilderX的界面布局

• 扫盲教程2

从一个示例程序开始

• 通过一个Uniapp的示例程序，来进行uniapp开发的讲解和演示。

a、使用HBuilderX编辑器进行Uniapp开发。

• 认识HBuilderX编辑器的布局和常用功能
• 新建项目、打开项目、关闭项目。
• 编辑器常用功能和选取功能
• 从项目、文件中查找内容
• 系统常用设置

b、更多文档示例：

• 文档链接：https://hx.dcloud.net.cn/README

uniapp文件结构

• 扫盲教程3

• components符合vue组件规范的uni-app组件目录： https://uniapp.dcloud.io/vue-components
• hybridApp端存放本地html文件的目录，详见
• platforms存放各平台专用页面的目录，详见
• pages业务页面文件存放的目录
• static存放应用引用的本地静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
• uni_modules存放uni_module规范的插件。
• unpackage生成打包和调试的路径
• App.vue应用配置，用来配置App全局样式以及监听 应用生命周期
• main.jsVue初始化入口文件
• manifest.json配置应用名称、appid、logo、版本等打包信息，详见
• pages.json配置页面路由、导航条、选项卡等页面类信息，详见

已注销103181

小小心意，意思一下。。。。。。。。。。。。。。

dxp04

感谢分享，试着学习一下

东方网络接单

开始学习了

1293648182

没看懂这个东西唉

王摇摆

d大大大大大表哥

        上车上车~~~

awen666

        感谢分享，很给力！~

ai学习

支持开源，谢谢楼主了

qq309

多多回复，多多赞币

675550115

期待大佬出开发教程