位置: IT常识 - 正文

uniapp详细介绍(uniapp简介)

编辑:rootadmin
uniapp详细介绍 一,什么是uni-appuni-app是一个使用 Vue.js 开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、Web(响应式)、以及各种小程序(微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝)、快应用等多个平台

推荐整理分享uniapp详细介绍(uniapp简介),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:uniapp总结,uniapp从入门到进阶,uniapp从入门到进阶,uniapp有什么用,uniapp总结,uniapp入门到实战,uniapp入门到实战,uniapp简介,内容如对您有帮助,希望把文章链接给更多的朋友!

其实uni-app是微信小程序与vue的结合体,语法基本保持是保持一致,唯一不同的是uni-app中没有div和span标签,如果你已经掌握了vue与微信小程序中的任意一个,恭喜你,你就可以做uni-app开发了

二,开发工具Hbuilderx微信开发者工具安卓模拟器(雷电,mumu)三,新建一个项目1,新建项目点击HbuilderX菜单栏文件>项目>新建选择uni-app,填写项目名称,项目创建的目录2,Hbuilde界面

3,文件的介绍4,文件目录pages.json :文件用来对 uni-app 进行全局配置,决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等manifest.json :文件是应用的配置文件,用于指定应用的名称、图标、权限等。App.vue:是我们的跟组件,所有页面都是在App.vue下进行切换的,是页面入口文件,可以调用应用的生命周期函数。main.js:是我们的项目入口文件,主要作用是初始化vue实例并使用需要的插件。uni.scss:文件的用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格,uni.scss文件里预置了一批scss变量预置。unpackage:就是打包目录,在这里有各个平台的打包文件pages:所有的页面存放目录static:静态资源目录,例如图片等components:组件存放目录四,运行项目1,H5端

2,小程序端打开开发工具的服务端口 在Hbuilderx工具中配置微信开发者工具的地址uniapp详细介绍(uniapp简介)

配置微信小程序id 运行到微信小程序 3,模拟器端(mumu)首先要打开我们的模拟器,保证他处于开启状态 配置模拟器的端口号

夜神模拟器端口号:62001 海马模拟器端口号:26944 逍遥模拟器端口号:21503 MuMu模拟器端口号:7555 天天模拟器端口号:6555

运行到模拟器 五,uni-app的相关语法

其实uni-app是微信小程序与vue的结合体,语法基本保持是保持一致,唯一不同的是uni-app中没有div和span标签,如果你已经掌握了vue与微信小程序中的任意一个,恭喜你,你就可以做uni-app开发了

1,文本渲染<view class="">{{title}}</view><view class="" v-text="title"></view><view class="" v-html="str"></view> export default {data() {const currentDate = this.getDate({format: true})return {title: '明天就要静默了',str: "<strong>明天周五放假</strong>",}},2,条件渲染<view class="" v-if="score>=90">奖励一套房</view><view class="" v-else-if="score>=90">奖励一个媳妇</view><view class="" v-else-if="score>=80">奖励一辆车</view><view class="" v-else>啥也别想了</view> export default { data() {const currentDate = this.getDate({format: true})return {score: 82,}}3,列表渲染 //遍历数组 <view class="" v-for="(item,index) in list" :key="index">{{item}}</view>//遍历对象<view v-for="(value,key) in obj" v-bind:key="key">{{value}}</view>//遍历数字<view v-for="item in 5" :key="item">{{item}}</view> export default {data() {const currentDate = this.getDate({format: true})return {obj: {name: "张三",age: 18,job: "teacher"},num: 5,list: ['vue', '小程序', 'uni', 'jquery'],}},4,数据的双向绑定<view class="title">数据双向绑定</view><button @click="num++">{{num}}</button><input type="text" v-model="num" class="ipt"> export default {data() {const currentDate = this.getDate({format: true})return {obj: {name: "张三",age: 18,job: "teacher"},num: 5,}},5,属性绑定<button type="primary" v-bind:disabled="flag" @click="flag=!flag">按钮</button><button type="warn" v-bind:disabled="!flag" @click="flag=!flag">按钮</button>export default {data() {const currentDate = this.getDate({format: true})return {obj: {name: "张三",age: 18,job: "teacher"},title: 'Hello',num: 5,title: '明天就要静默了',str: "<strong>明天周五放假</strong>",score: 82,flag: true,list: ['vue', '小程序', 'uni', 'jquery'],date: currentDate,time: '12:01'}},六,uni-app的生命周期1,vue生命周期beforeCreate:创建前,没有thiscreated:创建后;此时已经有了this,我们可以做的是发起ajax请求,监听事件,设置定时器beforeMounte:挂在前,此时只有虚拟dommounted:挂载后;此时我们可以操作dombeforeUpdate:更新前updated:更新后beforeDestroy:销毁前;可以做的是移除监听事件,移除定时器2,小程序生命周期onLoad:加载类似于vue中的created生命周期onShow:页面显示时执行onReady:准备onHide:后台运行时执行onUnload:卸载七,路由1,导航路由:navigator

opentype打开类型: navigate跳转 redirect重定向(当前页面不留历史记录) navigateBack返回 relauch 重启 switchTab 跳转底部栏

2,路由传参路由参数是在拼接在url?之后的那一块<navigator url="pages/index/index?name=mumu&age=18"></navigator>在跳转后的页面接收参数onLoad(option){ console.log(options) //{name:'mumu',age:'18'}}3,路由常用api//跳转uni.navigateTo({url})//重定向uni.redirectTo({url})//返回uni.navigateBack()//切换底部栏uni.switchTab()//重启uni.reLaunch()八,条件编译1,什么是条件编译?

不同的平台展示不同特性与功能 条件编译是用特殊的注释作为标记,在编译时根据这些特殊的注释,将注释里面的代码编译到不同平台。

2,语法

APP —— App端 H5 —— 网页 MP —— 小程序 MP-WEIXIN —— 微信小程序

//#ifdef 平台专有//#endif

3,css条件编译/* #ifdef APP */ .active{color:red}/* #endif */4,js条件编译// #ifdef APP-PLUSuni.showModal({title:"你好App用户"})// #endif5,条件编译pages.json“style”:{ "h5":{ "titleNView":{ "titleText":"我是H5" } }, "app-plus": { "titleNView":false //隐藏导航栏 }}// #ifdef MP-WEIXIN|| APP{"path":"pages/condition/we","style":{"navigationBarTitleText": "小程序专有页面"}},// #endif
本文链接地址:https://www.jiuchutong.com/zhishi/299674.html 转载请保留说明!

上一篇:javascript获取url信息的常见方法(javascript获取字符串长度)

下一篇:后端中dto、vo、entity的区别(后端中spef文件和spf文件)

  • SEO发展方向,看看你是属于哪种?(seo发展之路)

    SEO发展方向,看看你是属于哪种?(seo发展之路)

  • ipadmini6怎么插耳机(ipad mini6耳机插孔)

    ipadmini6怎么插耳机(ipad mini6耳机插孔)

  • 魅族17pro是曲面屏还是直面屏(魅族17是曲屏吗)

    魅族17pro是曲面屏还是直面屏(魅族17是曲屏吗)

  • 苹果手机的微信怎么设置黑夜模式(苹果手机的微信文件夹在哪里可以找到)

    苹果手机的微信怎么设置黑夜模式(苹果手机的微信文件夹在哪里可以找到)

  • 抖音名怎么改不了(抖音名改不了,显示已被认证)

    抖音名怎么改不了(抖音名改不了,显示已被认证)

  • OPPO手机悬浮窗怎么用(oppo手机悬浮窗设置在哪里)

    OPPO手机悬浮窗怎么用(oppo手机悬浮窗设置在哪里)

  • foxpro是应用软件吗(vfp6.0是应用软件)

    foxpro是应用软件吗(vfp6.0是应用软件)

  • oa添加附件没反应(oa发文怎么添加附件)

    oa添加附件没反应(oa发文怎么添加附件)

  • ps源文件是什么(ps源文件是什么意思)

    ps源文件是什么(ps源文件是什么意思)

  • 三星s8安全模式怎么手动关闭(三星s8安全模式解除不了怎么办)

    三星s8安全模式怎么手动关闭(三星s8安全模式解除不了怎么办)

  • 华为手机天际通是什么功能(华为手机天际通在日本开通流量后可以直接用吗)

    华为手机天际通是什么功能(华为手机天际通在日本开通流量后可以直接用吗)

  • rneal00是华为什么型号(rne-al00是)

    rneal00是华为什么型号(rne-al00是)

  • 苹果手表能听歌吗(苹果手表能听歌不)

    苹果手表能听歌吗(苹果手表能听歌不)

  • 华为nova7hd怎么关闭(华为nova7hd怎么找不到)

    华为nova7hd怎么关闭(华为nova7hd怎么找不到)

  • 腾讯会议能录播吗(腾讯会议录播怎么操作)

    腾讯会议能录播吗(腾讯会议录播怎么操作)

  • 录音设备被占用是怎么回事(录音设备被占用或出现异常怎么办)

    录音设备被占用是怎么回事(录音设备被占用或出现异常怎么办)

  • 充电宝总是自动断电(充电宝总是自动关机)

    充电宝总是自动断电(充电宝总是自动关机)

  • 锐龙3 2300u相当于(锐龙3200u属于什么档次)

    锐龙3 2300u相当于(锐龙3200u属于什么档次)

  • p9plus支持快充吗(华为p9可以快充吗)

    p9plus支持快充吗(华为p9可以快充吗)

  • 华为mate30pro5g颜色(华为mate30pro4g颜色)

    华为mate30pro5g颜色(华为mate30pro4g颜色)

  • 快手怎么删自己的视频(快手怎么删自己的视频短片)

    快手怎么删自己的视频(快手怎么删自己的视频短片)

  • 华为mate30有隔空手势吗(华为mate30有隔空截屏吗)

    华为mate30有隔空手势吗(华为mate30有隔空截屏吗)

  • 淘宝不显示待发货数字(淘宝不显示待发货待收货)

    淘宝不显示待发货数字(淘宝不显示待发货待收货)

  • qq送的礼物在哪里提现(qq送礼物在哪里去了)

    qq送的礼物在哪里提现(qq送礼物在哪里去了)

  • 小米8支持语音唤醒小爱吗(小米支持语音找手机的机型)

    小米8支持语音唤醒小爱吗(小米支持语音找手机的机型)

  • 苹果app图标变网格(iphone的app图标变成网格了)

    苹果app图标变网格(iphone的app图标变成网格了)

  • 房产税如何
  • 税务是怎么回事
  • 非营利组织注销流程
  • 开普票的销项税额
  • 未抵扣的进项发票是什么意思
  • 非经营性资产包括哪些科目
  • 出口企业免抵税额要作进项转出吗
  • 水利建设专项收入怎么计算
  • 企业合并的会计方法选择
  • 其他业务收入的核算内容
  • 收到供应商违约金 发票
  • 环境保护税即将施行 有哪些点需要关注?
  • 机动车销售统一票据可以抵扣吗
  • 营改增后建筑业开票规定
  • 分公司是独立法人企业吗
  • 投标报价里税金和税率是一个吗
  • 收到承兑后背书怎么处理
  • 企业所得税汇算表
  • 电脑重启后分辨率没有1920x1080
  • 苹果mac dns设置
  • 2021年windows最新版本
  • 教你怎么制作微信表情
  • 利息收入和利息费用的区别
  • 微信转账记录怎么加回好友?
  • 如何去掉电脑桌面背景图
  • 计算土地增值税时增值额的扣除项目包括
  • 公司为实习生买保险列支什么科目?
  • 支付公司保洁费未开发票
  • 佣金手续费开什么发票
  • nodejs怎么降低版本
  • educoder实现折半查找
  • 产生转让损失
  • 向投资者分配现金股利 为什么会导致所有者权益减少?
  • php文件怎么创建
  • css选择器分哪几类
  • 出口货物不退税进项可以开具普通发票吗
  • vue3.0用法
  • windows where命令
  • 残疾基金出什么科目
  • 退役士兵抵税2019
  • 人工费没有发票咋入帐
  • 公司买汽车计入什么费用
  • 网上免费学电脑
  • css样式居中
  • 交通费中的高速费指什么
  • 公司旅游费会计分录
  • 减免的企业所得税怎么做账
  • 购买性支出和转移性支出的区别
  • 自然灾害的原因有哪些
  • 单位收风险金是什么意思
  • 车辆处置缴纳增值税税率
  • 企业法人投资收益交税吗
  • 一般纳税人弱电包工包料怎么开票
  • 制单的基本要求是什么
  • mysql 常用
  • navicat不能创建string类型
  • 将Reporting services的RDL文件拷贝到另外一台机器时报Data at the root level is invalid的解决方法
  • 微软在印度的投资
  • windows2003密码破解
  • 在Linux系统中安装MySQL
  • u深度u盘启动盘制作工具无法进入电脑
  • ubuntu 04 10
  • win8.1核心版密钥
  • form表单中input设置为readonly和disabled的区别
  • 2015.3.25--2.cocos精灵移动 动画控制(一)
  • perl常用函数
  • unity3D游戏开发
  • 用jQuery实现优酷首页轮播图
  • Node.js中的全局对象有
  • 脚本添加crontab
  • lru缓存机制是什么
  • scrapy—redis
  • jquery动态添加div
  • 夯实基础怎么读
  • jquery操作
  • 安卓开发常用代码
  • android混淆后怎么破解
  • 基于javascript创建导航页面
  • 江苏国税电子税务局网上申报流程
  • 加格达奇税务局领导简介
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设