前言

我开发微信小程序有一段时间了。 这期间，我踩过无数的坑，填过无数的坑。 为了提高自己，防止后来者落入陷阱，我简单总结一下我开发微信小程序的经历。

前期准备

当很多开发者刚开始学习微信应用开发时，他们认为一切都要从头开始。 所以，他们从一开始就抱有很大的恐惧。 其实这是没有必要的，因为有人已经解决了你的担忧。

我们的用户界面

WeUI是一套与微信原生视觉体验一致的基础样式库。 由微信官方设计团队为微信网页和微信小程序量身定制，让用户的使用感知更加统一。 包含单元格、 、 、 、 、 图标等各种元素。

下载链接：

韦皮

WePY是一个让小程序支持组件化开发的框架，也是腾讯官方出品。 WePY框架在开发过程中，参考了Vue等现有框架的一些语法风格和功能特性，重新封装了原生小程序的开发模型，使其更接近MVVM架构模型，并支持ES6的一些新特性/7。 以下是使用WePY开发的示例。

下载链接：

是一款开源非微信官方SDK，主要用于PHP后端开发，涵盖公众号、微信支付、小程序、开放平台、企业微信等。 如果你恰好是用PHP开发的，可以直接使用。

下载链接：

开始开发

综上所述，自从开发了微信小程序，我认为开发微信小程序只有一个难点，那就是登录。虽然微信小程序官方提供了如下登录流程图，但在实际实现中，可能还是存在处处都是陷阱。

下面总结一下我的登录实现过程。 请注意，我使用 WePY 作为开发框架。

首先在app.wpy文件属性中添加 和 属性来标识用户是否登录，并记录用户的登录信息。 如下：

然后，在app.wpy文件中，定义登录和登录检测函数，如下：

该功能用于授权用户首次登录。 此时，用户尚未在系统中注册。 使用该函数，系统会调用用户授权，获取用户的微信信息，保存到数据库，返回用户信息，并更新app.wpy中属性中的 和 字段。

该功能用于用户未经授权登录时进行登录。 此时，用户已经在系统中注册。 使用该函数，系统会查询数据库获取、返回用户信息，并更新app.wpy中属性中的 和 字段。

用于发送登录请求

之所以区分注册登录和普通登录，主要是因为注册登录需要用户授权，而普通登录则不需要用户授权。 在登录方面，我采用的解决方案是，如果用户没有注册，则使用注册登录，调用用户的授权获取用户的微信信息，保存到数据库； 否则直接读取数据库获取用户信息。

用于检测用户登录状态。 登录检测主要是判断app.wpy中属性中的字段。 如果该字段值为true，则表示用户已经登录，并返回该字段中保存的用户信息。 否则，它不会返回。

最后，在需要检测用户登录状态的页面的方法中，调用该方法如下：

如果返回结果res为true，则表示您已经登录并执行登录后的操作； 否则，表示您尚未登录，返回登录页面。 当然，以上操作是对整个页面的登录限制。 如果想限制登录对某个页面的某项操作，可以使用登录组件，即调用登录操作的函数中的方法。 如果返回true，则执行下一步； 否则，改变登录组件的显示状态，调用登录组件，提示用户登录。如下：

登录组件模板部分，这个是登录框显示的样式

登录组件的Js部分通过获取用户信息来控制登录框中显示的内容和操作。 如下：

这里需要注意的是，.$emit('', res..) 这里的意思是调用父页面（调用地方）中的方法并传递参数。 因此，在父页面（调用它的地方）定义一个属性，并在该属性中拥有一个方法。 如下：

在这里，我的写作有点复杂。 其实这一步可以合并到登录组件中，即这里的内容直接写在登录组件中。

去哪里打电话

上面，控制登录组件的显示和隐藏。 调用app.wpy方法后，如果返回true，则将其设置为true。 否则，它将被设置为 true。 这样就可以控制登录组件的显示和隐藏。

至此，微信小程序的开发就完成了。 一旦掌握了这些，开发微信小程序应该不成问题。

当然，如果还有疑问，可以在评论区留言，我们一起讨论