微信小程序：“我的”页面布局（一）：微信用户信息获取及UI

先做小程序“我的”页面，需要注意的有两个点：

先上图，有图才有真相：

这一块我增加了一个隐藏的button, 未获取到用户信息时，显示为默认头像和“微信授权”的文字提示，登陆后，头像变为微信头像，文字变为微信昵称。

具体ui为判断没有授权则显示默认头像及提示，并在其上层覆盖一个透明的button，用户触发授权事件。

在js中需要注意的是，open-type="getUserInfo"需要做老版本兼容，老版本通过wx.getUserInfo即可唤起授权页面，不需要添加button去触发

详情见下一篇： 微信小程序：“我的”页面布局（二）：可配置功能菜单列表

微信小程序：“我的”页面布局（一）：微信用户信息获取及UI

微信小程序：“我的”页面布局（二）：可配置功能菜单列表

1、首先打开手机，然后在手机桌面中点击登录微信。

2、进入微信页面后，找到并点击发现。

3、然后在打开的发现页面中，找到并点击小程序。

4、接着在打开的小程序页面中，搜索“拼接图片”。

5、最后进入到这个小程序页面中，选择点击“切九图”，最后上传想要处理的图片，点击“完成”。

6、最后选择想要的九图模板，点击“保存图片”，就完成了。

从前端转小程序开发的成本几乎可以忽略不计，上手前只需要注意一些地方即可。

小程序的界面是一个「应用界面」，而非「网页」，需适应WXML的逻辑和写法。

WXML没有HTML的宽容度那么高，单标签必需是 />结尾的，不然会报错。

WXSS 和 CSS很像，基本上所有的CSS都支持，小程序还提供了rpx （responsive pixel）作为尺寸单位（保证不同分辨率设备的元素正常显示），开发者需知道rpx与其他单位的换算。

WXSS不支持大括号嵌套（{{}}），所以key-frames，CSS animation 不能用，但transition 可用的。

当然，这种限制也会催生一种东西：专用于小程序的开发框架。

---