微信小程序开发需要注意的地方(一)

1. 小程序页面返回更新数据问题

现象:页面一旦加载,但在返回到上一个页面的时候数据不能及时更新。

解决方法:将页面请求放入到onShow中,这样的话可以返回上一个页面时,上一个页面能获取最新的数据。你需要区分一下新的业务逻辑适合放在onLoad方法中还是onShow方法中。

2. wx.navigateTo跳转到tabbar页面的问题

现象:使用wx.navigateTo无法跳转到带tabbar的页面
解决方法:只能使用wx.switchTab进行跳转带有tabbar的页面

3. 小程序开发图标模糊问题

现象:在微信开发者工具下图标显示清晰,但是一旦代码上传,在手机上体验,图标模糊不清。

解决方法:有可能是你上传的是一倍大小的图片,你可以尝试着上传三倍大小图片,就可以完美的解决问题。

4. 小程序转发分享图片设置

现象:小程序转发分享onShareAppMessage方法设置imageUrl自定义图片路径,但图片总是显示一部分。

解决方法:设置imageUrl自定义图片的大小尺寸为5:4,这样的话就可以把整体图片显示出来

5. 获取手机系统信息

现象:常常因手机型号的不同产生页面UI不兼容的问题,例如fixed底部一个容器,在iPhoneX底部横条的原因,会把容器遮盖一部分,需要针对该型号单独做一个兼容。

解决方法:获取手机系统信息,使用getSystemInfo,可得到手机系统语言、屏幕宽高、微信版本号、操作系统、设备像素比、客户端甚础库版本等信息。

wx.getSystemInfo({
     success: function (res){
        console.log(res)
     }
})

6. 小程序getUserInfo返回的地区信息格式问题

现象:最近在开发微信小程序的时候,调用微信的getUserInfo接口,其返回的用户数据是这样的:
小问题

解决方法:在调用getUserInfo接口时,设置一下lang参数,其参数可以设置为en(英文),zh_CN(简体中文),zh_TW(繁体中文),代码如下:

wx.getUserInfo({
    lang: "zh_CN",
    success: function (e) {
        console.log(e)
    },
    fail: function(err){
        console.log(err)
    }
 })

7. 小程序setStorageSync或setStorage()问题

现象:在小程序中用户登录后使用wx.setStorageSync("nickName","...")储存用户信息,方便其他接口调用其数据,在页面data中获取用户信息,却有可能拿不到其数据。wx.setStorageSync()、 wx.setStorage()

Page({
  /**
   * 页面的初始数据
   */
  data: {
    // 如此调用,有可能拿不到数据
    nickName: wx.getStorageSync("nickName")
  }
})

解决方法:在onLoad方法中调用。

Page({

  /**
   * 页面的初始数据
   */
  data: {

  },
  onLoad: function (options) {
    this.setData({
      nickName: wx.getStorageSync("nickName")
    })
  }
})

8. 用户昵称头像问题

如果只是展示用户头像昵称,可以使用 组件

<open-data type="userAvatarUrl"></open-data>
<open-data type="userNickName"></open-data>

9. js方法封装

有些方法会在小程序的多个页面使用,为了减少代码的冗余、方便修改,我们应该尽量在一个单独的js文件中做好封装,然后在其使用页面的js文件直接引用即可。

10. 小程序过滤器wxs的使用问题

现象:小程序在渲染时如果需要对数据进行处理,可以使用其对应的js文件。但针对于该方法在多个页面重复使用的时候修改其对应的js文件工程量巨大,造成代码繁琐重复。
解决方法:为了避免过多的代码产生,应该使用过滤器wxs对其直接进行处理。详细解释

11. 小程序按钮多次点击问题

现象:小程序的页面跳转速度相对于H5页面的跳转还是比较慢的,当用户多次点击之后,会重复打开相同的页面,所以要针对按钮的点击要进行限制。

解决方法很多种,列举几例作为参考:

  • 限制按钮在一秒或者几秒之内点击一次有效
  • 点击按钮之后,setData设置按钮disabled属性为true
  • 设置遮罩层Loading
  • 按钮点击后,其点击事件设置为空

12. 小程序跳转到网页传送cookie参数的安全问题

在微信小程序开发中时常会使用webview加载一些H5网页,使用过程中肯定需要参数传递形成连接。针对一些携带用户信息的参数进行加密也变得至关重要的。详细解释

13. dom问题

在web开发中,如果你想查找页面上某个dom,会使用getElementById()访问document的某一个dom,但是在小程序的开发中,尝试打印console.log(document),系统会打印出undefined,小程序既没有document对象,也没有window对象。

14. css中设置本地image问题

现象:当你在css中设置某个容器的background的url为本地图片的路径的时候,显示没效果。

解决方法:把该本地图片上传到网络上,然后在url中引用该图片链接,或者 使用base64,或者是在wxml中使用image标签。

猜你喜欢

转载自blog.csdn.net/qq_36012563/article/details/86662446