很久没发文章了,一直都没有时间去总结,去年随便投了两家宁波的公司,本来是抱着试一试的心理,没想到刚去宁波第一个面试就过了,然后也懒得找,就同意了,我记得当时要的是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
- 从github下载vant包,zip格式的vant组件包:
- 项目根目录下新建wxcomponents/@vant 两个文件夹
- 把下载好的压缩包解压, 把dist放在刚才创建好的@vant文件下,并重命名为weapp
- 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页面,或者点击按钮进去其他页面的时候都进行判断是否登录。
若首次进入是登陆页面
- 在vuex中设置变量管理登录状态
- App.vue中的onLaunch生命周期钩子,根据登陆状态进行跳转(异步操作导致页面不展示,所以加上延时器)
- 登陆界面,登陆按钮修改和储存登陆状态,不登陆按钮也需要将状态储存到本地,并返回上个页面操作
- 其他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的话,超出的部分没有背景色
小程序导航栏背景图如何设置
- 在pages.json内去掉原生导航栏 "navigationStyle": "custom"
- 自定义导航栏
监听页面滚轮,给自定义导航栏修改背景色
使用 onPageScroll 方法监听页面滚动事件
实现思路:默认导航栏其实一直存在,只需初始时把导航栏透明度设为0,随着滚动,改变透明度即可
获取用户当前位置(经纬度获取省市区)
- 使用 uni.getLocation() 方法获取用户的经纬度信息
- 调用第三方地图服务的API,比如高德地图的逆地址解析服务(获取key和注册报名单)
隐私协议保护指引接入
- 在 app.json 中配置 usePrivacyCheck: true
- wx.getPrivacySetting 查询隐私授权情况。
- wx.onNeedPrivacyAuthorization 监听隐私接口需要用户授权事件。
- wx.openPrivacyContract 跳转至隐私协议页面。
- wx.requirePrivacyAuthorize 模拟隐私接口调用,并触发隐私弹窗逻辑
如果用户拒绝授权,怎么办
- uni.getSetting 获取用户的当前设置,判断authSetting中是否有scope.userLocation
- uni.authorize 向用户发起授权请求
- 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; "')
小程序哪些地址需要在后台配置服务器域名
- 接口请求地址:包括小程序调用的后台接口地址,如获取数据、用户登录等接口。
- 图片/文件上传下载地址:如果小程序涉及到上传或下载图片、文件等操作,相关的地址也需要配置。
- WebSocket 地址:如果小程序使用 WebSocket 进行实时通讯,相关的 WebSocket 地址也需要配置。
- 支付回调地址:如果小程序涉及到支付功能,支付回调地址也需要配置。
- 第三方服务接口地址:如果小程序使用了第三方的服务接口,也需要将相关地址配置到服务器域名中
提示信息
- 使用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页面
- 使用navigateTo跳转到自定义页面
- 利用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页面生命周期
onLoad(options)
- 页面加载时触发。
- 参数
options
包含页面路径中的参数,可以在页面中通过this.$route.query
访问。
onShow():页面显示时触发。
onReady():页面初次渲染完成时触发。
onHide():页面隐藏时触发。
onUnload():页面卸载时触发。
onPullDownRefresh():用户下拉刷新时触发。
onReachBottom():页面上拉触底时触发。
onShareAppMessage(options):用户点击右上角转发时触发。
onPageScroll(Object):页面滚动时触发,可以通过
Object.scrollTop
获取滚动位置信息。
uni常用方法
- 获取/设置/移除本地存储: getStorage/setStorage/removeStorage
- 下载远程文件到本地: downloadFile
- 上传文件: uploadFile
- 选择图片: chooseImage
- 获取位置: getLocation
- 扫码: scanCode
使用到的插件
- 下拉框二级联动:
- 日历:
- 图片懒加载:
- 微信小程序隐私协议弹窗:
长列表优化中虚拟列表和懒加载的区别
- 虚拟列表通过计算列表项的位置和大小,动态决定哪些列表项需要被渲染,从而减少页面中实际渲染的 DOM 元素数量,提高性能和减少内存占用
- 懒加载通常指的是当用户滚动到列表底部时,才触发加载更多数据的操作
- 虚拟列表主要关注在滚动过程中如何高效地渲染大量数据,而懒加载则更侧重于延迟加载内容以提升页面加载性能。在实际应用中,这两种技术也可以结合使用
开发者在后台发布新版本之后,无法立刻影响到所有现网用户,但最差情况下,也在发布之后 24 小时之内覆盖绝大多数用户
在App.vue 的onShow函数下添加uni.getUpdateManager()方法
开发微信小程序的时候,未使用阿里字体,但报错
在小程序后台设置里面,将 添加到允许的域名列表中,但还是为解决,个人觉得是组件库的问题,目前还未解决,如果哪位大佬知道麻烦告知一下