小程序开发遇到的问题

前言

最近学习了下小程序开发， 做了一个电商的小程序，期间遇到的一些问题，记录下来。

---

一、关于rpx

一开始没有仔细的看官方文档，在iPhone8上1px=2rpx，就天真的以为在iPhone8 Plus上就是1px=3rpx，结果导致一个组件的显示有问题，而且是很久之后在同事的手机上发现😂。后来有看了下文档，发现是通过屏幕宽度来换算的，而不是pixelRatio。
比如8 Plus就是750rpx=414px，1px=750/414rpx=1.81rpx
附官方WXSS介绍

二、NAVIGATION无法跳转

页面跳转有两种方法，一个是用navigation组件，还有一个是绑定事件，在事件处理器中调用小程序提供的navigate api在使用navigation组件跳转页面时可能会出现无法跳转的问题，有几种可能原因：

所有要跳转的页面都要配置在app.json的pages属性中
对于open-type=”navigate”和open-type=”redirect” 跳转的应用内得是 非 tabBar的页面的路径。
对于open-type=”switchTab”，跳转的页面必须在app.json的tabBar属性中配置

三、无法使用JS操作DOM

如果想获得当前DOM的信息，可以在组件上自定义data-*属性，并通过绑定事件函数获取事件对象，从e.currentTarget.dataset中获取数据。如：

<view data-shopId="123" bindtap="toggleClick"></view>
function toggleClick(e){
    let dataset = e.currentTarget.dataset;
    console.log(dataset.shopid);
}
注意： data-属性中的都会被转成小写

四、tabBar不显示

错误现象是，项目的app.json使用以下代码，却没有如期望那样在屏幕底部出现TabBar。

{
  "pages":[
    "pages/clickDemo/clickDemo",
    "pages/logs/logs",
    "pages/index/index",
    "pages/mypage/mypage"
  ],
  "window": {
    "backgroundTextStyle": "dark ",
    "navigationBarBackgroundColor": "#ddd",
    "navigationBarTitleText": "Tabbar Demo",
    "navigationBarTextStyle": "black",
    "backgroundColor": "#ff0000"
  },
  "tabBar": {
    "color": "#000000",
    "borderStyle": "#000",
    "selectedColor": "#9999FF",
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "image/location_normal.png",
        "selectedIconPath": "image/location_selected.png"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "设置",
        "iconPath": "image/setting_normal.png",
        "selectedIconPath": "image/setting_selecred.png"
      }
    ]
  }
}

为什么底部不出现TabBar？原因在于，app.json头部的pages数组的第一项"pages/clickDemo/clickDemo"没有成为tabBar的一员，也就是在tabBar的list数组内没有链接clickDemo页面的条目。

具体对策有两种。一，我们在list数组内加入链接clickDemo页面的条目，如图2所示。图2中的红色矩形框内的代码是新加的，下面给出了这段代码。二，把pages数组的第一项设置为"pages/index/index"，或者设置为"pages/logs/logs"。也就是说，pages数组的第一项必须是tabBar的list数组的一员。

---

总结

这些是笔者在开发是遇到的一些小问题分享给大家参考一下