uni-app的基本使用

最新推荐文章于 2024-03-27 21:18:58 发布

原创

最新推荐文章于 2024-03-27 21:18:58 发布 · 404 阅读

0 ·

CC 4.0 BY-SA版权

张鱼小丸子

文章标签：

#uni-app

在我们使用uni-app之前，我们首先先了解一下目录结构

pages 定义uniapp页面专用的目录

components 自定义第三方组件，

static 静态资源目录

uni_modules uniapp插件自动下载的目录

App.vue main.js 入口文件的内容

pages.json是uniapp的全局配置文件

globalStyle 全局配置项

pages 小程序页面的列表数据

tabbar 底部tabbar配置

subPackages 分包加载

以上是我们uni-app的目录，以及他们的作用是什么

代码展示

{
    "pages": [ //pages数组中第一项表示应用启动页，
        {
            "path": "pages/home/home",
            "style": {
                "navigationBarTitleText": "首页",
                "enablePullDownRefresh": false

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

是张鱼小丸子鸭

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

uni-app开发总结

2301_77865212的博客

05-22

435

原因：原生的uni-tabbar在手机端app没有完全隐藏，导致遮住了自定义的底部导航栏解决：把uni-tabbar隐藏就行了。

Uni-App基本使用方法

Always-Learning

01-24

845

配置环境创建一个新页面的步骤在pages文件夹下建立一个和index相似的文件夹增加json内容，注意修改路径，下面的这两个，谁在前面谁是首页。样式和sass 小程序中的750rpx等于屏幕宽度 100vw 等于屏幕的宽度 100vh == 屏幕的宽度安装sass依赖 cnpm i node-sass sass-loader 第二步：修改下面的style ...

参与评论您还未登录，请先登录后发表或查看评论

uni-app的基本使用--第一节

从人到猿

03-30

1133

uni-app的基本使用基础部分：环境搭建页面外观配置数据绑定 uni-app的生命周期组件的使用 uni-app中样式学习在uni-app中使用字体图标和开启scss 条件注释跨端兼容 uni中的事件导航跳转组件创建和通讯，及组件的生命周期 uni-app中使用uni-ui库 uni-app介绍官方网页 uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发...

uni-app快速入门

GSC648835757的博客

05-27

6243

uni-app是一个非常优秀的跨平台应用开发框架，具有上手简单、开发效率高、性能优秀等优点。通过学习uni-app的基础语法、组件、API，可以快速掌握uni-app的开发技能，为开发跨平台应用打下坚实的基础。

uniapp详细介绍

最新发布

11-22

在uni-app双弹窗插件的package.json文件中，会列出了插件的基本信息、版本、依赖库等关键数据，这对于开发者了解插件使用和兼容性是至关重要的。接下来是readme.md文件，这通常是项目文档的主要部分，其中包含了...

Uni-app快速入门+项目实战

qq_43405603的博客

06-20

2892

对uni-app进行全局配置的，决定页面文件的路径、窗口样式、原生的导航栏、底部的tabbar，它类似于微信开发者工具小程序中的app.json。简介：Uni-app是基于Vue+微信小程序体系，且基Uni-app可以开发微信小程序、H5、安卓app、ios-app等多端项目。9、入口文件main.js——跟以前vue的差不多，引入vue，实例化一个对象并且挂载到页面上去。11、uni-app生命周期——支持vue声明周期，新增了应用生命周期和页面生命周期。6、编译配置——vue.config.js。

uniapp小程序 subPackages分包加载配置

weixin_37654372的博客

01-10

2195

uniapp小程序 subPackages分包加载配置

uniapp 自定义 Loading

MAIMIHO的博客

05-29

9192

components/m-loading/m-loading.vue <template> <view class="loading-box" v-show="show" @click="dismiss"> <image class="rotate" src="/static/loading.svg"></image> </view> </template> <script> export defau.

uni-app实现加载公用组件的封装

Front小思的博客

07-05

6209

App启动时可以根据业务需求添加加载进入~~，下面自己封装一个可全局使用的加载组件。创建组件：components/view-loader.vue <template> <view> <view class="fidex-loang" v-if="myloader"> <view class="jiazai-view"> <image class="loang-jiazai" src="https://timgsa.baidu..

uniapp自定义页面跳转loading

qq_46756707的博客

03-29

6988

在开发uniapp项目时，页面切换的过程中，经常需要添加loading效果以提高用户体验。uniapp自带的loading效果无法自定义，所以想着自己实现一个。

uniapp配置分包

weixin_72503508的博客

03-13

436

uniapp配置小程序分包

uniapp 微信小程序分包配置

I_JAVA_U的博客

03-27

686

原来是在pages目录下原path是”pages/pip_con/pip-con-list“ 放在分包内之后需要修改path，并且原来页面跳转的地方也需要修改为分包之后的路径。官方要求，微信小程序发布上线，（不分包）小程序大小不超过2M，使用分包后小程序主包大小不超过2M，总包不超过20M，，超过限制则无法编译上线。使用分包可以有效的使你的程序快速进入（不需要加载所有的资源，页面，只是加载主包（一般来说就是你的所有Tabbar页面）肯定是快。比如package2、package3……

uni-app加载中自定义组件的封装

qq_46199553的博客

08-11

722

uni-app

uni-app基本用法

07-12

Uni-app 是一种跨平台的前端开发框架，可以使用 Vue.js 来开发多个平台的应用程序，如小程序、H5、App 等。Uni-app 提供了一套统一的 API 和组件库，使得开发者可以在不同平台上共享代码和逻辑，提高开发效率。以下是 Uni-app 的基本用法： 1. 安装 Uni-app：在命令行工具中使用 npm 或者 yarn 安装 Uni-app 的命令行工具。 2. 创建项目：使用命令行工具创建一个新的 Uni-app 项目，可以选择不同的模板和目标平台。 3. 开发页面：在项目目录中找到 `pages` 文件夹，里面存放着不同页面的文件夹。在每个页面文件夹中，可以编写对应的 `vue` 文件，其中包括模板、样式和逻辑。 4. 页面导航：Uni-app 提供了 `uni.navigateTo`、`uni.redirectTo`、`uni.switchTab` 等 API 来实现页面之间的导航。 5. 数据绑定：Uni-app 使用与 Vue.js 相同的数据绑定语法，在 `vue` 文件中使用双大括号语法 `{{ }}` 来插入变量，并使用指令来实现条件渲染、循环等功能。 6. 组件化开发：Uni-app 支持组件化开发，你可以创建自定义组件，并在页面中进行复用。 7. API 调用：Uni-app 提供了一套统一的 API，可以调用不同平台的原生功能，如获取用户位置、拍照、支付等。 8. 平台差异处理：由于不同平台的特性和限制不同，Uni-app 提供了 `uni-platform` 和 `uni-xxxx` 等全局对象来处理平台差异问题。 9. 打包和发布：使用命令行工具进行项目打包，并将生成的文件发布到各个平台的开发者账号上。这些是 Uni-app 的基本用法，希望对你有所帮助！如果你还有其他问题，请继续提问。