uni-app

官网
介绍
使用

官网

https://uniapp.dcloud.io/

介绍

全端开发

uni-app是一个使用vue.js开发所有前端应用的框架只需要编写一套代码，就可以发布到 ios、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快引用等多个平台

使用

创建项目

使用配套的开发工具HBuiderX，可视化的方式来创建和开发项目
使用基于 vue-cli 脚手架来创建项目
- vue -V查看vue版本
  - 必须是4版本，如果是别的版本
    - npm un -g @vue/cli卸载
    - npm i -g @vue/cli@4重新安装4版本
- vue create -p dcloudio/uni-preset-vue 项目名创建项目
- 配置微信小程序 appid
- npm run dev:mp-weixin 启动微信小程序项目
- 将终端中的目录导入微信开发者工具
- 注意：不能在微信开发者工具中直接修改编译好的代码
  - git 对 dist文件 会有忽略，修改后别人拉取不到这块修改
  - 你的脚手架会删除掉旧的dist 然后重新编译新的！！
    开发
    语法规范
    
    标签使用小程序的，语法使用vue2的

目录结构

app.vue
- 使用应用生命周期
- 配置全局css
main.js
- 功能与vue2一致
manifest.json
- 可以配置小程序appid
- 等同于pro.config.json
pages.json
- 等同于小程序中的全局配置与页面配置文件
- globalStyle全局配置
- pages页面配置
uni.scss
- 直接回执行的scss文件，全局样式文件
pages
- 存放小程序页面的地方
static
- 存放静态资源的地方
  生命周期
应用生命周期使用小程序规范
- app.vue中定义
页面生命周期，使用小程序规范
组件生命周期，使用vue的规范
easycom 组件引入方式

uniapp提供的一种便捷使用自定义组件的技术用了easycom模式之后，由之前的4步变成2步

步骤

创建组件
- 必须按照固定格式components/组件名/组件名.vue
直接在页面中使用
- <组件名></组件名>
  uni api
  
  指的uni-app 针对一些微信小程序api所做的封装

区别

原生小程序的api
- 不支持promise形式的调用（需要自己封装）
- 不支持跨平台使用
uni api
- 支持promise
- 跨平台，一段代码，直接运行到不听的平台上

使用

将小程序api前缀改成uni
- 如：wx.request=uni.request
如果方法有返回值，返回值是一个数组
- 第一项为错误信息
- 第二项才是想要返回的数组
- ```jsx /**
- promise形式调用 */

// .then使用 uni.request({ url: ‘https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata‘ }).then((result)=>{ console.log(result); })

// async await 使用 async onLoad() { console.log(‘页面加载完成’); const [err,result] = await uni.request({ url: ‘https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata‘ }) if (!err) { // 没有错误信息 console.log(result); } }

<a name="IQL6i"></a>
### uView
> uni app  配套出现的 全端ui框架，目前推荐使用1.x
官网
> [https://v1.uviewui.com/](https://v1.uviewui.com/)
引入步骤
- 安装依赖
   - `npm i uview-ui@1.8.4 sass`
   - 1.x版本
- 全局引入js在`main.js`中
```jsx
import uView from "uview-ui"
Vue.use(uView)

在 uni.scss 中引入 uview 的 sass 主题库

// 全部删除后引入 以下样式
@import "uview-ui/theme.scss";

在 App.vue 中引入 uview 的 sass 主题库

<style lang="scss">
@import "uview-ui/index.scss";
</style>

pages.json 中配置 easycom

{
"easycom": {
      "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
  },
  // 此为本身已有的内容 作为上面代码的参照物
  "pages": [
      // ......
  ]
}

测试

  <u-button >默认按钮</u-button>
  <u-button type="primary">主要按钮</u-button>
  <u-button type="success">成功按钮</u-button>
  <u-button type="info">信息按钮</u-button>
  <u-button type="warning">警告按钮</u-button>
  <u-button type="error">危险按钮</u-button>

官网

介绍

使用

创建项目

开发

生命周期

easycom 组件引入方式

uni api