现在开始正式实现授权界面了,以前的知识和现在的知识一起融汇起来,就可以编写出出色的小程序了,一切熟练之后,都会变得简单而有趣,而在这之前,你需要做的就是坚持
效果图.png
一.前言
前一篇文章讲述了如何获得用户的授权,这一篇文章将会利用授权按钮,搭建一个类似微信授权界面的自己的授权界面,在小程序打开自动弹出,通过按钮获得用户授权,这是企业开发中获得授权的一种方式,还有一种方式是编写登录界面.
二.准备工作
记住在打开微信开发工具进行编译之前,一定要清楚全部缓存,这里是要在首页的前面覆盖一个授权页面,选择在组件中编写授权页面,然后将组件导入index.wpy中,并注册使用
三.编写组件
1.在src文件夹下新建组件文件夹,并新建Login组件
截取登录界面,用画图工具打开,重新调整图片大小,宽度改为750px,再用fireworks打开,测量需要布局的图片宽度
文件目录.png
2.在app.wpy中设置page和container的宽高为100%,方便之后设登录页面的宽高
app.png
3.在index.wpy中添加view的首页标志,并添加一个button按钮,假装是首页,在首页里导入Login组件并注册,就可以使用了
index1.png
index2.png
4.在Login.wpy中编写组件的内容,首先是一个固定的蒙版,然后再蒙版上通过绝对定位在中间显示一个提示用户登录的页面,这里用了cover-view代替了view,是由于这个组件可以覆盖首页的内容,虽然没有用cover-view,用view和image也可以达到这样的效果,但是还是首选cover-view和cover-image来编写覆盖首页的登录界面,在登录界面上一定要添加获取用户信息的授权按钮.
image1.png
image2.png
image.png
image3.png
