位置: 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文件)

  • OPPO Ace2有3.5MM的耳机孔吗(oppo ace2有3.5mm耳机孔吗)

    OPPO Ace2有3.5MM的耳机孔吗(oppo ace2有3.5mm耳机孔吗)

  • 爱奇艺怎样注销账号(爱奇艺怎样注销手机号)

    爱奇艺怎样注销账号(爱奇艺怎样注销手机号)

  • 电脑打包压缩wps文件(电脑打包压缩的软件)

    电脑打包压缩wps文件(电脑打包压缩的软件)

  • 手机没欠费为什么数据用不了(手机没欠费为什么别人打来说已停机呢?)

    手机没欠费为什么数据用不了(手机没欠费为什么别人打来说已停机呢?)

  • vivoxplay5a上市时间

    vivoxplay5a上市时间

  • 苹果11手机用一会儿发烫什么原因(苹果11手机用一会屏幕就变暗)

    苹果11手机用一会儿发烫什么原因(苹果11手机用一会屏幕就变暗)

  • 苹果手机静音模式下为什么不震动(苹果手机静音模式怎么解除)

    苹果手机静音模式下为什么不震动(苹果手机静音模式怎么解除)

  • xsmax支持双卡吗(美版xsmax支持双卡吗)

    xsmax支持双卡吗(美版xsmax支持双卡吗)

  • 5g网络流量消耗快吗(5g网络流量消耗太快)

    5g网络流量消耗快吗(5g网络流量消耗太快)

  • 戴尔电脑休眠如何唤醒(戴尔电脑休眠功能)

    戴尔电脑休眠如何唤醒(戴尔电脑休眠功能)

  • 苹果11都有什么型号(苹果11都有什么功能?)

    苹果11都有什么型号(苹果11都有什么功能?)

  • word文档中的域是什么意思(word文档的域怎么弄)

    word文档中的域是什么意思(word文档的域怎么弄)

  • 二进制数10101转换成十进制数(数字转二进制)

    二进制数10101转换成十进制数(数字转二进制)

  • 苹果n开头是官换机吗(苹果n开头是哪里生产)

    苹果n开头是官换机吗(苹果n开头是哪里生产)

  • 手机热点总是自动断开(手机热点总是自己断开连接)

    手机热点总是自动断开(手机热点总是自己断开连接)

  • Reno Ace怎么设置屏幕常亮(oppo reno ace游戏模式怎么开)

    Reno Ace怎么设置屏幕常亮(oppo reno ace游戏模式怎么开)

  • ios13原彩显示怎么没了(iphone13原彩显示没反应)

    ios13原彩显示怎么没了(iphone13原彩显示没反应)

  • 手机提示支付风险怎么关闭(手机提示支付风险怎么关)

    手机提示支付风险怎么关闭(手机提示支付风险怎么关)

  • 华为手机必须开位置信息吗(华为手机必须开启云备份吗)

    华为手机必须开位置信息吗(华为手机必须开启云备份吗)

  • qq苹果在线怎么去掉(qq苹果在线怎么弄)

    qq苹果在线怎么去掉(qq苹果在线怎么弄)

  • 苹果投屏卡顿怎么解决(苹果投屏卡顿怎么回事)

    苹果投屏卡顿怎么解决(苹果投屏卡顿怎么回事)

  • 抖音可以把喜欢隐藏吗(抖音可以把喜欢一键清零吗)

    抖音可以把喜欢隐藏吗(抖音可以把喜欢一键清零吗)

  • Redis主从复制(redis主从复制如何保证不丢失数据)

    Redis主从复制(redis主从复制如何保证不丢失数据)

  • Dede织梦发布时间更新为最新时间的解决方法(织梦如何使用)

    Dede织梦发布时间更新为最新时间的解决方法(织梦如何使用)

  • 外贸企业账务处理及报税
  • 电子承兑转出后银行有凭证吗
  • 股份有限公司个人所得税缴纳比例
  • 发票的抵扣期限怎么填
  • 小企业会计准则调整以前年度费用分录
  • 企业的哪些活动对企业有长期影响呢
  • 建筑企业会计科目分类及明细表
  • 入库出库模板
  • 一般纳税人17%增值税发票按12%核算如何进行账务处理?
  • 新政出台
  • 企业所得税资产总额怎么算出来的呢
  • 建筑行业挂靠什么意思
  • 文化事业建设费税收优惠政策2023
  • 增值税专用发票怎么开
  • 应付职工薪酬核算内容不包括
  • 苹果手机怎么看国行还是美版
  • 工会经费什么时候申报缴纳
  • windows11禁止自动更新
  • 公积金补缴上月算断缴吗
  • 结转到生产成本的科目
  • 公司员工私车公用协议要签吗
  • 报销租房费用开发票
  • 佣金代扣代缴增值税还有附加税吗
  • 出售固定资产增值税怎么处理
  • 在建工程账务处理包括哪些内容
  • 如何挽留婚姻危机
  • 退货的增值税专票怎么开
  • 短期借款利息的核算不可能涉及的账户是
  • 固定资产清理科目核算内容
  • java webflux
  • uniapp使用高德地图直接进行导航
  • 分期收款企业所得税确认时间
  • 华为od测试岗机试需要怎么准备
  • raisecom删除命令
  • 显示已申报未导入
  • 分类信息有哪些网站
  • db2replace函数用法
  • 增值税年底抵扣
  • 自然人个税申报密码怎么获取
  • 可以直接在企业所得税税前扣除的是
  • 交强险怎么报警
  • 其他债权投资应收利息计入什么
  • 季度缴纳企业所得税可以弥补亏损吗
  • 出口货款收不回怎么办
  • 销售退回如何做账务处理
  • 高新企业预缴增值税税率
  • 建筑公司挂靠单位的财务处理是?
  • 退货款现金流量如何做
  • 现金存入银行凭证怎么写
  • 固定资产明细账图片
  • 电子记账凭证需要划线吗
  • 残疾基金缴纳标准
  • 固定资产收到专票怎么做账
  • 管理会计运用什么软件
  • 企业所得税必须预缴吗
  • mysql优化配置文件
  • sqlserver数据库怎么导出
  • win8系统连接vpn失败提示错误代码807的解决方法
  • 在windows中打开一个窗口后
  • windows8.
  • win10系统玩游戏卡
  • ubuntu 编译软件
  • win8系统出现自动修复
  • linux常用网络工具
  • linux 系统升级
  • linux的简单使用
  • linux查看nginx配置文件
  • css动态网页
  • unity3d第三人称角色控制器
  • css制作动画
  • unity接sdk教程
  • nodejs使用视频教程
  • python截屏幕的图
  • Struts2+jquery.form.js实现图片与文件上传的方法
  • 安卓手机如何查
  • js使用类
  • jQuery ajax中使用confirm,确认是否删除的简单实例
  • python 备份文件夹
  • 国家重大水利工程建设基金征收标准
  • 建筑行业的公司近期出现的问题
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设