环境安装
全局安装vue-cli
npm install -g @vue/cli@4
安装完后需查看安装版本是否为 4.x.x 版本
vue-V
创建uni-app
vue create -p dcloudio/uni-preset-vue my-project
填入appid
找到 src/manifest.json 内的第57行,填入 appid
在项目根目录内 输入以下命令 运行和编译 uniapp 项目
npm run dev:mp-weixin 或 yarn dev:mp-weixin
编译成功后:
如何打开项目:
安装成功后会有下面显示:
uni app 开发注意事项
uni app 目录结构
Pages.json
原生小程序中,是通过全局配置和页面配置来设定tabbar、标题、导航栏颜色和开启下拉刷新等功能。
全局配置和页面配置分别是 app.json 页面.json
manifest.json
原生小程序中,假如我们想要修改appId,本质上是在 project.config.json 中修改的。
但是在uniapp中,我们是需要在 manifest.json 文件中修改。
Uniapp 生命周期
生命周期是一堆会在特定时期执行的函数,这个特定时期贯穿了一个组件从创建到销毁的整个过程。
学会这些函数可以帮助我们更好的编写代码实现功能。如
1. 页面创建时,开启一个定时器
2. 页面关闭时,清除定时器
在uni app 中,生命周期分为三种,分别是
应用生命周期 使用小程序的规范onLaunch
页面生命周期 使用小程序的规范onLoad, onShow 等。
组件生命周期 使用vue的规范created,destroyed 等
uni api 使用
1. 如 wx.request 修改 为 uni.request 即可,改前缀
2. 如果该方法有返回值,那么 返回值是一个数组,第1项为错误信息,第2项才是想要的返回结果
uni api自定义组件封装
easycom 组件引入方式
easycom 是uniapp提供的一种便捷使用自定义组件的技术