微信小程序开发总结（附源代码）

2020-02-13 17:04 作者：admin 浏览量：

 
这次的肺炎疫情对中国的中小企业将会是沉重的打击，据钉钉和微信两个办公平台数据统计现有2亿左右的人在家远程办公，那么对于中小企业的员工来说不懂IT技术将会让他们面临的最大挑战和困难。
 
电脑不亮了怎么办？系统蓝屏如何处理？办公室的电脑在家如何连接？网络应该如何设置？VPN如何搭建？数据如何对接？服务器如何登录？数据安全如何保证？数据如何存储？视频会议如何搭建？业务系统如何开启等等一系列的问题，都会困扰着并非技术出身的您。
   
好消息是当您看到这篇文章的时候，就不用再为上述的问题而苦恼，您只需拨打艾锑无限的全国免费热线电话:400 650 7820，就会有我们的远程工程师为您解决遇到的问题，他们可以远程帮您处理遇到的一些IT技术难题。
 
如遇到免费热线占线，您还可以拨打我们的24小时值班经理电话:15601064618或技术经理的电话:13041036957，我们会在第一时间接听您的来电，为您提供适合的解决方案，让您无论在家还是在企业都能无忧办公。
 
那艾锑无限具体能为您的企业提供哪些服务呢？ 艾锑无限始创于2005年，历经15年服务了5000多家中小企业并保障了几十万台设备的正常运转，积累了丰富的企业IT紧急问题和特殊故障的解决经验，制定了相对应的解决方案。我们为您的企业提供的IT服务分为三大版块:
 
第一版块是保障性IT外包服务:如电脑设备运维，办公设备运维，网络设备运维，服务器运维等综合性企业IT设备运维服务。
 
第二版块是功能性互联网外包服务:如网站开发外包，小程序开发外包，APP开发外包，电商平台开发外包，业务系统的开发外包和后期的运维外包服务。
 
第三版块是增值性云服务外包:如企业邮箱上云，企业网站上云，企业存储上云，企业APP小程序上云，企业业务系统上云，阿里云产品等后续的云运维外包服务。
 
您要了解更多服务也可以登录艾锑无限的官网:www.bjitwx.com查看详细说明，在疫情期间，您企业遇到的任何困境只要找到艾锑无限，能免费为您提供服务的我们绝不收一分钱，我们全体艾锑人承诺此活动直到中国疫情结束,我们将这次活动称为——春雷行动。  
以下还有我们为您提供的一些技术资讯，以便可以帮助您更好的了解相关的IT知识，帮您渡过疫情中办公遇到的困难和挑战，艾锑无限愿和中国中小企业一起共进退，因为我们相信万物同体，能量合一，只要我们一起齐心协力，一定会成功。再一次祝福您和您的企业，战胜疫情，您和您的企业一定行。
 
微信小程序开发总结（附源代码）
最近公司项目不是很忙，有时间研究研究微信小程序。参考了目前市场上各类答题类的app、小程序等等，做了一款自己的微信答题小程序，包括前端和后端，后端是用node做的。现在已经上线了，名字叫【你问我猜猜猜】，大家感兴趣的话可以去试玩一下。

会vue、react, 微信小程序，so easy
 
如果之前用过vue或者react，直接看看文档上手微信小程序完全没问题。整体开发思路很相似，包括其中的一些语法，基本上都是一样的。或者用美团的mpvue框架，那就根本不用学习小程序的语法了，写起来跟vue一样。但是我们开发的时候没有用框架，用的是原生的微信小程序语言，开发起来也很easy。而且微信小程序有很多自己的API，比如图片上传、下载、音频等等，项目中用到的时候再找文档就来得及。
 
这次开发的难点，也是微信小程序的难点，应该就是在登录了。如果把登录流程弄明白了，在开发其他的功能，基本上就是时间的问题了。
 
难点：微信小程序登录
 
看了好多文档关于登录相关的介绍，下图的介绍是比较详细的过程，开发过程中也是采用的这个逻辑。只不过我们没有获取用户的敏感信息，所以没有7、8步骤。直接通过wx.getUserInfo()获取到用户名、头像等信息即可满足我们的需求。
 
登录步骤
 
通过调用wx.login() API，成功后会拿到用户的code信息
将code信息通过接口，传给自己的后台（不是微信的后台），在服务端发起对微信后台的请求，成功后拿到用户登录态信息，包括openid、session_key等。也就是通常所说的拿code换openid，这个openid是用户的唯一标识。
自己的后台，拿到openid、session_key等信息后，通过第三方加密，生成自己的session信息，返回给前端。
前端拿到第三方加密后的session后，通过wx.setStorage()保存在本地，以后的请求都需要携带这个经过第三方加密的session信息。
之后如果需要用户重新登录，先去检查本地的session信息，如果存在，再用wx.checkSession()检查是否在微信的服务器端过期。如果本地不存在或者已过期，则重新从步骤1开始走登录流程。
登录的代码如下：
1.  wx.getStorage({
2.       key: "code",
3.       success: res => {
4.         wx.checkSession({
5.           success: res => {
6.             console.log("Session未过期，登陆状态未失效");
7.           },
8.           fail: err => {
9.             // 重新登录
10.             console.log("Session过期，重新登录");
11.             loginAction();
12.           }
13.         });
14.       },
15.       fail: res => {
16.         console.log("无code信息，调用登录接口获取code");
17.         loginAction();
18.       }
19.     });
登录的流程图如下： 注意事项
1. npm这么容易，install个包用用？
微信小程序没有包管理这一说（但是最新版本的好像支持npm了），所以想要用到别的库里的组件，只能找到源码，copy过来。
2. 既然openid是唯一的，那我为什么不能用openid作为凭证，还要麻烦的用个第三方session
有可能造成数据越权。比如今天我通过我的手机登录了微信，打开了小程序。但是明天有个朋友想用我的手机登一下微信。如果用openid作为登录凭证，登录小程序的时候检测到openid已经存在，所以不会再走登录过程，这样我的数据就让我的朋友看到了。所以还是要按照官方推荐的步骤来。
3. 本地启服务，如何通过localhost访问服务端接口？
微信小程序默认都是https请求，如果本地开发联调，需要在开发者工具 -> 项目设置里，勾选上【不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书】，这样就可以愉快的使用localhost访问服务端了。
4. textarea组件如何清空
一个常用的使用场景，用户反馈里，用户巴拉巴拉吐槽完，点击确认发送成功后，为了防止用户再次重复提交，需要将textarea中的数据清空。
用过vue的大家都知道，绑定一个字段，当成功后将这个字段赋值为空就好了。but，微信小程序可不干。
微信小程序文档中这样说明：不建议在多行文本上对用户的输入进行修改，所以 textarea 的 bindinput 处理函数并不会将返回值反映到 textarea 上。
如何解决呢。可以给textarea绑定一个value值。用form表单去提交。成功后将value绑定的值清空就可以了。
具体代码如下：
1. <form bindsubmit="bindSubmit">
2.     <textarea placeholder="如果您对我们有任何建议或意见，请在此处向我们提交，期待您的宝贵建议。" name="feedbackContent" value="{{feedbackContent}}" bindinput="bindTextAreaInput" />
3.     <button class="submit-btn" form-type="submit" disabled="{{feedbackContent.length == 0 || btnLoading}}" loading="{{btnLoading}}" value="{{feedbackContent}}">
4.         提交
5.     </button>
6. </form>
7.  
8. bindTextAreaInput: function(e) {
9.     this.setData({
10.       feedbackContent: e.detail.value
11.     });
12. },
13.  
14. bindSubmit: function(e) {
15.     this.setData({
16.       btnLoading: true
17.     });
18.     addFeedbackRequest({
19.       content: e.detail.value.feedbackContent.trim()
20.     }).then(res => {
21.       if (res.success) {
22.         this.setData({
23.           btnLoading: false,
24.           feedbackContent: ""
25.         });
26.         this.showToast("提交成功，感谢您的反馈");
27.       } else {
28.         console.log("fail");
29.         this.showToast("提交失败，请稍后再试");
30.       }
31.     });
32.   },
5. 有关图片的引用问题
给页面添加背景是，如果通过background属性来添加，抱歉，那你不能引用本地的图片，只能引用经过base64转码的或者网上的图片。
小程序的文档上有说，本地资源是无法通过css获取的。但是通过image的src属性引用的图片，则没有这个限制。
6. navigateTo层级不能超过5级
文档上说明：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。
使用wx.navigateTo()的时候，规定层级不能超过5级。如果超过5级，页面就出错了。但wx.redirectTo()则无此限制。
注意：
wx.navigateTo()是保留当前页面，跳转到应用内的某个页面，使用 wx.navigateBack 可以返回到原页面
wx.redirectTo()是关闭当前页面，跳转到应用内的某个页面。
7. 统一封装请求，在header中携带session信息
wx.request()是发送请求的api，如果每个request请求都在header中重新一份session信息，一定很麻烦。所以基本上前端都会封装一个新的请求函数，包括携带session信息，处理错误接口等功能。具体代码如下：
1. const httpRequest = data => {
2.     return new Promise(function(resolve, reject) {
3.         console.log("http request", data.url);
4.         let code = "";
5.         wx.getStorage({
6.             key: "code",
7.             success: res => {
8.                 code = res.data;
9.                 console.log("http request success", code);
10.                 //发起网络请求
11.                 wx.request({
12.                     url: data.url,
13.                     data: { ...data.data },
14.                     method: data.method,
15.                     header: {
16.                         code: code,
17.                         "content-type": "application/x-www-form-urlencoded"
18.                     },
19.                     success: function(res) {
20.                         if (res.data.success) {
21.                             resolve(res.data);
22.                         } else {
23.                             // console.log(JSON.stringify(res));
24.                             if (res.data.errorCode == 100) {
25.                                 goBackIndex();
26.                             }
27.                             reject(res.data);
28.                         }
29.                     },
30.                     fail: function(res) {
31.                         console.log(JSON.stringify(res));
32.                         if (res.data.errorCode == 100) {
33.                             goBackIndex();
34.                         }
35.                         reject(res);
36.                     }
37.                 });
38.             },
39.             fail: res => {
40.                 console.log("http request failed", code);
41.                 console.log("not found code in storage");
42.                 goBackIndex();
43.             }
44.         });
45.     });
46. };