uni-app 基础

uni-app 官网

VScode 开发 uniapp

用 vue.js 开发的前端应用框架，开发者写一套代码，就可以发布到 ios,android，web(响应式)，以及各种小程序等多种平台

语法用 vue.js 开发。但是项目结构类似小程序

简述

安装

hbuilderX  放在 C 盘以外的盘

创建 uniapp 项目

如果运行失败 HBuilderX\plugins\webapp-tools =>npm install

运行

1.浏览器端

2.内置浏览器

3.微信开发者工具 （必须要有）

配置

1.把微信开发者工具运行的目录配置 ==运行的 exe 的父文件夹路径即可

2.打开开发者工具，  设置》安全》打开服务器端口

3.在 hbuilder 中的 manifest.json 中找到微信小程序配置，把 appid 填上

condition

pages.json 中配置 condition

给小程序。添加编译模式

–就是代码实现   编译模式

                **    **    

toBar

下导航栏。只能设置 2-5 个才生效

---

nui-app 的特点

• 语法是 vue 的、.vue 文件、包含 template,style,script
• 组件(标签)用的小程序，把小程序的组件当做是引入的 ui 框架
• 接口是用的小程序的，小程序 api。api 都是以 uni 开头的。微信时 wx
• 数据绑定语法用的 vue。pages 中的视图加入小程序的生命周期,但是 compoments 组件中的生命周期还是 vue 的生命周期嗷。
  • 

样式的引入

• 单位 rpx px em rem vh vw vmax vmin
• 样式引入: @import
• 字体图标
  • 在 app.vue 的 style 引入字体图标，公共样式
  • @import url(‘static/font/iconfont.css’)
  • 需要修改 iconfont.css 的字体文件的路径，改成路径开头的(@)
• 使用 less
  • 需要安装 less 插件

**    **

组件通信

• 父传子   用 props
• 子传父用 this.$emit
• 兄弟传值用   全局的   事件处理总线 uniapp 的 api  就是 eventbus
  • 
  •