首页 > 其他分享 >uni-app基本了解

uni-app基本了解

时间:2022-11-07 17:32:42浏览次数:72  
标签:浏览器 项目 app 了解 static uni HBuilderX


安装HBuilderX

推荐使用HBuilderX开发uni-app,可以在​​官网​​下载。我们如果下载的是标准版,那我们在HBuilderX运行的时候会帮我们下载一些uni-app插件,我们重启一下项目就可以。

创建uni-app项目

在工具栏中选择文件–>项目,选择项目类型,填入项目名称,选择开发模板就可以创建一个项目。日常开发推荐uni ui项目模板。

在浏览器运行项目

如果我们希望在浏览器运行项目的时候,HBuilderX能够帮我们直接打开相应的浏览器,我们需要配置一下浏览器的路径。

在工具栏中选择工具–>设置–>运行配置,找到浏览器运行配置然后填入浏览器程序的安装路径。

uni-app基本了解_前端


不知道路径的话,可以在桌面浏览器图标上右键选择属性,查看路径。

uni-app基本了解_官网_02


将项目运行在其他地方,具体可查看官网​​相关​​。

static资源

编译到任意平台时,static 目录下的文件均会被完整打包进去,且不会编译。非 static 目录下的文件(vue、js、css 等)只有被引用到才会被打包编译进去。
static 目录下的 js 文件不会被编译,如果里面有 es6 的代码,不经过转换直接运行,在手机设备上会报错。
css、less/scss 等资源不要放在 static 目录下,建议这些公用的资源放在自建的 common 目录下。

新增页面

通过HBuilderX开发 uni-app 项目时,在 uni-app 项目上右键“新建页面”,HBuilderX会自动在pages.json中完成页面注册,开发更方便。
删除页面的时候不仅将页面删除,配置也要相应删除。

生命周期函数

参考​​官网​​。

学习

  1. ​​基本知识点的记录​​
  2. ​​页面跳转的学习​​
  3. ​​项目搭建案例​​


标签:浏览器,项目,app,了解,static,uni,HBuilderX
From: https://blog.51cto.com/u_15867142/5830155

相关文章

  • 在uni-app中引入uView
    在uni-app中引入uView的方式有两种:通过npm下载//如果您的根目录没有package.json文件的话,请先执行如下命令://npminit-ynpminstalluview-ui//更新//npmupdateuvi......
  • uni-app框架开发app中出现的问题(持续更新中...)
    uni-app框架开发app中出现的问题​​uview中图标不显示​​​​无法使用彩色iconfont​​​​滚动回顶部​​​​监听横屏和录屏的变化​​​​ucharts双指缩放24小时曲线​......
  • 03-APP的启动过程
    声明:原创文章,转载请备注来源: https://shuwoom.com/?p=142备注:本文的Android源码版版本都是基于Android4.4.3为了更好地理解APK加壳加固原理,我们需要对APP的启动流程进行......
  • PowerApps Canvas App Vs Model-driven App Vs Portal App
    TheCanvasAppinPowerAppsCanvas isoneofthemaintypesofapplicationsthatyoucancreateinPowerApps.Itgivesyouablankcanvasandallowsyoutod......
  • call()、apply()、bind()的作用和区别
    call、apply和bind都是用来修改this指向的,这三个方法都是函数对象的方法bind可自行测试由上图发现,当函数调用call方法和apply方法时,是和正常调用函数一样的,当不传递参数,......
  • APP开发中如何减小apk安装包大小
    一些减少应用程序大小的解决方案:1.压缩PNG和JPG每当您必须在应用程序内使用图像(例如演练屏幕)并且您不想从外部主机调用图像时,您应该压缩您的PNG和JPG,因为高质量的图像......
  • 智能烤箱APP开发应具备的功能有哪些
    1.智能连接智能烤箱APP平台会给用户提供智能连接功能,用户可通过蓝牙或者wifi直接进行连接,连接后用户即可直接使用智能烤箱APP进行操作。2.烘焙配方智能烤箱APP平台会给......
  • 处理uniapp激励广告
    使用uniapp查看广告getAdsItem(item){//看广告//console.log(item.adTitle,item)if(app.getIsVisitor()){......
  • uniapp自定义组件的使用--记录
    在pages.json同级目录下创建目录和文件:components:  videoComp:VideoPlaySelf.vueVideoPlaySelf.vue内容<template><videoclass="video"id="myVideo"......
  • uniapp引入微信小程序自定义视频组件--记录
    官方文档:https://zh.uniapp.dcloud.io/tutorial/miniprogram-subject.html在pages.json同级目录下创建目录和文件:wxcomponents:   my-video-play:index.js ......