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

  • 教你这个运营方法,千万别错过!(运营怎样)

    教你这个运营方法,千万别错过!(运营怎样)

  • 华为mate50pro支持5g吗(华为mate50pro支持多少w快充)

    华为mate50pro支持5g吗(华为mate50pro支持多少w快充)

  • 抖音如何放大局部(抖音怎么放大局部)

    抖音如何放大局部(抖音怎么放大局部)

  • 登录别人的qq空间别人会有提示吗(登录别人的qq空间需要验证)

    登录别人的qq空间别人会有提示吗(登录别人的qq空间需要验证)

  • 计算器的clock键是什么键(计算器lock键是什么意思)

    计算器的clock键是什么键(计算器lock键是什么意思)

  • 怎么使用腾讯课堂上课(怎么使用腾讯课堂上网课)

    怎么使用腾讯课堂上课(怎么使用腾讯课堂上网课)

  • excel表格筛选条件怎么设置(excel表格筛选条件区域)

    excel表格筛选条件怎么设置(excel表格筛选条件区域)

  • 点开qq对话框对方知道吗(qq打开对话框对方不会知道吧)

    点开qq对话框对方知道吗(qq打开对话框对方不会知道吧)

  • nova5pro微信视频怎么开美颜(nova5pro微信视频可以设置么)

    nova5pro微信视频怎么开美颜(nova5pro微信视频可以设置么)

  • lxe是什么文件(lxe是什么文件格式)

    lxe是什么文件(lxe是什么文件格式)

  • ipadmini2能不能插手机卡(ipadmini2可以用airpods吗)

    ipadmini2能不能插手机卡(ipadmini2可以用airpods吗)

  • rx580显卡配什么主板(rx580显卡配什么洋垃圾CPU)

    rx580显卡配什么主板(rx580显卡配什么洋垃圾CPU)

  • g90t相当于骁龙什么处理器(g90t相当于骁龙多少?)

    g90t相当于骁龙什么处理器(g90t相当于骁龙多少?)

  • 信息网络主要划分为哪几类(信息网络主要划分)

    信息网络主要划分为哪几类(信息网络主要划分)

  • 华为手机人工智能叫什么(华为手机人工智能语音助手怎么打开)

    华为手机人工智能叫什么(华为手机人工智能语音助手怎么打开)

  • 华为mate30pro发布时间(华为mate30pro发布会)

    华为mate30pro发布时间(华为mate30pro发布会)

  • 如何关闭小爱同学搜索框(如何关闭小爱同学功能)

    如何关闭小爱同学搜索框(如何关闭小爱同学功能)

  • 华为手机强制恢复出厂设置(华为手机强制恢复出厂设置后激活)

    华为手机强制恢复出厂设置(华为手机强制恢复出厂设置后激活)

  • 抖音评论怎么发动态表情(抖音评论怎么发图片)

    抖音评论怎么发动态表情(抖音评论怎么发图片)

  • 华为手机消息提醒在哪(华为手机消息提示音怎么设置)

    华为手机消息提醒在哪(华为手机消息提示音怎么设置)

  • 华为p30pro指示灯在哪(华为p30pro指示灯闪烁)

    华为p30pro指示灯在哪(华为p30pro指示灯闪烁)

  • 怎么录微信语音的声音(iPhone怎么录微信语音)

    怎么录微信语音的声音(iPhone怎么录微信语音)

  • windows资源管理器是采用哪种方式对电脑中的信息资源进行管理的(windows资源管理器关掉了怎么办)

    windows资源管理器是采用哪种方式对电脑中的信息资源进行管理的(windows资源管理器关掉了怎么办)

  • 华为三键设置在哪(华为智能手机怎么设置三键)

    华为三键设置在哪(华为智能手机怎么设置三键)

  • 华为p30卡槽在哪里(华为p30卡槽哪个是卡1)

    华为p30卡槽在哪里(华为p30卡槽哪个是卡1)

  • 华为nova4锁屏时间位置怎么改(华为nova4锁屏时间设置在屏幕上方)

    华为nova4锁屏时间位置怎么改(华为nova4锁屏时间设置在屏幕上方)

  • 华为手机放大镜怎么开(华为手机放大镜怎么取消设置功能)

    华为手机放大镜怎么开(华为手机放大镜怎么取消设置功能)

  • win11系统怎么更新驱动程序? win11驱动程序更新的五种方法(Win11系统怎么更换桌面壁纸)

    win11系统怎么更新驱动程序? win11驱动程序更新的五种方法(Win11系统怎么更换桌面壁纸)

  • 预收三年租金 房产税怎么算
  • 注册税务师报名条件
  • 行政单位要不要税号
  • 公司车维修费
  • 固定资产折旧直接计入成本
  • 长期债权投资是什么科目借贷
  • 全额计提坏账准备后,多久核销应收账款
  • 公司购买煤炭的会计分录
  • 企业减免税享受什么
  • 企业亏损法定盈亏是什么
  • 企业呆账的处理方式
  • 不可修复废品损失会计分录
  • 房租费没有发票怎么做账务处理
  • 公司委托收款该怎么办
  • 流动负债中的短期借款
  • 营改增后银行增值税如何缴纳
  • 退回多交企业所得税分录
  • 建筑劳务公司派遣人员工资发放凭证
  • 企业经营者试行什么制度
  • 企业会计准则基本准则的主要内容
  • 进口商品合同
  • 外国常驻代表机构经费支出
  • 委托贷款利息收入怎么开发票
  • 建设工程是否可以约定非工程所在地仲裁委仲裁
  • 应收账款周转天数正常范围
  • 车辆购置税如何做账
  • 什么发票可以抵成本
  • 企业生产销售白酒取得的下列款项中,应并入
  • 鸿蒙工具箱巅峰模式有什么用
  • 跨年发票能不能报销
  • 其他应收款年末余额较大
  • 融资租赁与经营租赁的联系
  • 身份证php编写
  • 微信公众号实现对应查询
  • php如何实现
  • thinkphp 模板标签
  • 如何用html编写一个简单的网页
  • 企业对外投资资产的成本可以税前扣除吗
  • 专用发票有几联?
  • 处置抵债资产的账务处理
  • 所得税费用为什么不计入营业利润
  • 出纳记账凭证怎么写
  • 含税与不含税的区别是什么
  • 餐饮服务收入的增值税
  • 企业固定资产内部控制审计研究论文
  • mysql的主从
  • 单位出租不动产,按照5%的征收率计算应纳税额
  • 红冲更正的正确分录
  • 财务费用报销流程最后环节出纳
  • 累计折旧计提会计分录
  • 谈一谈企业应如何做才能更好地、有效地激励员工
  • 土地转让需要批准吗
  • 单位缴纳工会经费有什么用
  • 应付职工薪酬代扣社保
  • 把上级机关来文转给下级机关的通知
  • 预付在建工程款的会计分录
  • 福利费要交个人所得税嘛
  • 其他综合收益属于什么科目借贷方向
  • 商品型企业
  • win10安装mysql教程
  • java调用jni
  • 侧边栏应用
  • 因windowssystem32
  • redhat系统安装gvim
  • windowsxp教程
  • centos安装ufw
  • freebsd操作命令
  • windows ftp软件
  • linux分割分区
  • 半自动化系统
  • win8系统可以装win7系统吗
  • window预览
  • linux block io
  • ansi std
  • python中列表的遍历
  • 优化lr
  • JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
  • jquery知识点总结
  • 实木地板什么
  • 增值税综合税率是什么意思啊造价
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设