微信小程序开发总结（附源代码）
小程序开发
浏览：1190 次
最近，该公司的项目不是很忙。我有时间研究微信小程序。参考市场上的各种答题app和小程序，我们构建了自己的微信答题小程序，包括前端和后端，都是由节点制成的。现在它已经上线了。它的名字是[你让我猜猜]。如果你感兴趣，你可以试试。
Vue，react，微信小程序，太简单了
如果您以前使用过vue或react，可以直接阅读文档并使用微信小程序。总体开发思路非常相似，包括一些语法，基本相同。或者使用美团的mpvue框架，你根本不需要学习小程序的语法。它写得像vue。然而，我们在开发时没有使用框架。我们使用了一种本地微信小程序语言，很容易开发。此外，微信小程序有许多自己的API，如图片上传、下载、音频等，当它们用于项目时，可以及时找到文档。
这个开发的难点，也是微信小程序的难点，应该是登录。如果我们了解登录过程，那么开发其他功能基本上是时间问题。
难点：微信小程序登录
我看过很多关于登录的文档。下图详细描述了该过程。该逻辑也用于开发过程中。只是我们没有得到用户的敏感信息，所以没有步骤7和步骤8。用户名、头像和其他信息可以直接通过wx获得。getUserInfo（）来满足我们的需求。
登录步骤
通过调用wx登录（）API将在成功后获得用户的代码信息
代码信息通过界面传输到后台（不是微信后台）。服务器向微信后台发送请求。成功后，用户的登录状态信息，包括openid和session，被获取_Key等。也就是说，代码通常被openid替换，openid是用户的唯一标识符。
自己的后台，获取openid和session_在密钥和其他信息被第三方加密后，他们自己的会话信息被生成并返回到前端。
前端获得第三方加密的会话后，它通过Wx。setStorage（）存储在本地，后续请求需要携带第三方的加密会话信息。
之后，如果用户需要再次登录，请首先检查本地会话信息。如果存在，则使用Wx CheckSession（）检查它是否在微信的服务器端过期。如果本地不存在或已过期，登录过程将再次从步骤1开始。
登录代码如下：
wx.获取存储({
按键：“code”，
成功：res=>{
wx.check会话({
成功：res=>{
安慰日志（“会话未过期，登录状态未过期”）；
},
失败：错误=>{
//重新登录
安慰log（“会话到期，再次登录”）；
登录操作（）；
}
});
},
失败：res=>{
安慰log（“无代码信息，调用登录界面获取代码”）；
登录操作（）；
}
});
登录流程图如下：
登录.png
注意事项
1.npm安装软件包有多容易？
微信小程序没有包管理（但最新版本似乎支持npm），所以如果你想使用其他库中的组件，你只能找到源代码并复制它。
2.既然openid是唯一的，为什么我不能使用openid作为凭证，并费心使用第三方会话
这可能会导致数据超出权限。比如，今天我通过手机登录了微信，打开了小程序。但是明天一个朋友想用我的手机登录微信。如果使用openid作为登录凭据，则在登录小程序时会检测到openid已经存在，因此登录过程将不再进行，因此我的数据将被我的朋友看到。因此，我们应该遵循官方建议的步骤。
3.在本地启动服务时，如何通过localhost访问服务器接口？
微信小程序默认为https请求。如果您在本地开发联合调试，则需要使用开发工具->在项目设置中，选中[不要检查合法域名、web视图（业务域名）、TLS版本和HTTPS证书]，以便您可以使用localhost愉快地访问服务器。
4.如何清除文本区组件
在一个常见的使用场景中，在用户反馈中，用户Barabara吐槽后，单击确认成功发送，为了防止用户再次提交，需要清除文本区域中的数据。
使用过vue的人都知道，绑定一个字段并在成功后将该字段指定为null是很好的。但是，微信小程序不是必需的。
微信小程序文档声明，不建议修改用户在mu上的输入
