`uni-app`

创建项目

注意：

vue-cli脚手架版本要4.0以上！

使用手脚架创建项目

vue create -p dcloudio/uni-preset-vue 文件名

填入 appid

在 src/manifest.json 第57行填入 appid 。
编译项目
```
npm run dev:mp-weixin
```
编译成功后会生成一个 dist 文件夹，里面 mp-weixin 就是我们想要的文件夹。
开发者工具导入项目

打开微信开发者工具，导入 uni-app 项目，路径是 /dist/dev/mp-weixin 。 appid 使用自己的。

`uni app`生命周期

应用生命周期

使用小程序的规范

页面生命周期

使用小程序的规范

组件生命周期

使用 vue 的规范

`uni api`

是什么

是针对一些微信小程序所做的封装，它解决了两个问题：

原生小程序api不支持 promise 形式的调用（需要自己封装）
原生的微信小程序api不支持跨平台

使用

把wx改为uni前缀即可，如：
```
uni.request({
    url: ''
})
```
如果该方法有返回值，那么返回一个数组，第一项为错误信息，第二项为想要的结果。

自定义组件

一般方法

和 vue 一样，创建组件、引入组件（import），注册组件、使用组件

`easycom` 引入方式

创建自定义组件
使用自定义组件

步骤：

必须按照固定格式创建组件 /components/组件名称/组件名称.vue 。
在页面中直接使用。

插件`uView`

注意：

安装的是1.x版本

安装引入

npm i sass sass-loader@10
npm install uview-ui@1

注意：如果下载依赖出现错误，解决方法是：

下载没有冲突的版本

重新卸载再下载没冲突版本

把 node_modules + package-lock.json 删掉重新 npm i

将 node_modules 删掉改成 yarn 安装

直接克隆心堵项目， yarn 重装所有依赖

引入uView主JS库

在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

// main.js
import uView from "uview-ui";
Vue.use(uView);

在引入uView的全局SCSS主题文件

在项目根目录的uni.scss中引入此文件。

// 2. 引入模板样式
@import "uview-ui/theme.scss";

引入uView基础样式

注意！

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

<style lang="scss">
// 3. 引入基础样式
@import "uview-ui/index.scss";
</style>

配置easycom组件模式

此配置需要在项目根目录的pages.json中进行。

温馨提示

uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。

请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。

// pages.json
{
    "easycom": {
    	"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },
    "pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
    ],
}

更新完毕后需要重启项目，现在就能够使用了。

<u-button type="primary">测试按钮</u-button>

微信小程序 知识总结【uni-app】

uni-app