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

可以提示，做出反应微信小程序如此简单

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

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

难度：微信小程序登录

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

登录步骤是通过调用wx.login（）API。成功后，您将获得用户的代码信息。通过接口将代码信息传递到您的后端（而不是微信的后端），并在服务器端微信 Background请求上发起连接，成功后，获取用户登录状态信息，包括openid，session_key等。换句话说，将代码交换为openid，这是用户的唯一标识符。在后端获取openid，session_key和其他信息之后，它会通过第三方加密生成自己的会话信息，并将其返回给前端。前端获取第三方加密的会话后，它将通过wx.setStorage（）保存在本地，并且所有后续请求都需要携带第三方加密的会话信息。以后，如果用户需要再次登录，请首先检查本地会话信息（如果存在），然后使用wx.checkSession（）在微信的服务器端检查它是否已过期。如果本地不存在或已过期，请从步骤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(); } });

登录流程图如下：

signin.png

注意1.npm很简单，安装软件包以供使用吗？

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

2.由于openid是唯一的，为什么我不能使用openid作为凭证，而麻烦地使用第三方会话

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

3.在本地启动服务，如何通过localhost访问服务器接口？

微信小程序默认为https请求。如果在本地开发联合调试，则需要检查[不验证合法域名，Web视图（业务域名），TLS版本和HTTPS证书]，以便可以使用localhost来愉快地访问服务器。

4.如何清除文本区域组件

常见用法场景。在用户反馈中，用户Balabara抱怨并单击以确认发送成功之后，为了防止用户再次提交，需要清除文本区域中的数据。

每个使用过vue的人都知道，请绑定一个字段，并在成功后将其设置为空。但是，微信小程序可能不会这样做。

微信小程序文档指出，不建议在多行文本上修改用户输入，因此textarea的bindinput处理功能不能反映出返回到textarea的值。

如何解决。您可以将值绑定到文本区域。使用表格提交。成功后，清除绑定到值的值。

具体代码如下：

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.有关引用图片的问题

向页面添加背景是，如果通过background属性添加它，对不起，您不能引用本地图片，只能引用由base64或在线转码的图片。

小程序的文档说，本地资源无法通过CSS获取。但是图像的src属性所引用的图像没有此限制。

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

文档指出：为了防止用户在使用小程序时引起混乱，我们规定页面路径只能为五个级别。请尝试避免多级交互。

使用wx.navigateTo（）时，级别不得超过5个级别。如果超过5级，则页面错误。但是wx.redirectTo（）没有这样的限制。

注意：

wx.navigateTo（）用于保留当前页面，跳至应用程序中的页面，使用wx.navigateBack返回原始页面

wx.redirectTo（）用于关闭当前页面并跳转到应用程序中的页面。

7.统一封装请求，在标头中携带会话信息

wx.request（）是用于发送请求的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(); } }); });};

特定代码

关于该项目的特定代码（包括前端和后端，后端的think.js框架以及数据库的mysql）已放置在github上。如有必要，欢迎克隆并加注星标。

小程序前端：

小程序背景：