浅谈小程序开发遇到过的问题
1、uni-app弹窗被覆盖怎么解决？
uni-app弹窗被覆盖怎么解决？如果弹窗被别的内容覆盖，且设置很大的z-index也无法解决，这种情况多半是被一些如map、video、textarea、canvas等原生组件遮盖，因为原生组件层级高于前端组件，我们可以使用cover-view组件解决。
2、小程序生命周期
onReady 生命周期函数–监听页面初次渲染完成
onShow 生命周期函数–监听页面显示
onHide 生命周期函数–监听页面隐藏
onUnload 生命周期函数–监听页面卸载
onPullDownRefresh 页面相关事件处理函数–监听用户下拉动作
onReachBottom 页面上拉触底事件的处理函数
onShareAppMessage 用户点击右上角转发
onPageScroll 页面滚动触发事件的处理函数
onTabItemTap 当前是 tab 页时，点击 tab 时触发
3、小程序路由跳转
（1）通过组件navigator跳转，设置url属性指定跳转的路径，设置open-type属性指定跳转的类型（可选），open-type的属性有 redirect, switchTab, navigateBack
（2）通过api跳转，wx.navigateTo() , wx.navigateBack(), wx.redirectTo() , wx.switchTab(), wx.reLanch()
4、小程序的兼容问题有哪些？
遇到的如下：
1，ios下的zIndex层级问题，主要发生在iphone7和iphoneX下 绝对定位必须有一个共同的父元素。
2，左右边框不生效 当边框的宽度设置为奇数的时候，可能会不生效 解决方法：将宽度设置为偶数的时候，在ios下就可以解决
3，还有尽量不要用margin-bottom ，当元素是在整个页面的最底部的时候，在ios下可能margin-bottom会失效，所以建议，都使用padding-bottom
new Date跨平台兼容性问题
在Andriod使用new Date(“2018-05-30 00:00:00”)木有问题，但是在ios下面识别不出来。
因为IOS下面不能识别这种格式，需要用2018/05/30 00:00:00格式。可以使用正则表达式对做字符串替换，将短横替换为斜杠。
var iosDate= date.replace(/-/g, '/');
wx.getUserInfo()接口更改问题
微信小程序最近被吐槽最多的一个更改，就是用户使用wx.getUserInfo（开发和体验版）时不会弹出授权，正式版不受影响。现在授权方式是需要引导用户点击一个授权按钮，然后再弹出授权。
5、开发时遇到的问题
小程序框架有
Tarouni-appWeUImpvueiView Weapp
1）uni-app h5端 ios只能加载https的图片；
2）uni-app 使用deep 穿透微信小程序生效 h5无作用
需要在methods同级下加一个 ：
options: { styleIsolation: ‘shared’ },
6、小程序的登录流程
首次登录
- 调用小程序api接口
wx.login()获取 临时登录凭证code，这个code是有过期时间的. - 将这个
code回传到开发者服务器（就是请求开发者服务器的登录接口，通过凭证进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等） - 拿到开发者服务器传回来的会话密钥（
session_key）之后，前端需要保存起来.
wx.setStorageSync('sessionKey', 'value')
Copy
再次登录的时候，就要判断存储的session_key是否过期了
- 获取缓存中的
session_key，wx.getStorageSync('sessionKey') - 如果缓存中存在
session_key，那么调用小程序api接口wx.checkSession()来判断登录态是否过期，回调成功说明当前session_key未过期，回调失败说明session_key已过期。登录态过期后前端需要再调用wx.login()获取新的用户的code，然后再向开发者服务器发起登录请求. - 一般在项目开发，开发者服务器也会对用户的登录态做过期限制，所以这时在判断完微信服务器中登录态如果没有过期之后还要判断开发者服务器的登录态是否过期。（请求开发者服务器给定的接口进行请求判断就好）
7、小程序如果版本更新了怎么通知用户？
当小程序发布新的版本后，用户如果之前访问过该小程序，通过已打开的小程序进入（未手动删除），则会弹出提示，提醒用户更新新的版本。用户点击确定就可以自动重启更新，点击取消则关闭弹窗，不再更新.
核心步骤:
- 打开小程序, 检查小程序是否有新版本发布
updateManager.onCheckForUpdate(function (res) {})
Copy
小程序有新版本，则静默下载新版本，做好更新准备
updateManager.onUpdateReady(function () {})
Copy
新的版本已经下载好，调用 applyUpdate应用新版本并重启小程序
updateManager.applyUpdate()
Copy
- 更新版本的模拟测试
微信开发者工具上可以通过「编译模式」下的「下次编译模拟更新」开关来调试.
点击编译模式设置下拉列表，然后点击“添加编译模式”，在自定义编译条件弹窗界面，点击下次编译时模拟更新，然后点击确定，重新编译就可以了.
注: 需要注意的是，这种方式模拟更新一次之后就失效了，后边再测试仍需要对这种编译模式进行重新设置才可以.
- 核心代码如下:
App({ onLaunch: function(options) { this.autoUpdate() }, autoUpdate:function(){ var self=this // 获取小程序更新机制兼容 if (wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() //1. 检查小程序是否有新版本发布 updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 if (res.hasUpdate) { //2. 小程序有新版本，则静默下载新版本，做好更新准备 updateManager.onUpdateReady(function () { wx.showModal({ title: '更新提示', content: '新版本已经准备好，是否重启应用？', success: function (res) { if (res.confirm) { //3. 新的版本已经下载好，调用 applyUpdate 应用新版本并重启 updateManager.applyUpdate() } else if (res.cancel) { //不应用 } } }) }) updateManager.onUpdateFailed(function () { // 新的版本下载失败 wx.showModal({ title: '已经有新版本了哟~', content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~', }) }) } }) } else { // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示 wx.showModal({ title: '提示', content: '当前微信版本过低，无法使用该功能，请升级到最新微信版本后重试。' }) } }
}) 8、小程序嵌入H5页面怎么做？
解决方式 ：web-view
webview 指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名。
具体实现步骤:
登陆小程序管理后台, 配置服务器域名( h5页面所在的域名 )
在小程序里面嵌入h5
- 在小程序里面定义一个你想要的H5入口
<navigator url="/page/navigate/navigate" hover-class="navigator-hover">跳转到新页面</navigator>
Copy
- 新建一个页面，放置 webview , src指向h5网页的链接.
<web-view src="{{url}}" bindmessage="getMessage"></web-view> </block>
Copy
注: 实际开发中在h5页面中有可能需要向小程序发送消息, 实现h5页面和小程序页面的通信
需要使用postMessage向小程序发送消息, 在h5中postMessage 注意，key必须叫做data,否则取不到。
9、小程序的生命周期函数有哪些？分别有什么作用？
小程序的生命周期函数大体分为三类:
- 小程序应用的生命周期
| 属性 | 说明 |
|---|---|
| onLaunch | 监听小程序初始化, 全局只触发一次 |
| onShow | 监听小程序启动或切前台。 |
| onHide | 监听小程序切后台。 |
参考官网: 应用的生命周期
- 小程序页面的生命周期
| 属性 | 说明 |
|---|---|
| onLoad | 监听页面加载, 获取其他页面传过来的参数, 发起网络请求 |
| onShow | 监听页面显示 |
| onReady | 监听页面初次渲染完成 |
| onHide | 监听页面隐藏 |
| onUnload | 监听页面卸载 |
参考官网: 页面的生命周期
- 小程序组件的生命周期
| 定义段 | 描述 |
|---|---|
| created | 在组件实例刚刚被创建时执行，注意此时不能调用 setData ) |
| attached | 在组件实例进入页面节点树时执行) |
| ready | 在组件布局完成后执行) |
| moved | 在组件实例被移动到节点树另一个位置时执行) |
| detached | 在组件实例被从页面节点树移除时执行) |
浅谈小程序开发遇到过的问题相关推荐
- 浅谈小程序开源业务架构建设之路
导读:本文首先引入百度小程序开源生态介绍,随后在发展道路中遇到厂商浏览器合作场景,引出小程序分发保障的痛点和挑战,接着分别从分发通路.能力检测.能力匹配以及能力干预方面详细探讨了具体的方案和设计,最后 ...
- 【互联网大会】微信小程序斩获大奖 马化腾谈小程序开发生态
web前端教程 用大白话,来讲编程 11月7日下午,第五届世界互联网大会"世界互联网领先科技成果"发布活动在乌镇举行,作为一项全新的技术和应用创新,小程序获选"世界互联网 ...
- 由爆火的“羊了个羊”浅谈小游戏开发
自9月初突然爆火以来,小程序游戏"羊了个羊"一路高歌猛进,日活跃用户数量最高曾一度破亿:仅两天时间,就在微博上就斩获18个关联热搜. <羊了个羊>的爆火,除了玩法很有传 ...
- 小程序：浅谈小程序更新机制，发版后多久能全覆盖
小程序会伴随业务的成长不断更新版本,那么发布了新版本后多长时间能被用户看到? 有人说,微信小程序的更新机制长久以来都是迷一样的存在,当你发布一个新版本的时候,不知道何时用户才能看到.明明已经发布了,却 ...
- 浅谈 Python 程序和 C 程序的整合
浅谈 Python 程序和 C 程序的整合 Python 是一种用于快速开发软件的编程语言,它的语法比较简单,易于掌握,但存在执行速度慢的问题,并且在处理某些问题时存在不足,如对计算机硬件系统的访问, ...
- 嵌入式开发-浅谈嵌入式MCU开发中的三个常见误区
浅谈嵌入式MCU开发中的三个常见误区 原创 2017-09-30 胡恩伟 汽车电子expert成长之路 目录 (1)嵌入式MCU与MPU的区分 (2)误区一:MCU的程序都是存储在片上Flash上,然 ...
- 软件工程：浅谈人工智能软件开发与传统软件开发的区别
题目:浅谈人工智能软件开发与传统软件开发的区别 摘要:人工智能的飞速发展带动着软件工程的发展,最终使得软件工程产生新的变革.因为人工智能特有的性质,因而导致了人工智能软件与传统软件的差异性.本文对比了 ...
- 微信小程序开发：获取位置打开地图
目录 01 准备工作 02 小程序基础知识 微信小程序的四种类型的文件 app.json app.js app.wxss app.wxml 目录树 03 获取位置打开地图 参考 效果 程序说明 04 ...
- 浅谈Android游戏开发基础和经验
Android游戏开发基础和经验是本文要介绍的内容,主要是来了解并学习Android游戏开发的内容实例,具体关于Android游戏开发内容的详解来看本文. 做一个类似俄罗斯方块的android游戏开发 ...
最新文章
- Python基础11-函数式编程与内置函数
- three.js 加载显示文字
- Transformer靠什么“基因“，得以闯入CV界秒杀CNN？
- C++编写DLL的方法
- 用于Spring应用程序的Gradle原型
- input复选框checkbox默认样式纯css修改
- ESS控制台发布新功能：创建多实例规格的伸缩配置
- element table表格里的多选按钮，根据条件判断是否可以被选中
- java两个对象属性比较
- 在线js调试工具JSbin、jsFiddle
- 基于核极限学习机(KELM)分类 -附代码
- 【Django 2021年最新版教程8】操作Mysql数据库 mysqlclient安装和使用
- 如何录制电脑内部声音
- Message、Handler、MessageQueue、Looper之间的关系
- 电脑软件测试英雄联盟,怎么测试电脑能不能玩英雄联盟
- 鸿蒙笔记本双系统,经验：巧用固态硬盘给笔记本电脑安装双系统
- 【金融财经】金融市场一周简报（2017-09-22）
- java开发是it行业吗_转行IT行业为什么选择学习Java开发
- 巨量信息流广告 “一键起量“ 功能，深度解析使用方法！
- 快速开发小程序——案例