您好! 请登录 注册

艾锑学院——微信小程序开发总结(附源代码)

发表时间: 2020-02-13 15:41:29

浏览: 78

以下还有我们为您提供的一些技术资讯,以便可以帮助您更好的了解相关的IT知识,帮您渡过疫情中办公遇到的困难和挑战,艾锑无限愿和中国中小企业一起共进退,因为我们相信万物同体,能量合一,只要我们一起齐心协力,一定会成功。再一次祝福您和您的企业,战胜疫情,您和您的企业一定行。

迎战疫情,艾锑无限用爱与您同行

为中国中小企业提供免费IT外包服务

 

 

这次的肺炎疫情对中国的中小企业将会是沉重的打击,据钉钉和微信两个办公平台数据统计现有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. 

"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.};

 


咨询热线
15601064618

推荐分享

扫描领千元礼品

© 2015-2017 www.bjitwx.com 京ICP备06011561号  北京艾锑无限科技发展有限公司 北京朝阳区酒仙桥路2号798艺术区音响南路A01座