会vue、react,微信小程序，soeasy
发表时间：2023-09-12 17:38:13
文章来源：炫佑科技
浏览次数：187
菏泽炫佑科技 菏泽炫佑小程序开发 菏泽炫佑app制作 炫佑科技
会vue、react,微信小程序，soeasy
*近公司项目不是很忙，所以有时间研究一下微信小程序。 在参考了目前市面上的各种问答APP、小程序等后，我制作了自己的微信问答小程序，包括前端和后端。 后端是用node做的。 现在已经上线了，名字叫【你问我你猜】。 如果您有兴趣会vue、react,微信小程序，soeasy，可以尝试一下。
可以vue、react、微信小程序，so easy
如果你之前使用过Vue或者React，那么只看文档，上手微信小程序是没有问题的。 整体开发思路很相似微信答题小程序制作，包括一些语法，基本都是一样的。 或者使用美团的mpvue框架，那么你根本不需要学习小程序的语法，就像vue一样写起来。 但是我们开发时候并没有使用框架。 我们使用原生的微信小程序语言，开发起来非常简单。 而且微信小程序有很多自己的API，比如图片上传、下载、音频等，在项目中使用时，很容易找到文档。
这个开发的难点也是微信小程序的难点，应该是登录，如果把登录流程搞清楚了，开发其他功能基本上就是时间问题了。
难点：登录微信小程序
我看了很多关于登录相关介绍的文档。 下图的介绍是更详细的流程。 这个逻辑在开发过程中也用到了。 只是我们没有获取到用户的敏感信息，所以没有第7步和第8步。直接通过wx.()获取用户名、头像等信息就可以满足我们的需求了。
登录步骤是调用wx.login() API。 成功后会获取到用户的code信息，并将code信息通过接口传递给自己的后端（不是微信的后端），在服务器上向微信后端发起请求。 成功后，获取用户登录状态信息，包括等等。这就是通常所说的交换码，是用户的唯一标识符。 自己的后端获取并等待信息后，通过第三方加密生成自己的信息，返回给前端。 前端获取到第三方加密信息后，通过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、如何通过访问服务器接口在本地启动服务？
默认情况下，微信小程序都使用https请求。 如果是本地开发调试，需要在开发工具->项目设置中勾选【不验证合法域名、Web视图（业务域名）、TLS版本、HTTPS证书】。 ，让您可以愉快的使用和访问服务器。
4. 如何清除组件
一个常见的使用场景是，在用户反馈中，用户投诉完毕并点击确认发送成功后，为了防止用户再次提交，需要清除其中的数据。
用过Vue的人都知道，绑定一个字段，成功后将该字段赋值为空就可以了。 但是，微信小程序无法使用。
微信小程序文档指出：不建议对多行文本修改用户输入，因此处理函数不会反映返回值。
怎么解决呢。 您可以绑定一个值。 使用表格提交。 成功后，只需清除value绑定的值即可。
具体代码如下：
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获取本地资源。 然而，通过image的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();
}
});
});
};具体代码
这个项目的具体代码（包括前端和后端，后端的think.js框架，数据库的mysql）已经贴出来了。 如有需要，欢迎您克隆或加星。
小程序前端：
小程序背景：
本页面内容由塔灯网络科技有限公司通过互联网收集整理。 所有信息仅供用户学习参考。 本网站不拥有所有权。 如果您认为本页面内容涉嫌抄袭，请及时联系我们并向我们提供信息。 工作人员会在5个工作日内联系您索取相关证据。 一经核实，本站将立即删除侵权内容。 本文链接：
