浅谈小程序开发遇到过的问题

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、开发时遇到的问题

小程序框架有

• Taro
• uni-app
• WeUI
• mpvue
• iView 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	在组件实例被从页面节点树移除时执行)