【小程序】开发需要注意的地方（一）

1. 小程序页面路径

页面路径以文件名来创建，“pages/home/home”这样的页面路径是推荐的，而“pages/common/home”这样的页面路径是不推荐的，因为不便于微信小程序创建文件夹和文件，也不方便维护。

2. 小程序单位rpx

rpx：可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx，在iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

设备	rpx转换px (屏幕宽度 / 750)	px转换rpx(750/ 屏幕宽度)
iPhone5	1rpx = 0.42px	1px = 2.34rpx
iPhone6	1rpx = 0.5px	1px = 2rpx
iPhone6s	1rpx = 0.552px	1px = 1.81rpx

rem(root em): 规定屏幕宽度为20rem；1rem = (750 / 20)rpx。

因此建议：小程序开发设计师UI可以用iPhone6或者750px作为视觉稿的标准。

3. text标签

要想在text标签内显示文本空格大小，但是你无论如何在text标签内设置多少空白格，text标签都会自动忽略，设置属性space属性。
space有效值：

值	说明
ensp	中文字符空格一半大小
emsp	中文字符空格大小
nbsp	根据字体设置的空格大小

注意：

1. text标签内不要换行写。

<view class="body-view">
    <text>文章
    第一句，</text>
    <text space="nbsp">文章       第二句，</text>
</view>

显示效果:

2. 组件内只支持 嵌套。
3. 基础库版本低于 2.1.0 时， 组件内嵌的 style 设置可能不会生效。

4. block 标签

<block wx:if="{{true}}">
  <view>view1</view>
  <view>view2</view>
</block>

并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性（如wx:for 或 wx:if）。

5. radio标签

使用radio标签时，设置其大小时，设置width，height无效。
只能使用transform:scale(0.5)才可以。

代码如下：

<label class="radio">
   <radio value="教育" style="transform:scale(0.5)" />
   教育
</label>

6. scroll-view标签

可滚动视图标签

注意点：

1. 使用竖向滚动时，需要给一个固定高度height。
2. 该标签内不能使用 textarea、map、canvas、video 组件。
3. scroll-into-view 的优先级高于 scroll-top。
4. 在滚动 scroll-view 时会阻止页面回弹，所以在 scroll-view 中滚动，是无法触发 onPullDownRefresh。
5. 若要使用下拉刷新，请使用页面的滚动，而不是 scroll-view ，这样也能通过点击顶部状态栏回到页面顶部。

7. movable-view标签

movable-view可移动的师徒容器组件是用来实现组件移动效果，可在页面中进行滑动，滑动时必须在movable-area区域内。

当小程序通过好友分享的卡片进入页面，如果页面没有返回到主页的按钮，可以在页面设置一个可以移动的“返回主页”的按钮。

注意点：

1. movable-view 必须设置width和height属性，不设置默认为10px。
2. movable-view 默认为绝对定位，top和left属性为0px。
3. movable-view必须在组件中，并且必须是直接子节点，否则不能移动。
4. 当movable-area占满整个屏幕时，其层级不能太高，不能影响页面的操作，但movable-view的层级要高，否则不能移动。设置z-index是无法解决问题的，这时则需要movable-area的style设置pointer-events: none，movable-view的样式设置pointer-events: auto，可以实现area点击事件穿透，而浮动组件可点击拖拉。

8. dom问题

在web开发中，如果你想查找页面上某个dom，会使用getElementById()访问document的某一个dom，但是在小程序的开发中，尝试打印console.log(document)，系统会打印出undefined，小程序既没有document对象，也没有window对象。小程序框架的逻辑层并非运行在浏览器中，因此 JavaScript 在 web 中一些能力都无法使用，如 window，document 等。

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

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

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

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

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

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

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

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

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

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

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

13. 获取手机系统信息

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

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

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

14. 小程序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)
    }
 })

15. 小程序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")
    })
  }
})

注意点：

1. getStorage和getStorageSync必须定义key值，不能获取所有的存储数据，只能是一对一的。想获取所有的存储数据，看第二点。
2. getStorageInfo同步和getStorageInfoSync异步获取本地keys(当前storage中所有的key)、currentSize(当前占用的空间大小，单位kb)、limitSize(限制的空间 大小，单位为kb)