一、app和小程序的区别
品牌型号：iPhone13pro
系统：iOS16.0
app和小程序的区别：
1、用户群体不同：APP是通过各大手机应用市场或者扫码下载来获取的，依赖的是手机用户群体；而小程序是基于微信开发的，用户群体则是来源于微信用户。
2、安装方式不同：APP需要下载，不同的APP安装包的大小也有所不同，但是都是需要占用手机内存空间；而小程序则无需下载，只需要在微信中扫码即可快速打开使用，不会占用手机内存。
3、开发成本不同：APP的开发会涉及到安卓和iOS两个版本，而且还要针对不同的机型进行适配开发，这样下来，开发所需要的时间和成本都是比较大的；而小程序的开发就比较简单了，基于腾讯框架进行开发，而且自动适配所有机型，开发时间和成本自然就小很多了。
4、引流推广不同：APP的推广内容是由运营者完全掌握的，推广方式不不受限制，推广的渠道也比较自由和广泛，但是APP需要用户下载，目前来说难度还是比较大；而小程序基于微信群，活跃度高，引流效果也是比较好的。小程序可以跟公众号进行相互跳转，这样就降低了推广难度，但是它会受到微信的限制。
二、小程序和app的开发成本对比
小程序与APP的开发成本对比，主要体现在开发周期、技术复杂度、平台适配性及后期维护等多个方面。小程序通常基于微信、支付宝等平台的开发框架，开发成本相对较低，因为它利用了平台提供的丰富API和组件，减少了从零开始搭建基础设施的需求。此外，小程序的开发周期较短，能够快速上线，且一次开发多平台适用，降低了跨平台开发的成本。
相比之下，APP的开发成本较高，因为它需要独立开发iOS和Android两个版本，涉及到底层系统的适配、UI设计的差异化处理以及复杂的审核流程。APP在功能实现上更为灵活，可以深度调用手机硬件功能，但这也意味着更高的技术门槛和更长的开发周期。同时，APP的后期维护成本也相对较高，包括版本更新、兼容性问题处理及用户反馈响应等。
手把手教你用uniapp开发一个app（一）
2024-10-22 10:04·小信先生1.邂逅uniapp
uniapp是Dcloud公司开发的使用vue.js开发所有前端应用的框架，我们只用写一套代码，就可以打包发布到华为商城、小米商城、Appstore等各大应用平台，也可以发布到微信小程序平台，更可以发布到支付宝、钉钉等应用平台。通俗易懂解释：以前开发app或者微信小程序，我们还要学习Android、ios开发、小程序开发等技术，太TMD麻烦，根本卷不动。现在有了uniapp这个框架之后，我们只需要懂vue，就可以通过vue开发出一个app应用。开发完之后你可以打包发布到各大应用平台，也可以打包发布成一个微信小程序。简直一箭多雕！2.HBuilderX安装与配置我们使用uniapp开发应用一般使用官方提供的HBuilderX开发工具。2.1HBuilderX介绍HBuilderX是Dcloud公司开发的一个轻便、极速、强大的IDE工具。这个开发工具内置了uniapp、vue框架，非常的好用。2.2下载安装HBuilderX公司官网：https://www.dcloud.io/hbuilderx.html2.3配置HBuilderX1.设置主题2.设置代码字体和大小工具-》设置2.4安装插件工具=》插件安装HbuilderX内置了很多常用的插件，我们也可以去插件市场单独下载安装其他插件3.新建基于Vue3的uniapp项目3.1新建项目文件-》新建-》项目新建基于Vue3的项目启动项目这里选择在chrome浏览器中打开F12，切换到手机预览模式3.2项目目录结构components：可复用的组件pages：页面static：静态资源，存放图片视频等main.js：Vue初始化入口文件App.vue：应用配置，用来配置App全局样式以及监听pages.json：配置页面路由、导航条、选项卡等页面类信息manifest.json：配置应用名称、appid、logo、版本等打包信息uni.scss：内置的常用样式变量4.uniapp页面我们运行项目之后，默认展示的是index.vue里面的内容打开页面我们发现script里面默认是Vue2的选项式API，接下来我们新建Vue3的组合式API页面。4.1新建页面新建页面默认会创建同名目录page.json会自动添加该页面的配置4.2uniapp页面标签4.2.1view和text在uniapp的项目中，不能写div和span标签，只能用官方提供的组件标签代替。其中view标签代替div标签，text代替span标签。<view><textclass="title">{{title}}</text></view>4.2.2image在uniapp的项目中，image标签用来加载图片。<imageclass="logo"src="/static/logo.png"></image>4.3pages.json:页面配置官网pages.json相关的文档：https://uniapp.dcloud.net.cn/collocation/pages.html#tabbar所有跟页面相关的配置都在pages.json这个文件里面。pages：单个页面的配置，path是该页面所在的路径，style是样式配置globalStyle：全局页面统一样式配置我们新建两个页面：index.vue和order.vue4.3.1页面展示顺序配置项中的第一个页面，作为当前工程的首页（启动页）运行项目，展示的是index.vue页面的内容这是因为index.vue的配置属性在最前面我们将order.vue的配置属性放在最前面保存之后，项目会优先展示order.vue的内容4.3.2单页面配置单个页面的配置主要是配置style属性navigationBarTitleText：导航栏标题文字内容navigationBarBackgroundColor：导航栏背景颜色navigationBarTextStyle：导航栏标题颜色及状态栏前景颜色，默认black，仅支持black/whitenavigationStyle：导航栏样式，默认default，仅支持default/custom。custom即取消默认的原生导航栏enablePullDownRefresh：是否开启下拉刷新，默认false单页面配置主要事项：1.navigationStyle默认是default，如果设置为custom，表示自定义，也就不会显示默认的页面导航栏。2.enablePullDownRefresh默认是false，不刷新。当页面需要重新加载新数据的时候可以设置为true。4.3.3全局页面配置当单个页面没有配置页面样式时，就展示全局页面设置的样式navigationBarTextStyle：导航栏标题颜色及状态栏前景颜色，仅支持black/whitenavigationBarTitleText：导航栏标题文字内容navigationBarBackgroundColor：导航栏背景颜色backgroundColor：下拉显示出来的窗口的背景色例：index.vue沒有配置style样式，默认显示全局页面的配置4.3.4底部导航栏配置底部导航栏需要在pages.json里面配置tabBar属性。tabBar中的list是一个数组，只能配置最少2个、最多5个tab，tab按数组的顺序排序。color：tab上的文字默认颜色selectedColor：tab上的文字选中时的颜色position：tabBar位置，默认bottom，可选topfontSize:文字默认大小list：tab列表pagePath：页面路径，必须在pages中先定义text：tab上按钮文字iconPath：图片路径selectedIconPath：选中时的图片路径这里设置index.vue、message.vue、user.vue三个页面为底部导航栏。5.内置组件官网关于内部组件的文档：https://uniapp.dcloud.net.cn/component/内置组件有很多，大家可以去官网查看文档学习，这里只列举几个常用的组件5.1按钮<buttonsize="default"type="primary">按钮</button><buttonsize="mini"type="warn">按钮</button>size:尺寸，只有default和mini两个选项type:类别，有primary、default、warn三个选项5.2input框<inputclass="uni-input"style="border:1pxsolidgray;"placeholder="请输入用户名"/><inputclass="uni-input":password="true"placeholder="请输入密码"/><inputclass="uni-input"type="number"placeholder="请输入数字"/>type：text、number、idcardplaceholder：输入框为空时占位符disabled：是否禁用maxlength：当type为Number时，最大输入长度，设置为-1的时候不限制最大长度5.3轮播图：swiper<swiperclass="swiper"circular:indicator-dots="true":autoplay="true"><swiper-item><viewclass="swiper-itemuni-bg-red">A</view></swiper-item><swiper-item><viewclass="swiper-itemuni-bg-green">B</view></swiper-item><swiper-item><viewclass="swiper-itemuni-bg-blue">C</view></swiper-item></swiper>indicator-dots:是否显示面板指示点indicator-active-color：当前选中的指示点颜色autoplay：是否自动切换duration：滑动动画时长，默认500interval：自动切换时间间隔，默认50006.扩展组件:uni-uiuniapp的内置组件比较少，缺少例如弹框、下拉列表等常见组件。为了满足大部分公司的功能需求，uniapp的公司DLCOUD提供了的一个跨端的ui库：uni-ui。uni-ui是基于vue组件的、flex布局的跨全端ui框架，它不包括内置组件，它是内置组件的补充。uni-ui官方文档：https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html接下来介绍一下uni-ui的使用方法方式一：直接新建内置uni-ui的项目在代码区输入u，拉出各种内置或uni-ui的组件列表，选择其中一个，即可使用该组件。<viewclass="container"><uni-cardtitle="知否技术"note="Tips">公众号:知否技术</uni-card></view>方式二：单独导入某个组件下载导入接着就可以在代码里面使用了7.页面跳转关于页面和路由的官方文档：https://uniapp.dcloud.net.cn/api/router.html#navigateto7.1跳转到指定页面：非TabBar页面uni.navigateTo()参数：url:页面路径例如:<template><viewclass="content"><buttontype="primary"@click="toOrder">跳转到订单页</button></view></template><scriptsetup>consttoOrder=()=>{uni.navigateTo({url:"/pages/order/order"})}</script><stylelang="scss"></style>注：该方法只能跳转非TabBar的页面，也就是说不能用navigateTo方法跳转底部导航页面。要跳转TabBar(底部导航)页面，只能使用switchTab方法跳转，例如：7.2跳转页面并携带参数1.跳转页面<template><viewclass="content"><buttontype="primary"@click="toOrder">跳转订单页面</button></view></template><scriptsetup>consttoOrder=()=>{uni.navigateTo({url:"/pages/order/order?age=18name=zhifou"})}</script><stylelang="scss"></style>2.获取参数从uniapp的周期函数onLoad获取，后续会详细介绍uniapp的生命周期<template><view>订单页</view></template><scriptsetup>import{onLoad}from"@dcloudio/uni-app"onLoad((option)=>{console.log("name"，option.name)console.log("age"，option.age);})</script>3.结果7.3返回上一页uni.navigateBack()：关闭当前页面，返回上一页面或多级页面参数：delta：默认1，返回的页面数，如果delta大于现有页面数，则返回到首页。例如：<template><view>订单页<buttontype="primary"@click="back">返回上一页</button></view></template><scriptsetup>constback=()=>{uni.navigateBack();}</script>
