该公司项目最近不太忙，我有时间研究微信小程序。参考市场上的各种应答应用程序，小程序等，我制作了自己的微信应答小程序，包括前端和后端，后端由节点组成。它现在在线上，名称为[问我，]。如果您有兴趣，可以尝试一下。

认识Vue，微信小程序，很容易

如果您之前或之前使用过vue，只需查看文档即可开始使用微信小程序。总体开发思路非常相似，包括某些语法，它们基本相同。或使用美团的框架，您根本不需要学习的语法，它与vue相同。但是我们在开发时并未使用该框架，而是使用了原生的微信小程序语言，并且非常易于开发。而且微信小程序拥有许多自己的API，例如图像上传，下载，音频等。在项目中使用它时，您可以找到文档。

这种发展的困难也是微信小程序的困难。应该已经登录。如果您了解登录过程并开发了其他功能，那基本上是时间问题。

难度：微信小程序登录

我阅读了很多有关登录相关介绍的文档。下图中的介绍是一个更详细的过程，并且在开发过程中也使用了此逻辑。只是我们尚未获得用户的敏感信息，因此没有7、 8个步骤。可以通过wx。（）直接获得用户名，头像和其他信息，以满足我们的需求。

登录步骤是调用wx。（）API。成功后，您将获取用户的代码信息，并通过该接口将代码信息传递到您的后端（而不是微信后端），并向服务器端的微信后端发起请求。成功后，获取用户的登录状态信息，包括等等。换句话说，交换代码，这是用户的唯一标识。在后端获取并等待信息后，它将通过第三方对其进行加密以生成自己的信息，并将其返回给前端。前端获得第三方加密后，它将通过wx。（）本地保存，随后的请求需要携带此第三方加密的信息。稍后，如果要求用户再次登录，请首先检查本地信息（如果存在），然后使用wx。（）检查其在微信服务器上是否已过期。如果本地不存在或已过期，请从步骤1重新开始登录过程。

登录代码如下：

wx.getStorage({ key: "code", success: res => { wx.checkSession({ success: res => { console.log("Session未过期，登陆状态未失效"); }, fail: err => { // 重新登录 console.log("Session过期，重新登录"); loginAction(); } }); }, fail: res => { console.log("无code信息，调用登录接口获取code"); loginAction(); } }); 复制代码

登录流程图如下：

注意1. npm非常简单，使用软件包容易吗？

微信小程序没有包管理（但最新版本似乎支持npm），因此，如果要使用其他库中的组件，则只能找到源代码并复制它。

2.由于它是唯一的，为什么我不能将其用作凭证，而在麻烦中使用第三方

这可能会导致数据超出权限。例如，今天我通过手机登录微信并打开了迷你程序。但是明天，一个朋友想用我的手机登录微信。如果将其用作登录凭据，则在登录到时会检测到该凭据已存在，因此不会再次进行登录过程，因此我的朋友可以看到我的数据。因此，您仍然必须遵循官方建议的步骤。

3.如何在本地启动服务，如何访问服务器界面？

默认情况下，微信小程序都是请求。如果您在本地开发联合调试，则需要检查[不验证合法域名，Web视图（业务域名），TLS版本和开发人员工具中的证书->项目设置]，以便可以使用访问权限快乐的服务器。

4.如何清除组件

常见用法场景。在用户反馈中，用户完成投诉并单击以确认发送成功后，为了防止用户再次提交，需要清除其中的数据。

每个使用过Vue的人都知道，请绑定一个字段，并在成功后将其设置为空。但是，请不要使用微信小程序。在微信小程序文档中指出，不建议在多行文本上修改用户输入，因此的处理功能不会将返回值反映到。

如何解决。您可以绑定一个值。使用表格提交。成功后，清除边界值。

具体代码如下：

bindTextAreaInput: function(e) { this.setData({ feedbackContent: e.detail.value }); }, bindSubmit: function(e) { this.setData({ btnLoading: true }); addFeedbackRequest({ content: e.detail.value.feedbackContent.trim() }).then(res => { if (res.success) { this.setData({ btnLoading: false, feedbackContent: "" }); this.showToast("提交成功，感谢您的反馈"); } else { console.log("fail"); this.showToast("提交失败，请稍后再试"); } }); }, 复制代码

5.有关引用图片的问题

为页面添加背景是，如果您通过属性添加背景，很抱歉，您不能引用本地图片，只能引用转码或在线图片。小程序的文档说，本地资源不能通过css获得。但是src属性引用的图片没有此限制。

6.级别不能超过5个级别

文档中指出：为了防止用户在使用迷你程序时引起混乱，我们规定页面路径只能为五个级别。请尝试避免多层次的互动。使用wx。（）时，指定的级别不能超过5个级别。如果超过5级，则页面错误。但是wx。（）没有这样的限制。注意：wx。（）用于保留当前页面并跳至应用程序中的特定页面。使用wx。返回原始页面。 wx。（）用于关闭当前页面并跳至应用程序中的特定页面。

7.统一包装请求，其中包含信息

wx。（）是用于发送请求的api。如果将每个请求都重写在信息中，那将是非常麻烦的。因此，基本上，前端将封装一个新的请求功能，包括诸如携带信息和处理错误接口之类的功能。具体代码如下：

const httpRequest = data => { return new Promise(function(resolve, reject) { console.log("http request", data.url); let code = ""; wx.getStorage({ key: "code", success: res => { code = res.data; console.log("http request success", code); //发起网络请求 wx.request({ url: data.url, data: { ...data.data }, method: data.method, header: { code: code, "content-type": "application/x-www-form-urlencoded" }, success: function(res) { if (res.data.success) { resolve(res.data); } else { // console.log(JSON.stringify(res)); if (res.data.errorCode == 100) { goBackIndex(); } reject(res.data); } }, fail: function(res) { console.log(JSON.stringify(res)); if (res.data.errorCode == 100) { goBackIndex(); } reject(res); } }); }, fail: res => { console.log("http request failed", code); console.log("not found code in storage"); goBackIndex(); } }); }); }; 复制代码

特定代码

已经发布了有关该项目的特定代码（包括前端和后端微信小程序开发源代码生成，后端的.js框架以及数据库使用），如果有必要，欢迎您，欢迎加星标。

迷你程序的前端：// wx -...迷你程序的后端：// wec ...