uni app

119 阅读2分钟

环境安装

全局安装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

image.png

在项目根目录内 输入以下命令 运行和编译 uniapp 项目
   npm run dev:mp-weixin  或  yarn dev:mp-weixin
编译成功后:

image.png

如何打开项目:

de99c5afd62306c4dd23ffdb1e3315a.png

安装成功后会有下面显示:

image.png

uni app 开发注意事项

image.png

uni app 目录结构

image.png

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项才是想要的返回结果

image.png

84ef724907a47d588b63592310d14fd.png

uni api自定义组件封装

image.png

image.png

image.png

easycom 组件引入方式

  easycom 是uniapp提供的一种便捷使用自定义组件的技术

image.png image.png

image.png

image.png

image.png

uview基本使用

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

image.png

输入测试内容

image.png

测试效果

image.png

微信页面项目配置及底部操作

image.png

image.png

image.png

image.png

image.png

项目搭建底部配置图标

image.png

image.png