小程序uni-app介绍

uni-app介绍

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

选择 uni-app 框架两个主要原因：

1. 使用 Vue.js 语法开发
2. 支持编译成多端

uni-app初体验

uni app 官网提供了两种 创建

1. uni app 项目的方式使用 配套的开发工具 HBuilderX ，可视化的方式来创建和开发项目使用
2. 基于 vue-cli 脚手架 来创建和开发项目

核心步骤

1. 全局安装脚手架

   • npm install -g @vue/cli@4 （安装4.x.x的版本）
   • vue -V

2. 使用脚手架创建 uni app 项目

   • vue create -p dcloudio/uni-preset-vue my-project

   • 如有模板选择选 默认模板

3. 编译 uni app 项目

   • npm run serve

4. 体验成功

uni-app项目导入

核心步骤

1. 填入appid

   • 找到 src/manifest.json 内的第57行，填入 appid

     "mp-weixin": { /* 微信小程序特有相关 */
             "appid": "", // 这里填入appid
             "setting": {
                 "urlCheck": false
             },
             "usingComponents": true
         },
     

2. 运行编译 uni app 项目

   • 在项目根目录下运行 npm run dev:mp-weixin
   • 编译成功

3. 微信开发者工具导入uniapp项目

-   打开微信开发者工具 导入uni app项目 路径是 /dist/dev/mp-weixin

4. 导入成功

uni-app目录结构

src目录结构

uni-app生命周期

uni-app生命周期简介

• 作用：

  • 生命周期是一堆会在特定时期执行的函数

• 分类：

  1. 应用生命周期 使用小程序的规范

     • onLaunch

  2. 页面生命周期 使用小程序的规范

     • onLoad

  3. 组件生命周期 使用vue的规范

     • created