做有态度的前端团队

网易FEG前端团队

小程序的一些注意事项

一、尺寸单位

1. rem

  在小程序中规定屏幕宽度为20rem;
  如:设计稿为750px宽度,1rem=750/20px= 37.5px , 1px = 1/37.5rem。
  在实际的制作过程中,会发现px和rem之前的转化是很累的,因此不推荐使用rem为尺寸单位来制作。

2. rpx(推荐)

  这个是微信自己开发的一个尺寸单位。可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。
  参考文档
  如:在 iPhone6 上,屏幕宽度为375px,共有750个物理像素,则750rpx = 375px = 750物理像素,1rpx = 0.5px = 1物理像素。
  虽然在640宽度的设计稿换算起来很麻烦,但是使用750宽度的设计稿来制作页面确实很方便,设计稿上 1物理像素 = 1rpx。
  微信官网也是推荐使用750宽度的设计稿。

二、链接

  navigator 是小程序里面的 页面链接。性质等同于平常制作页面时候的a。
  open-type属性 可选值 'navigate'、'redirect'、'switchTab'、'reLaunch','navigateBack',对应于wx.navigateTo、wx.redirectTo、wx.switchTab、wx.reLaunch、wx.navigateBack 的功能。

1. 'navigate'

  'navigate' 保留当前页面,跳转到应用内的某个页面,使用wx.navigateBack可以返回到原页面,小程序左上角有个返回的按钮。
  小程序官方还做了个特别提示注意:为了不让用户在使用小程序时造成困扰,我们规定页面路径只能是五层,请尽量避免多层级的交互方式。
  在制作过程中,使用了'navigate',会发现在点击了5次之后点击带'navigate'的链接失效了,无法进行点击,因此在使用'navigate'的时候需要仔细判断是否合适使用。

2. 'switchTab'

  'switchTab' 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
  wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面,只能用 wx.switchTab 跳转到 tabbar 页面。

三、res服务器资源请求的问题

  最好使用https开头,只能放到nie.res下面,只有这个域名才对微信域名开放了白名单。

手机阅读请扫描下方二维码:

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif