相关动态
置顶uniapp开发小程序精选热门
2024-12-30 08:46
  1. 微信定义的这套语法,wxml、wxs,以及wx:if等语法,私有化太强。
  2. uni-app支持跨端多平台编译,多端开发成本低。
  3. 基于通用的前端技术栈,采用vue语法+微信小程序api,没有额外的学习成本。

uni-app官方推荐的开发工具为HBuilderX,不过由于本人习惯使用vscode,因此介绍如何在vscode中使用uni-app。

1.CLI工程

全局安装 vue-cli 3.x(如已安装请跳过此步骤)

通过CLI创建uni-app项目

此时,会提示选择项目模板,初次体验建议选择 项目模板,如下所示:

我这里选择默认模板。

2.安装vue语法提示插件vetur

<img src=https://developers.weixin.qq.com/community/develop/article/doc/“https://img-cdn-tc.dcloud.net.cn/uploads/article/20190827/f98722b481a8f8bdb29163a4d248926a.png” alt=“img” style=“zoom:67%;” />

3.目录结构

一个uni-app工程,默认包含如下目录及文件:

1.页面结构

页面结构和一般的vue一样,既有vue的生命周期,也有小程序的生命周期,如下所示:

2.tabbar和路由跳转

(1)tabbar

如果应用是一个多 tab 应用,可以通过 tabBar 配置项指定一级导航栏,以及 tab 切换时显示的对应页。

在 pages.json 中提供 tabBar 配置,不仅仅是为了方便快速开发导航,更重要的是在App和小程序端提升性能。在这两个平台,底层原生引擎在启动时无需等待js引擎初始化,即可直接读取 pages.json 中配置的 tabBar 信息,渲染原生tab。

(2)路由跳转

路由方式 页面栈表现 触发时机 初始化 新页面入栈 uni-app 打开的第一个页面 打开新页面 新页面入栈 调用 API uni.navigateTo、使用组件 <navigator open-type=“navigate”/> 页面重定向 当前页面出栈,新页面入栈 调用 API uni.redirectTo、使用组件 <navigator open-type=“redirectTo”/> 页面返回 页面不断出栈,直到目标返回页 调用 API uni.navigateBack 、使用组件 <navigator open-type=“navigateBack”/> 、用户按左上角返回按钮、安卓用户点击物理back按键 Tab 切换 页面全部出栈,只留下新的 Tab 页面 调用 API uni.switchTab 、使用组件 <navigator open-type=“switchTab”/> 、用户切换 Tab 重加载 页面全部出栈,只留下新的页面 调用 API uni.reLaunch、使用组件 <navigator open-type=“reLaunch”/>

3.生命周期

uni-app支持vue以及小程序原生语法的生命周期。

4.全局变量

(1)通过Storage来设置

设置缓存:uni.setStorageSync(key, value)

获取缓存:uni.getStorageSync(key)

删除缓存:uni.removeStorageSync(key)

(2)getApp()

需要在app.vue里设置变量 globalData

设置变量:getApp().globalData.key = xxx

获取变量:let key = getApp().globalData.key

(3)vuex

uni-app 内置了vuex

什么时候需要用vuex?

  • 当一个组件需要多次派发事件时。例如购物车数量加减。
  • 跨组件共享数据、跨页面共享数据。例如订单状态更新。
  • 需要持久化的数据。例如登录后用户的信息。
  • 当您需要开发中大型应用,适合复杂的多模块多页面的数据交互,考虑如何更好地在组件外部管理状态时。

5.分包

分包加载配置,此配置为小程序的分包加载机制。

因小程序有体积和资源加载限制,小程序平台提供了分包方式,优化小程序的下载和启动速度。

所谓的主包,即放置默认启动页面/TabBar 页面,以及一些所有分包都需用到公共资源/JS 脚本;而分包则是根据pages.json的配置进行划分。

在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,会把对应分包自动下载下来,下载完成后再进行展示。此时终端界面会有等待提示。

使用方法:

假设支持分包的 目录结构如下:

则需要在 pages.json 中填写

运行项目

发布项目

    以上就是本篇文章【置顶uniapp开发小程序精选热门】的全部内容了,欢迎阅览 ! 文章地址:http://sjzytwl.xhstdz.com/news/12652.html 
     栏目首页      相关文章      动态      同类文章      热门文章      网站地图      返回首页 物流园资讯移动站 http://sjzytwl.xhstdz.com/mobile/ , 查看更多   
最新文章
选对的很重要,2024年旗舰爆品手机选购指南手机怎么选「选对的很重要,2024年旗舰爆品手机选购指南」
时间过的真快,感觉刚刚迈入2024年,转眼前已经临近2024年的中旬了,而相对于如今的市场来讲,各手机厂家更是纷纷打出了不同的“
转载丨稻盛和夫:全员参与经营,人人都是经营者手机搜狐网「转载丨稻盛和夫:全员参与经营,人人都是经营者」
“既然社长都这么说了,那我们也应该努力,一起为企业经营出谋划策。”员工一旦具有这样的心态,就等于是对企业经营倾注了意识。
车载手机支架怎么选?看看这十大品牌,稳固又实用车载手机支架「车载手机支架怎么选?看看这十大品牌,稳固又实用」
不管是新手司机还是老司机,车载手机支架是行车路上必不可少的工具。不仅要抱紧手机,还要牢牢地固定在控制台上,不受复杂路况的
第五代“江姐”扮演者王莉与红色传承的十年情结手机搜狐网「第五代“江姐”扮演者王莉与红色传承的十年情结」
为传承红色经典,中国人民解放军空军政治部文工团大型民族歌剧《江姐》全国巡演再次启程。《江姐》于11月18日至11月29日,陆续在清
steam手机客户端steam手机版下载「steam手机客户端」
steam是一款很专业的游戏平台,steam为你提供丰富的游戏资讯信息,在这里用户可以查看超多游戏的动态,超多最新最热的游戏资讯在
寻仙万象宝盘全攻略手机搜狐网「寻仙万象宝盘全攻略」
战力提升之《万象宝盘》系统来了,本文约5800字,图片约100张,阅读需要阅读15分钟。完整学习需要50分钟。提示:本篇万象宝盘系
如何辨别蛋白粉真假手机搜狐网「如何辨别蛋白粉真假」
在北上广深等一线城市,毫不夸张地说,一百米一个健身房!就拿小编的健身房为例,晚上七点之后,完全人满为患,导致小编每每要下
更换手机时,教你一键把旧手机资料导入到新手机,简单又实用旧手机如何导入新手机「更换手机时,教你一键把旧手机资料导入到新手机,简单又实用」
点击上方蓝色字关注我们~我们的手机刚刚买回来的时候,里边是什么东西都没有,一些重要的资料,都会在我们的旧手机里边,要想把
如何选择适合自己的手机?拯救你的科技生活!手机「如何选择适合自己的手机?拯救你的科技生活!」
在现代生活中,手机几乎已经成为了人们不可或缺的工具。从通讯、社交到娱乐和工作,智能手机以其多功能性影响着我们的日常。然而
“5G 太耗电,关掉它!”关闭手机「“5G 太耗电,关掉它!”」
作者 | Carol出品 | CSDN(ID:CSDNnews)随着5G的普及,如今已经有很多手机用户已经体验到了5G的便捷
相关文章