微信小程序的理解

前言

我已经很久没有更新过文章了，其中有很大大一部分都和微信小程序有关，通过寒假，对微信小程序有了一些理解和看法，并且组队参加了一个有关微信小程序的互联网+的创新比赛，为了做足工作，把之前已经接近一年半多时间没有用过的html,vue等知识捡了回来。其次，为了更好更快的理解开发微信小程序，特别将 https://kuangtant.gitee.io ，也就是本文官网，开发改造了一下，未来不久，将会上线Kuangtant for Wechat Mini Program小程序，目前仍然还在测试阶段，可能很快就会上线和大家见面。（之所以这么慢，另一个原因是，互联网＋的小程序与之同步开发），下面讲讲一些关于这两款小程序开发，我的理解，和一些坑。

上手

学习

学习新的知识，一般来说，必不可少的就是有关的文档了，初识小程序，一定离不开的是微信小程序开发文档微信开放文档，有了文档，就可以在微信小程序领域畅通无阻，其次，为了提高开发时的效率，肯定离不开的是微信小程序前端开源UI框架还有它的文档，常见的就是 WeUi,vant app,colorUI等，并且阅读他们的文档，可以轻松绘制UI界面

上手

微信小程序的无非是从了解结构开始，一个微信小程序简单来说，无非就是包括app.json,app.js,app.wxss还有在page文件夹下的每一页面的js,json,wxml,wxss文件，其它的比较常用的就是项目配置文件，比如project.config.json等

微信小程序和前端浏览器网页也开发差不多，主要的区别在微信小程序重写了vue的运行方法，wxml不支持很多的html标签，仅支持一些比如text,view等标签

在微信小程序里面是，流程大概是先启动app.js里面的App()方法，每一页的app.js里面就是Page()方法，自然从里面的onLoad方法开始，然后依次调用各种方法，但是由于微信小程序没有提供dom进行操作，每次更新页面内容就必须使用setData方法，更改数据。页面开始之前，和vue一样，先得初始一些data:{key:"vlule"}

微信小程序为了更好的显示内容，微信小程序提供了wx:for , wx:if , wx:key等节点，来显示数据

上手一般的问题

点击事件

微信原生的提供的是bindtap,比如，我开发过程中的一个例子

1	<van-button size="mini" data-selectedId="{{item}}" bindtap="correctInfo" round type="info">修改信息</van-button>

correctInfo(e) {
    var d = e.currentTarget.dataset.selectedid;
    this.setData({
      goodsname: d.commodityName,
      goodsdesc: d.commodityDetail,
      goodsnum: d.commodityQuantity,
      goodsprice: d.commodityPrice,
      choicheId:d.id,
      fileList: [],
      upgoods: true
    });
    this.iWillSell({
      upgoods: true
    });
  }

最快解析html的方法

在微信小程序解析html标签不是一件容易的事，一般可以参照xml的解析方法，解析dom,但是最后发现，解析读取html标签的方式，在微信小程序里最好的方法是正则表达式，有关复习正则的时候那叫一个痛苦，就不多说，具体就按照，下面代码改编

regx(res, my_reg) {
    var data = [];
    my_reg.lastIndex = 0;
    var tmp_reg;
    while ((tmp_reg = my_reg.exec(res)) != null) {
      data.push(tmp_reg[1]);
    }
    return data;
}
//调用的时候按照一般数组格式，返回正则匹配到的数组
this.regx(res,/A([\s\S]*?)B/gmi);

返回的是A-B的所有内容

展示html的内容

现在解析html再显示在页面就必须使用一些插件，比如wxPrase.js但是，对于代码高亮等需求就必须自己拓展，改变代码，不太好实现，并且不支持插件拓展，还有一个问题，该插件的开发作者已经对该项目停止维护了，为了更好地解决用户需求，建议使用mp-html.js来实现，它的好处就不言而喻，在此提供以下两个项目的位置

mp-html: 小程序富文本组件，支持渲染和编辑 html，支持在微信、QQ、百度、支付宝、头条和 uni-app 平台使用https://gitee.com/jin-yufeng/mp-html/

wxParse:https://github.com/icindy/wxParse

有关前端与后端token验证

设置了token的一般应该是放在header里面，由于第一次，姿势不对，我和后端多次交涉，最后有很大一部分的问题，实际写法应该如下

1
2
3

header: {
        Authorization: "Bearer " + app.globalData.token
      }

如此一来，后端的解析完美通过

有关微信登录

说到这，就必须说说，登录流程，必须先调用wx.login获得code上传到服务器，让服务器与微信服务端互交，然后使用获取sessionId,用于后面的业务，wx.getUserProfile弹出用户授权窗口，用于登录信息，唯一我踩得最深的坑，我就是将wx.getUserProfile写入了wx.login的success方法里面，一直请求不成功，过了很久，最后发现，wx.getUserProfile只能写在按钮点击事件里面进行交互，不然就会像我一样，一直调试，一直fail

所以，最有效的登录逻辑，就是，在打开用户登录页面，首先调用wx.login，最后在页面上写一个引导用户登录的按钮，用来调用wx.getUserProfile

文件按序上传

对于微信小程序的文件上传，最让人吐槽的是文件上传，调用 wx.uploadFile,每一次只能上传一个文件，多文件上传就必须多次调用该接口方法，依次文件上传就最好使用递归上传法，比如

upfile(file, count) {
    let that = this;
    wx.uploadFile({
      filePath: file[count],
      name: 'file',
      url: this.data.host + "/commodity/insert/upload",
      header: {
        Authorization: "Bearer " + app.globalData.token
      },
      method: "POST",
      success: (res) => {
        var res = JSON.parse(res.data);
        if (res.succeed) {
          that.setData({
            upedfile: [...that.data.upedfile, res.data]
          });
        } else {
          Toast(res.message + res.code);
        }
      },
      fail: () => {
        Toast("图片上传失败");
      },
      complete: () => {
        if (count == file.length - 1) {
          that.upData();
        } else {
          that.upfile(file, count + 1);
        }
      }
    })
  }
//以上只是参考，具体按照自己的需求实现
upfile(fileList,0);

请求链接参数后端没收到，不齐全

有这个问题，可能使用了get方法，出现这样的情况

在其他http测试接口没问题，在微信小程序测试就有如上问题，就不妨将后端的get方法改为post请求，原因是url长度在微信小程序的长度有限制，不适合请求过长的url