uniapp开发小程序案例_uniapp开发的app有哪些

uniapp 总结篇（小程序）

前期概述：做了很长时间的小程序了，在此做一个完整的项目总结，希望可以帮助到正在学习、开发的小伙伴。此篇文章并不涉及一些原理，更重要的是帮助大家实现功能、流程。

uniapp 还是很强大的可以开发小程序、h5、pc、app等，总的来说他是一款跨平台的应用框架。

一、创建项目及初始化步骤

（1）创建

（2）启动小程序

启动小程序 最好现在uniapp中配置一下小程序的appid 否则可能会出现启动不了的情况
步骤：

1.公众平台查看自己的小程序id 开发 → 开发管理 → 开发设置 → 找到appid

2.在uniapp 中进行配置目录下的manifest.json → 小程序配置 → 填写小程序appid

（3）目录结构

├── pages # 页面（每个页面可以作为一个文件）
├── static # 静态资源（图片、音视频）
├── unpackage # 打包文件
├── App.vue # 主文件（可以定义全局方法、样式、变量）
├── main.js # 入口（引入插件）
├── pages.json # 页面路由
├── package.json # npm相关文件
└── uni.scss # 常用于定义全局样式变量、第三方ui库的样式（插件）

1. pages

更多详细介绍：uni-app官网

每次想要在pages里新加一个页面都要在pages.json里配置一下

下面列举一些常用 style 配置项，一般情况下足以开发更多：uni-app官网

属性类型默认值描述平台差异说明navigationBarBackgroundColorHexColor#000000导航栏背景颜色（同状态栏背景色），如”#000000″navigationBarTextStyleStringwhite导航栏标题颜色及状态栏前景颜色，仅支持 black/whitenavigationBarTitleTextString导航栏标题文字内容navigationStyleStringdefault导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意小程序 7.0+、百度小程序、H5、App（2.0.3+）disableScrollBooleanfalse设置为 true 则页面整体不能上下滚动（bounce效果），只在页面配置中有效，在globalStyle中设置无效小程序（iOS）、百度小程序（iOS）backgroundColorHexColor#ffffff窗口的背景色小程序、百度小程序、字节跳动小程序、飞书小程序、京东小程序

2. App.vue

一般常用在app.vue里面使用的 onLunch、globalData、style

1.onLunch 只会在进入程序的时候执行一次，一般搭配搭建或等的code ，想要app.vue调取methods 的方法记得用 getApp.方法名( )

2.globalData：常用于定义一些公共的变量、例如图片路径资源、手机是否是ios 或安卓。使用：现在js中引入 1. import app from ‘@/App.vue’ 2. platform: app.globalData.platform,

3.style 定义公共的全局样式例如垂直水平居中、布局、公共类目样式都可以定义

（4）推荐ui库

uniapp: uView 2.0 – 全面兼容nvue的uni-app生态框架 – uni-app UI框架

如果有功能不好去实现也可以去uniapp 的插件市场 DCloud 插件市场

原生小程序（扩展）：Vant Weapp – 轻量、可靠的小程序 UI 组件库

（5）页面生命周期

常用生命周期函数名说明执行时机使用场景onLoad监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参），参考示例页面初始进入只在初始化时使用一次onShow监听页面显示。页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面每次进入需要每次更新数据onReady监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发页面初始进入onLoad、onShow之后更多根据搭配插件使用 onHide监听页面隐藏每次离开更多于记录一些数据onUnload监听页面卸载最后离开卸载一些监听事件

onLoad 接受参数

A页面

B页面接受参数

（6）组件生命周期

组件支持的生命周期，与vue标准组件的生命周期相同。这里没有页面级的onLoad等生命周期如果想要发送请求可以在子组件的生命周期去执行

函数名说明平台差异说明beforeCreate在实例初始化之前被调用。详见(opens new window)created在实例创建完成后被立即调用。详见(opens new window)beforeMount在挂载开始之前被调用。详见(opens new window)mounted挂载到实例上去之后调用。详见 (opens new window)注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用Vue官方文档(opens new window)beforeUpdate数据更新时调用，发生在虚拟 DOM 打补丁之前。详见(opens new window)仅H5平台支持updated由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。详见(opens new window)仅H5平台支持beforeDestroy实例销毁之前调用。在这一步，实例仍然完全可用。详见(opens new window)destroyedVue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。详见(opens new window)

（7）底部导航

官方文档：uni-app官网

如果想要实现自定义底部导航可参考 UI库解决自定义切换闪动：小程序自定义tabbar 防止闪动

（7）页面跳转

扩展页面栈 getCurrentPages() 的使用

页面栈：常用于当前页面之前的页面的参数及修改之前页面的数据

首选在A页面做一个 navigateTo 的跳转到B页面然后打印一下页面栈

如果想要拿上一页面的值会采用拿到上页的页面参数

h5端和小程序的参数是有一些区别的如果想要修改某个页面栈里的值只需要对象点就可以直接修改了

使用场景：购买商品时的地址切换（点击一项后把上页的地址替换掉）

（8）项目功能场景

除了调接口渲染列表内容之外、剩下的可能就需要小程序提供的API 去实现一些功能、例如授权登录、经纬度、设置位置信息、上传图片等。

1. 登录

一般的授权登录流程大概是

1. 调用uni.login() code

2. 通过code调取后端接口 sessionkey 和 openId

3. 授权用户信息后端需要的参数

4. 调用登录接口存储token

demo：

在小程序中也有像浏览器的locationstorage一样

2. 经纬度 getLocation

常用的使用上面代码就好了，如果失败可以继续优化一下想要的操作

如果后台要根据经纬度算距离记得type 改成 gcj02

3.根据地图选择位置 chooseLocation

4. 地图组件 map

属性名类型默认值说明平台差异说明longitudeNumber中心经度latitudeNumber中心纬度scaleNumber16缩放级别，取值范围为3-20高德地图缩放比例与小程序不同themeStringnormal主题（satellite 或 normal）只在初始化时有效，不能动态变更（仅Android支持）京东小程序min-scaleNumber3最小缩放级别App-nvue 3.1.0+、小程序2.13+max-scaleNumber20最大缩放级别App-nvue 3.1.0+、小程序2.13+layer-styleNumber/String1个性化地图App-nvue 3.1.0+、小程序2.13+markersArray标记点polylineArray路线飞书小程序不支持

一般的使用场景可能定位现在的坐标，或者做一些物流的路线

5. 上传图片 chooseImage

参数名类型必填说明平台差异说明countNumber否最多可以选择的图片张数，默认9见下方说明sizeTypeArray<String>否original 原图，compressed 压缩图，默认二者都有App、小程序、支付宝小程序、百度小程序extensionArray<String>否根据文件拓展名过滤，每一项都不能是空字符串。默认不过滤。H5(HBuilder X2.9.9+)sourceTypeArray<String>否album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项cropObject否图像裁剪参数，设置后 sizeType 失效App 3.1.19+successFunction是成功则返回图片的本地文件路径列表 tempFilePathsfailFunction否接口调用失败的回调函数小程序、AppcompleteFunction否接口调用结束的回调函数（调用成功、失败都会执行）

一般都是通过选择图片后拿到本地路径再上传到服务器服务器链接图片

uniapp 上传文件封装方法

5. 图片预览 previewImage

参数名类型必填说明平台差异说明currentString/Number详见下方说明current 为当前显示图片的链接/索引值，不填或填写的值无效则为 urls 的第一张urlsArray<String>是需要预览的图片链接列表indicatorString否图片指示器样式，可取值：”default” – 底部圆点指示器； “number” – 顶部数字指示器； “none” – 不显示指示器。ApploopBoolean否是否可循环预览，默认值为 falseApplongPressActionsObject否长按图片显示操作菜单，如不填默认为
保存相册App 1.9.5+successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

预览要的是网络链接

6. 支付 requestPayment

支付这点没什么太难的直接调用wx的requestPayment 方法就好了毕竟是在环境下内部已经封装好啦

7. 分页

在uniapp 中有一个事件 onReachBottom (和methods同级) 当他触底时就可以去请求最新的数据

上面的方法是触底了如果当前页大于等于最后一页就return 停止执行如果用scroll-view 请去官方文档看 scroll-view 的方法哈

8.弹窗

uni.showToast(OBJECT)

参数类型必填说明平台差异说明titleString是提示的内容，长度与 icon 取值有关。iconString否图标，有效值详见下方说明。imageString否自定义图标的本地路径（app端暂不支持gif）App、H5、小程序、百度小程序maskBoolean否是否显示透明蒙层，防止触摸穿透，默认：falseApp、小程序durationNumber否提示的延迟时间，单位毫秒，默认：1500positionString否纯文本轻提示显示位置，填写有效值后只有属性生效，有效值详见下方说明。AppsuccessFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

常用

uni.hideToast() 隐藏弹框

uni.showLoading(OBJECT)

显示 loading 提示框, 需主动调用 uni.hideLoading 才能关闭提示框。

参数类型必填说明平台差异说明titleString是提示的文字内容，显示在loading的下方maskBoolean否是否显示透明蒙层，防止触摸穿透，默认：falseH5、App、小程序、百度小程序successFunction否接口调用成功的回调函数failFunction否接口调用失败的回调函数completeFunction否接口调用结束的回调函数（调用成功、失败都会执行）

（9）分享onShareAppMessage(OBJECT)

默认情况下是不允许分享的

需要添加两个方法

默认清空下分享的都是页面的默认配置项，如果想更改可以参考文档

参数名类型必填说明平台差异说明titleString是分享标题pathString是页面 path ，必须是以 / 开头的完整路径。注意：京东小程序，开头不要加’/’sigusoft小程序不支持imageUrlString否分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径。支持PNG及JPG。显示图片长宽比是 5:4descString否自定义分享描述支付宝小程序、字节跳动小程序、京东小程序bgImgUrlString否自定义分享二维码的背景图，建议大小750*950（网络图片路径）支付宝小程序

（8）复用

1. uniapp 上传文件封装方法

2.uniapp适配ipad端平板端

3.uniapp app 人脸识别（倒计时拍照，已封组件）

4.小程序自定义tabbar 防止闪动

5. 小程序腾讯云ocr 身份证识别

6. uniapp 解决ios上拉下拉白边处理

7. uniapp 解决滑动穿透（模态滚动影响页面滚动）

8. uniapp分包

9.小程序实现实时语音识别腾讯云

10. 小程序通过经纬度省市区（腾讯云）

总结以上是开发的一些基础方法等使用API 如果需要其他功能还需自己去翻阅文档，遇到问题可以去搜一些文章、插件市场、官方企鹅群希望可以帮着刚开发不久的小伙伴 ^_^