uniapp

186 阅读1分钟

uniapp

创建并启动项目

npm i -g @vue/cli@4
vue create -p dcloudio/uni-preset-vue uniapp

image.png

npm run dev:mp-weixin

image.png

开发体验

可以尝试按照 vue 写法重现之前的基础案例

image.png

uniapp 生命周期使用

其实 vue 跟小程序的生命周期都能使用

但是因为1 有些小程序生命周期在vue 不存在 2.小程序的生命周期有其他的额外功能(跳转传参)

所以建议

  1. 应用级别 / 页面级别 用小程序的生命周期标准
  2. 组件则直接使用 vue 可以啦

uniapp 内置api

  1. 大部分情况, 直接将 wx 改为 uni 即可

  2. 如果是有返回值, 直接当做 promise 使用即可

  3. uniapp 的封装默认会给你一个数组, 数组中第一个元素是错误对象, 第二个元素才是响应值

image.png

easycom 技术

只要以规定的方式命名组件, 可以省略引入 import 和注册 components 的步骤

uView 组件库

安装和试用

npm i sass sass-loader uview-ui@1

然后按文档配置

npm安装方式配置 | uView - 多平台快速开发的UI框架 - uni-app UI框架

image.png

image.png

image.png