uniapp小程序开发

发布于：2024-04-27 ⋅ 阅读:(20) ⋅ 点赞:(0)

很久没发文章了，一直都没有时间去总结，去年随便投了两家宁波的公司，本来是抱着试一试的心理，没想到刚去宁波第一个面试就过了，然后也懒得找，就同意了，我记得当时要的是1w，然后被老板一顿忽悠，一直画大饼，说基础工资8.5k＋奖金，但一直没看到过奖金，当时公司内就一位项目主管，一个产品经理，就我一个前端，我负责后台和小程序，项目是通过gitee上的开源项目，反正当时项目又多又乱，每天都在加班，每天都有事情做，明天都挺累的，差不多工作一个月后，两个领导都走了，公司老板又开始招人，陆陆续续扩招到了6个人，当两个领导都走了的时候，我也是准备走了，但被当时刚招来的新的产品留住了，当时是说会从零开发项目，我来负责后台或者小程序，当时的我也是很想自己从零开发项目，确实后面重新开发项目，但是新招的前端小伙伴不会小程序，虽然我也不会，但是还是让他开发后台，我负责小程序开发，那个时候也是时间比较赶，每天都很忙，虽然很忙，但也学到了很多，但是没有去记录下来，这确实挺后悔的，主要当时也没有时间去记录。到了12月份，十月份和十一月份的工资老板一直拖着不发，了解后才知道老板的合作伙伴不干了，原来老板一直都是空手套白狼，没出过钱，咱也不知道他为什么这么厉害，我怎么做不到，很困惑，所以就离开了

目前我是在杭州一家公司上班快一个月了，负责小程序开发，两个星期不到开发完第一个版，遇到的问题也稍微记录了一下，分享给大家！

如果大家遇到其他问题，可以在评论区分享一下，我也会记录下来的，喜欢的朋友可以点赞收藏！！！

搭建项目

  • uview组件库（下次准备使用vant-weapp组件库）
  • 请求封装（设置环境变量）
  • vuex

uview组件中的u-button标签宽度100%，不受size限制

找到uView-ui/components下的u-button样式将100%修改成auto给予外框，设置每个外框的大小

uview表单字体是竖着的

设置labelWidth的宽度

使用vant-weapp

  1. 从github下载vant包，zip格式的vant组件包:
  2. 项目根目录下新建wxcomponents/@vant  两个文件夹
  3. 把下载好的压缩包解压， 把dist放在刚才创建好的@vant文件下，并重命名为weapp
  4. App.vue中引入vant的样式
// 引入vant-weapp样式
@import '/wxcomponents/@vant/weapp/common/index.wxss';`

5. 在pages.json文件下的 "globalStyle" 下的 "usingComponents" 中按需引入

"globalStyle": { ... "usingComponents": { "van-button": "/wxcomponents/@vant/weapp/button/index" } },

适配方案

布局是使用flex布局，单位是使用rpx，该单位是小程序专属的适配单位
如果是开发app或者h5，个人建议使用flexble.js和rem布局
下载地址：

小程序不能强制用户登录获取用户信息，另外用户应当拥有一部分的小程序体验权限，当用户操作到涉及登录的功能时，用户理应拥有自主选择是否登录的权利。

所以我选择进入小程序是首页，当点击切换tab页面，或者点击按钮进去其他页面的时候都进行判断是否登录。

若首次进入是登陆页面

  1. 在vuex中设置变量管理登录状态
  2. App.vue中的onLaunch生命周期钩子，根据登陆状态进行跳转（异步操作导致页面不展示，所以加上延时器）
  3. 登陆界面，登陆按钮修改和储存登陆状态，不登陆按钮也需要将状态储存到本地，并返回上个页面操作
  4. 其他tab页面在onshow中检查登陆状态

基础库2.27.1以上版本都无法通过getUserInfo接口或者getUserProfile接口获取用户头像和昵称了，最好还是使用头像昵称填写能力获取

<button type="default" open-type="getUserInfo" @getuserinfo="wxLogin">一键登录微信小程序</button>
在wxLogin中调用login方法，获取code，如果你使用点击时间调用该方法的话，会被提醒不符合规范，小程序不允许你在他不知道的情况下调用login方法
<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">获取头像</button>
<input type="nickname" v-model="nickname" @change="getVxName" />

在线客服

<button open-type="contact">在线客服</button>

什么时候用onShow和onLoad

  • onLoad页面加载时调用，可以获取参数，通过options，只调用一次。
  • onShow页面显示时调用(启动/页面从隐藏到启动)，可调用多次

页面元素不够撑满整个屏幕，如何设置背景色

width: 100vw; 和 min-height: 100vh，如果不加min的话，超出的部分没有背景色

小程序导航栏背景图如何设置

  1. 在pages.json内去掉原生导航栏 "navigationStyle": "custom"
  2. 自定义导航栏

监听页面滚轮，给自定义导航栏修改背景色

使用 onPageScroll 方法监听页面滚动事件
实现思路:默认导航栏其实一直存在，只需初始时把导航栏透明度设为0，随着滚动，改变透明度即可

获取用户当前位置（经纬度获取省市区）

  1. 使用 uni.getLocation() 方法获取用户的经纬度信息
  2. 调用第三方地图服务的API，比如高德地图的逆地址解析服务（获取key和注册报名单）

隐私协议保护指引接入

  • 在 app.json 中配置 usePrivacyCheck: true
  • wx.getPrivacySetting 查询隐私授权情况。
  • wx.onNeedPrivacyAuthorization 监听隐私接口需要用户授权事件。
  • wx.openPrivacyContract 跳转至隐私协议页面。
  • wx.requirePrivacyAuthorize 模拟隐私接口调用，并触发隐私弹窗逻辑

如果用户拒绝授权，怎么办

  1. uni.getSetting 获取用户的当前设置，判断authSetting中是否有scope.userLocation
  2. uni.authorize 向用户发起授权请求
  3. uni.openSetting 返回用户设置的操作结果

图片有白边

  • 在uniapp中推荐使用image标签加载图片，使用img标签src不会联动
  • 在 App.vue 文件中的 <style> 标签中添加image { display: block; }

修改v-html内容的样式/修改rich-text图片样式

使用了正则表达式来匹配所有的标签

this.detailData.SceneryDetailIntroduce = this.detailData.SceneryDetailIntroduce.replace(/<img /g,
						'<img style="max-width:100%;height:auto;display:block; "')

小程序哪些地址需要在后台配置服务器域名

  1. 接口请求地址：包括小程序调用的后台接口地址，如获取数据、用户登录等接口。
  2. 图片/文件上传下载地址：如果小程序涉及到上传或下载图片、文件等操作，相关的地址也需要配置。
  3. WebSocket 地址：如果小程序使用 WebSocket 进行实时通讯，相关的 WebSocket 地址也需要配置。
  4. 支付回调地址：如果小程序涉及到支付功能，支付回调地址也需要配置。
  5. 第三方服务接口地址：如果小程序使用了第三方的服务接口，也需要将相关地址配置到服务器域名中

提示信息

  • 使用uView中的uni.$u.toast('预约成功')
  • uniapp自带的uni.showToast({title: '打开失败，稍后重试',icon: 'none'})
  • 弹窗：uni.showModal

解决uni.showToast提示信息一闪而过

  • 使用uni.showModal代替uni.showToast
  • 加定时器，uni.showToast提示信息超过两行自动省略，除非自行封装
setTimeout(() => { uni.showToast({ icon: 'none', title: '保存成功', mask:true,//超过7个显示问题 }); setTimeout(() => { uni.hideToast(); //关闭提示后跳转 uni.navigateBack({ delta: 1 }); }, 2000) }, 0);

使用日历时，选择的时间需要大于当天时间

// 获取当前时间的时间戳
const currentDate = new Date().getTime();
// 将选择的时间转换为时间戳
const selectedDate = new Date(this.selectedDate).getTime();
// 判断选择的时间是否大于当前时间
if (selectedDate > currentDate) {
					
} else {
uni.$u.toast('请提前一天选择预定时间')
}

uni-app 修改checkbox样式

//使用uniapp自带的checkbox时，修改样式必须在APP.vue中修改 //自定义checkbox的样式（ 元素使用的时候就是使用类名：mycheck） 
checkbox.mycheck .wx-checkbox-input, checkbox.mycheck .uni-checkbox-input { width: 28rpx !important; height: 28rpx !important; border-radius: 50% !important; } 
// 选中后的 对勾样式 
checkbox.mycheck .uni-checkbox-input-checked::before, checkbox.mycheck .wx-checkbox-input-checked::before { content: '' !important; width: 28rpx !important; height: 28rpx !important; border-radius: 50% !important; background-color: #04BE02; }

ios底部小黑线遮挡问题

//解决小黑条 
padding-bottom: constant(safe-area-inset-bottom); 
/* 兼容 iOS < 11.2 */ 
padding-bottom: env(safe-area-inset-bottom); 
/* 兼容 iOS >= 11.2 */

跳转h5页面

  1. 使用navigateTo跳转到自定义页面
  2. 利用web-view标签进行跳转
goto(){ 
//需要跳转的外部路径 
let url = '你要跳转的地址' 
uni.navigateTo({ url:'/pages/webView/webView?url='+url }) } 
//webView页面
<web-view :src="url"></web-view> 
//然后需要在小程序管理后台配置业务域名

小程序跳转app

官方说明不能由小程序跳转至任意app，只能跳回app
因为需求app需要唤起小程序，再使用微信支付

  • Android app通过WXEntryActivity跳转小程序
  • iOS app通过WXApiDelegate跳转小程序
  • 小程序通过button回跳
<button open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打开APP</button>

写h5页面

remChange(); 
window.addEventListener("resize", remChange) 
function remChange() { const html = document.querySelector("html"); const width = html.getBoundingClientRect().width; html.style.fontSize = width / 750 + 'px';//1rem=1px }
  • 目前没使用该方法，因为小程序和ios能够适配，但安卓不能，字体变得超级大，目前没有找到解决方法，所以写的是固定像素
  • 也尝试使用flexble.js和rem布局还是不行，web端是正常的，但小程序和app读取后字体变的超级小，感觉只能在项目中才能使用（个人猜测可能是跨域或者可能是以服务器为基础了）

接口防止重复调用方案（支付拦截）

  • 利用防抖避免重复调用接口
  • 采用禁用按钮的方式，loading、置灰等
  • 利用axios的cancelToken、AbortController方法取消重复请求
  • 利用promise的三个状态改造方法3

参考

本地图片过多可能会导致小程序体积过大，影响发布

  • 使用远程图片资源
  • 压缩图片

小程序中本地资源图片无法通过wxss获取的问题

  • 使用网络图片
  • base64（url里的编码过长，不推荐）
  • <image/>标签

uni页面跳转

  • uni.navigateTo：保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面
  • uni.redirectTo：关闭当前页面，跳转到应用内的某个页面，不可返回到原页面
  • uni.reLaunch：关闭所有页面，打开到应用内的某个页面
  • uni.switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
  • uni.navigateBack：关闭当前页面，返回上一页面或多级页面

uni页面传值

  • 使用uni.navigateTo、uni.redirectTo、uni.reLaunch进行页面跳转，可以使用url参数传递，目标页面通过 $route.query 获取参数值
let datum={
	address:this.superiorData.pname,
	provinceId : this.superiorData.pid,
	cityId : this.superiorData.cid,
}
uni.navigateTo({
	url:`/pages/scenic/nationwideScenic?datum=${JSON.stringify(datum)}`
})
//目标页面
onLoad(option) {
	if(option.datum){
		let datum=JSON.parse(option.datum)
	}
},
  • 使用uni.switchTab进行页面跳转，可以使用Vuex或者本地存储
  • 使用uni.navigateBack进行页面跳转，可以通过自定义事件传值
uni.$emit('getPhone', this.form.phoneNumber);
uni.navigateBack()
//目标页面
onShow() {
	// 监听全局变量的变化
	uni.$on('getPhone', data => {
		this.phone = data
	});
},

uni页面生命周期

  1. onLoad(options)

    • 页面加载时触发。
    • 参数 options 包含页面路径中的参数，可以在页面中通过 this.$route.query 访问。

  2. onShow()：页面显示时触发。

  3. onReady()：页面初次渲染完成时触发。

  4. onHide()：页面隐藏时触发。

  5. onUnload()：页面卸载时触发。

  6. onPullDownRefresh()：用户下拉刷新时触发。

  7. onReachBottom()：页面上拉触底时触发。

  8. onShareAppMessage(options)：用户点击右上角转发时触发。

  9. onPageScroll(Object)：页面滚动时触发，可以通过 Object.scrollTop 获取滚动位置信息。

uni常用方法

  • 获取/设置/移除本地存储: getStorage/setStorage/removeStorage
  • 下载远程文件到本地: downloadFile
  • 上传文件： uploadFile
  • 选择图片： chooseImage
  • 获取位置： getLocation
  • 扫码： scanCode

使用到的插件

  • 下拉框二级联动：
  • 日历:
  • 图片懒加载:
  • 微信小程序隐私协议弹窗：

长列表优化中虚拟列表和懒加载的区别

  • 虚拟列表通过计算列表项的位置和大小，动态决定哪些列表项需要被渲染，从而减少页面中实际渲染的 DOM 元素数量，提高性能和减少内存占用
  • 懒加载通常指的是当用户滚动到列表底部时，才触发加载更多数据的操作
  • 虚拟列表主要关注在滚动过程中如何高效地渲染大量数据，而懒加载则更侧重于延迟加载内容以提升页面加载性能。在实际应用中，这两种技术也可以结合使用

开发者在后台发布新版本之后，无法立刻影响到所有现网用户，但最差情况下，也在发布之后 24 小时之内覆盖绝大多数用户

在App.vue 的onShow函数下添加uni.getUpdateManager()方法

开发微信小程序的时候，未使用阿里字体，但报错

在小程序后台设置里面，将  添加到允许的域名列表中，但还是为解决，个人觉得是组件库的问题，目前还未解决，如果哪位大佬知道麻烦告知一下

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布