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

  • QQ群推广的经验心得(qq群推广app怎么赚钱)

    QQ群推广的经验心得(qq群推广app怎么赚钱)

  • 我的电脑没有声音了怎么回事(我的电脑没有声音)(我的电脑没有声音了怎么解决)

    我的电脑没有声音了怎么回事(我的电脑没有声音)(我的电脑没有声音了怎么解决)

  • 钉钉加入会议在哪里(钉钉加入会议在哪里打开)

    钉钉加入会议在哪里(钉钉加入会议在哪里打开)

  • 华为P30手机怎么设置通用来电背景(华为p30手机怎么当空调遥控器)

    华为P30手机怎么设置通用来电背景(华为p30手机怎么当空调遥控器)

  • OPPO Ace2的机身尺寸是多少(oppoace机身尺寸)

    OPPO Ace2的机身尺寸是多少(oppoace机身尺寸)

  • 小米账号退出不了(小米账号退出不了可以刷机吗)

    小米账号退出不了(小米账号退出不了可以刷机吗)

  • 为什么压缩后的文件还是那么大(为什么压缩后的文件比压缩前还大)

    为什么压缩后的文件还是那么大(为什么压缩后的文件比压缩前还大)

  • 手机无线网络显示感叹号上不了网,怎么办(手机无线网络显示已停用是什么意思)

    手机无线网络显示感叹号上不了网,怎么办(手机无线网络显示已停用是什么意思)

  • 微软下载系统要钱吗(在微软下载win10)

    微软下载系统要钱吗(在微软下载win10)

  • 淘宝东西在路上不想要了怎么办(淘宝商品在路上可以退款吗)

    淘宝东西在路上不想要了怎么办(淘宝商品在路上可以退款吗)

  • 抖音怎么看别人什么时候在线(抖音怎么看别人不留访客记录)

    抖音怎么看别人什么时候在线(抖音怎么看别人不留访客记录)

  • 小米黑鲨充不进去电怎么办(黑鲨充电充不进去)

    小米黑鲨充不进去电怎么办(黑鲨充电充不进去)

  • 苹果7电信版能用移动卡吗(苹果电信版能用移动卡吗)

    苹果7电信版能用移动卡吗(苹果电信版能用移动卡吗)

  • 苹果5s怎么强制开机(苹果5s怎么强制解锁)

    苹果5s怎么强制开机(苹果5s怎么强制解锁)

  • 苹果手机怎么发流星短信(苹果手机怎么发实况照片给朋友)

    苹果手机怎么发流星短信(苹果手机怎么发实况照片给朋友)

  • 芝麻鲸选是什么平台(芝麻鲸选骗局)

    芝麻鲸选是什么平台(芝麻鲸选骗局)

  • 接码平台能注册微信号吗(接码平台能注册软件吗)

    接码平台能注册微信号吗(接码平台能注册软件吗)

  •  word怎么设置纸型16开(Word怎么设置纸张方向为横向)

    word怎么设置纸型16开(Word怎么设置纸张方向为横向)

  • soulmat需要多久能亮(soul达到soulmate要多久)

    soulmat需要多久能亮(soul达到soulmate要多久)

  • windows11如何投影到此电脑?win11投影到此电脑的方法(win11系统怎么投屏)

    windows11如何投影到此电脑?win11投影到此电脑的方法(win11系统怎么投屏)

  • b站B导的yoloV7版本添加注意力机制(b站导出预设)

    b站B导的yoloV7版本添加注意力机制(b站导出预设)

  • 营业现金比率是用经营活动净流入还是经营活动流入
  • 年度企业所得税申报时间
  • 一般纳税人公司抵扣
  • 小企业如何做帐
  • 小规模减免的增值税怎么做账
  • 未收回的货款是企业资产吗
  • 更正申报多交的个税
  • 企业购买雇主责任险会计分录
  • 交了进口增值税还要交增值税吗
  • 原材料的合理损耗
  • 资产负债表上的资产是原值还是净值
  • 个人独资企业税率表2023最新
  • 周转材料摊销属于什么费用
  • 网银年费属于财务费用哪一项
  • 营改增后银行增值税如何缴纳
  • 城建税及教育费附加税怎么算
  • 开具出口发票时免税类型怎么选择?
  • 代收车船税是什么意思必须收吗
  • 金税盘怎么增加复核人
  • 代扣代缴的社保需要计提吗
  • 筹建期间的工资可以直接记到管理费用吗
  • 技术合同与购销合同区别
  • 税基式减免的内容有哪些?
  • 工程施工开发票如何进行会计核算?
  • 公司注销时账面处理
  • 新成立企业什么时候有财务报表
  • 电费预提费用
  • 企业采用的会计计量基础属于什么
  • php生成guid
  • php运用于哪些领域
  • 已入账未抵扣的发票开红字发票
  • 电子商票到期后多少天有效?
  • php获取网页源码
  • php企业管理系统
  • 申请专用发票怎么申请
  • yii2-admin
  • 材料成本差异的会计分录
  • 确认收入需要哪些资料
  • 大前端技术架构
  • window11预览版怎么样
  • 主营业务成本记错了怎么调整
  • 调整以前年度销售收入
  • 差旅费包干是什么意思
  • 本期应纳税额减征额是什么意思
  • 事业周转编制
  • 工程结算如何快速审核
  • 企业可以一次性现金的方式发放工资
  • sql分组计算
  • 进出口贸易公司取名字大全
  • 股东打给公司的投资款
  • 软件产品增值税即征即退
  • 银行承兑到期之前怎么办
  • 公司社保外包了,没给我社保卡怎么办?
  • 产品保修要钱吗
  • 厂家给的返利应该怎么做会计分录
  • 外贸企业进项税转出怎么申报
  • 预付账款业务
  • 库存现金的主要活动
  • 待摊费用取消了怎么做账
  • 销售方运输收入分录
  • 普通发票作废如何恢复
  • 银行转账支付方式包括哪些
  • 定额发票可以用于事业单位报销
  • 某项租赁合同,租赁期为8年,每年年末支付租金100万
  • solaris命令
  • 怎么提高windows7性能
  • win7桌面整理软件
  • 忘记centos密码
  • mac book air安装
  • Node.js中的事件循环是什么
  • Android: AudioFlinger中AudioPolicy的简单介绍
  • python第三方库文档怎么看
  • python向oracle写入
  • 微信气泡png
  • 国家税务总局里面怎么改办税人
  • 广东省广州市国家安全局
  • 亚马逊网上商城
  • 税务志愿者服务队
  • 广东省电子税务局官网
  • 从印度往中国邮寄药品
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设