小程序uni-app介绍

uni-app介绍

uni-app简介

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

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

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

uni-app初体验

能通过vue-cli脚手架创建uni-app项目

uni app 官网提供了两种创建

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

核心步骤

全局安装脚手架
- **npm install -g @vue/cli@4 ** （安装4.x.x的版本）
- vue -V
使用脚手架创建 uni app 项目
- vue create -p dcloudio/uni-preset-vue my-project
- 如有模板选择选 默认模板
编译 uni app 项目
- npm run serve
体验成功

uni-app项目导入

核心步骤

填入appid

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

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

运行编译 uni app 项目
- 在项目根目录下运行 npm run dev:mp-weixin
微信开发者工具导入uniapp项目
- 打开微信开发者工具导入uni app项目路径是 /dist/dev/mp-weixin
导入成功

uni-app目录结构

src目录结构

uni-app生命周期

uni-app生命周期简介

作用：
- 生命周期是一堆会在特定时期执行的函数
分类：
1. 应用生命周期使用小程序的规范
  - onLaunch
2. 页面生命周期使用小程序的规范
  - onLoad
3. 组件生命周期使用vue的规范
  - created

小程序uni-app介绍相关推荐

H5页面内嵌到微信小程序和APP，做分享操作
前言最近接到项目新需求,H5项目需要内嵌到微信小程序和APP里,然后将H5页面分享出去,被分享的人可以点击消息跳转到H5页面.H5页面不难,难的是要与微信小程序和APP进行交互,因为以前也没有接触过 ...
微信小程序开发流程介绍
1&:起步一.申请账号: 点击 mp.weixin.qq.com/wxopen/ware- 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号. 登录 mp.weixin.qq.c ...
android h5使用缓存_程序员必须了解的之小程序与 App 与 H5 之间的区别
小程序的实现原理根据微信官方的说明,微信小程序的运行环境有 3 个平台,iOS 的 WebKit(苹果开源的浏览器内核),Android 的 X5 (QQ 浏览器内核),开发时用的 nw.js(C+ ...
微信小程序-04-详解介绍.json 配置文件
致我自己:小程序开发不是简单一两天的事,一两天只能算是了解,有时候看多了会烦,感觉很熟悉了,其实只是对表面进行了解,对编程却知之甚少,小程序开发不是简单的改模板,一两天很多部分改模板可能都做不到,坚持 ...
每日优鲜小程序基础组件介绍
每日优鲜小程序基础组件介绍 1.基础组件介绍 2.基础组件的结构与作用 3.基础组件的接入方法初次引入初始化更新与维护基础组件接入 1.基础组件介绍小程序基础组件基于每日优鲜主商城小程序业务 ...
微信不再提供小程序打开App？借助H5为App引流的方式你必须知道！
简介: 2021年5月14日App开发者领域发布了一条重要消息:微信开放平台为了提升用户体验,将于2021年5月20日(后来延期到2021年5月27日)起不再提供"小程序打开App技术服务& ...
小程序影视APP/追剧吧/脱离微擎/可用火车头采集小程序影视
介绍: [独立无授权]小程序影视APP/追剧吧/脱离微擎/可用火车头采集小程序影视,脱离微擎,没有授权,可以直接跑. 需要自己做采集规则,东西如下图, 网盘下载地址: http://kekewangL ...
dakai微信小程序 ios_【iOS】微信小程序打开APP到底是怎么回事？
前言从苹果官方来看,小程序新增了两个功能: 1. 支持打开移动应用 2. 标题栏区域开放自定义针对第二个功能,就是开发者可以自定义小程序菜单栏的颜色风格,根据需求,对小程序菜单外的标题区域进行自定 ...
生鲜配送小程序源码_生鲜配送小程序系统功能开发介绍（附带源码）
生鲜配送系统开发找吴经理189微4800电*2702,生鲜配送软件开发,生鲜配送APP开发,生鲜配送模式开发,生鲜配送平台开发,生鲜配送小程序开发,生鲜配送源码开发,生鲜配送管理系统开发,生鲜配送管理 ...
uniapp （H5、小程序、app）地图导航
H5地图导航腾讯地图 window.location.href = http://apis.map.qq.com/uri/v1/marker?marker=coord:lat,lng;addr:ad ...