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

  • 新零售的核心不是“价廉”而是“物美(新零售的核心要义)

    新零售的核心不是“价廉”而是“物美(新零售的核心要义)

  • 苹果手机在保修期内怎么换电池(苹果手机在保修期可以换新机吗)

    苹果手机在保修期内怎么换电池(苹果手机在保修期可以换新机吗)

  • vivo手机怎么设置帧数(vivo手机怎么设置呼叫转移)

    vivo手机怎么设置帧数(vivo手机怎么设置呼叫转移)

  • vivo手机防误触模式在哪里设置(iphone防误触)

    vivo手机防误触模式在哪里设置(iphone防误触)

  • airpods的麦克风在哪(airpods的麦克风在哪里)

    airpods的麦克风在哪(airpods的麦克风在哪里)

  • 转转拍卖卖家不发货(转转拍卖卖家不退货)

    转转拍卖卖家不发货(转转拍卖卖家不退货)

  • airpods左边耳朵没声音(airpods左边耳朵特别小声)

    airpods左边耳朵没声音(airpods左边耳朵特别小声)

  • y66l是不是全网通(y66ia是什么型号)

    y66l是不是全网通(y66ia是什么型号)

  • 无线能上网但是电脑有线上不了网(无线能上网但是不能玩手游)

    无线能上网但是电脑有线上不了网(无线能上网但是不能玩手游)

  • 拼多多退款成功了货收到了怎么办(拼多多退款成功货物可自行处理是什么意思)

    拼多多退款成功了货收到了怎么办(拼多多退款成功货物可自行处理是什么意思)

  • 手机膜起边怎么解决(手机膜起边怎么搞)

    手机膜起边怎么解决(手机膜起边怎么搞)

  • 笔记本电脑上下载的钉钉为什么打不开(笔记本电脑上下左右键不能跳格怎么恢复)

    笔记本电脑上下载的钉钉为什么打不开(笔记本电脑上下左右键不能跳格怎么恢复)

  • 直播打赏是什么意思(直播打赏是什么人)

    直播打赏是什么意思(直播打赏是什么人)

  • ipadmini2有64g的吗

    ipadmini2有64g的吗

  • 2017款ipad是第几代(17款ipad属于第几代)

    2017款ipad是第几代(17款ipad属于第几代)

  • 小米手环3怎么记录睡眠(小米手环3怎么使用教程)

    小米手环3怎么记录睡眠(小米手环3怎么使用教程)

  • 苹果手机网络显示1x(苹果手机网络显示CHN-CT)

    苹果手机网络显示1x(苹果手机网络显示CHN-CT)

  • 书旗小说怎么退订自动包月(书旗小说怎么退订会员)

    书旗小说怎么退订自动包月(书旗小说怎么退订会员)

  • 朋友圈怎么发完整视频(朋友圈怎么发完整的抖音)

    朋友圈怎么发完整视频(朋友圈怎么发完整的抖音)

  • 卖家账户异常多久恢复(卖家账户异常多久解除)

    卖家账户异常多久恢复(卖家账户异常多久解除)

  • 手机qq怎么一键私发(手机qq怎么一键清空说说)

    手机qq怎么一键私发(手机qq怎么一键清空说说)

  • vivo接通电话震动怎么设置(vivo接通电话震动怎么关闭)

    vivo接通电话震动怎么设置(vivo接通电话震动怎么关闭)

  • 华为手机小艺怎么设置(华为手机小艺怎么关闭)

    华为手机小艺怎么设置(华为手机小艺怎么关闭)

  • Nginx跨域解决方案(nginx跨域配置详解)

    Nginx跨域解决方案(nginx跨域配置详解)

  • 个人所得税跨区域可以申报吗
  • 个体工商户要做帐吗
  • 报税以及注销公司的注意事项?
  • 收到返款计入什么科目
  • 小规模企业免税怎么做账
  • 购销金额多少的情况下必须需要签合同?
  • 什么公司不可以上市
  • 百旺普通发票作废流程
  • 购买福利用品
  • 什么情况下当月不排卵
  • 车船税每年都要交吗标准多少
  • 税收分类编码不对发票可以用吗
  • 自然人管理系统银行信息
  • 机票电子行程单和发票的区别
  • 个人转租房屋的法律规定
  • 虚开增值税专用发票罪判决书
  • 车船税计入什么费用
  • 债务重组过程
  • 旅行社开具的发票能否作废
  • 帮其他公司垫付的钱怎么写分录
  • 小型微利企业普惠性企业所得税减免政策解读
  • mac的分辨率怎么调
  • 建筑业主营业务收入二级科目有哪些
  • 计算机视觉就业前景
  • 出口货物退免税证明办税进度
  • 斑鹿,滕波尔国家公园,印度 (© Ondrej Prosicky/Shutterstock)
  • 销售自己使用过的固定资产
  • 运费抵扣的基本原则
  • 小规模纳税人免税额度是多少
  • 资金集中度指标公式
  • 小规模企业收到发票
  • ps怎么旋转某个图形快捷键
  • 购销合同印花税税率
  • 会计人员信息采集怎么看审核通过
  • 外贸企业代理出口退税给谁
  • 用人民币支付的公司
  • java一天速成
  • phpcms怎么用
  • 小规模纳税人销售商品会计分录
  • 不含税货款要开发票怎么弄
  • 最新版税控盘怎么设置打印机
  • 实收资本结转本年利润
  • 小微企业全年营业额不能超过多少
  • 出借和出租包装物会计分录是什么
  • 筹建期间的开办费属于资产吗
  • 营业执照是什么字体
  • 存货报废进项税转出吗
  • 取得抵债资产
  • 制造费用主要核算项目
  • 在建工程待摊支出结转
  • 提取盈余公积的会计科目
  • 收到社保局返还的各类社保款项应从哪个表单发起
  • 不动产发票开具规则
  • 分公司往子公司投资如何做税务处理?
  • 取得航空公司收票的票据
  • 替别人公司开发票违法吗
  • 鉴证咨询服务费可以抵扣吗
  • 开票金额和税款的关系
  • 工程已完工未开发票确认收入吗
  • 餐饮业怎样做账
  • 三星笔记本预装win8改win7好吗
  • linux安装软件怎么安装
  • centos6启动不了
  • windowsxp文件夹里面的文件突然消失
  • ubuntu搭建go环境
  • mac怎么安装安装包
  • win10系统无法运行exe文件
  • win8.1应用商店不能装软件,提示此项应用不在提供
  • perl中的$1
  • 炉石传说开发人员卡牌
  • js仿QQ中对联系人向左滑动、滑出删除按钮的操作
  • 批处理执行bat文件
  • jquery设置鼠标样式
  • linux百度网盘安装
  • js null,undefined,字符串小结
  • jquery mvvm框架
  • 监听页面滚动事件
  • 水利建设基金的计提与会计处理
  • 朝阳区下面分几个区
  • 退回的汽车保险入什么科目
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设