微信小程序介绍--前端第一站

　　说起小程序，我心里其实波澜万千，去年也是这个雨纷纷的季节，我来到一个创业公司的团队，开始做一个校园交友的小程序项目。彼时的我，真的是菜的一批，只会切静态页面加上一点js，连ajax网络请求都还没学好，jQuery、vue、react、node这些就更不用谈了。凭借着网上看教程视频模仿了一个小程序，然后就混进来这个团队。= = 现在想想还要感谢曾经面试官的放水，才让我在接触前端两个月之后就有机会开启实习之旅。当然小程序的开发程度怎么样，就不用多说了，我们当时是几个人一起开发，但都是菜鸟，我是属于打酱油的。每天在图书馆恶补小程序的知识，也看一些教程，才勉强实现一些功能，现在想想，真是走了太多弯路。本来应该是打基础的时间，却浪费了太多时间在小程序上面，只是学到一些皮毛的招式，收获不大，但这仍然是我比较珍贵的一段回忆，因为日子过得很充实。

　　说了这么多，是最近又重新学了一下小程序，看着熟悉的微信开发者工具，感慨万千，还是一样难用，但是比起去年算是提高不少了。

　　总结一下小程序的一些知识点。

　　小程序和vue、react这些一样都是不直接操作dom，是采用操作数据的方式，这点比jQuery方便很多，只需要专注于数据而不用去操作烦人的dom。

　　小程序的一些基本用法和指令，和vue差不多，感觉就是抄vue的。遍历数据vue是v-for ，而小程序是wx:for；判断是否展示vue是v-if，小程序是wx:if 。。。有没有感觉一股浓浓的山寨凤。行吧，既然要用人家开发的小程序，那就不能挑三拣四啦。

　　最想吐槽的是，小程序的html里触发函数需要传值的时候，传参方式有点奇葩，在vue中，直接函数后面括号里面放参数就行，在react里稍微麻烦一点需要使用bind来传，还可以接受，小程序就麻烦多了，非常麻烦，需要在html里声明 data-自定义的键：值 ， 在js的函数里使用event.target来拿到传给函数的值。。学到这里真的心里在问候小程序的开发工程师（这一点可没有抄袭哦）。

　　在react中，修改state里的值不可以直接修改，需要使用this.setState（）来进行修改，小程序这点和react差不多，用的是this.setData（）。

　　小程序的路由传参方式比较单一，只能使用类似get请求一样把参数放在路径后面。

　　小程序里也有template，可以比作页面组件，比如说一些用的比较多的页面部分，可以抽取出来，放在一个文件夹里，这里只支持html和css，不支持js，比较遗憾。用法：

html里先引入<import src='/template/xxx'/>  ，<template is='模板名' data="{{ 想传的值}}"></template>

css里也要引入  @import '/template/addCartModal/addCartModal.wxss';

这里需要注意，使用模板但是绑定的事件是写在你引入的页面的js里。

　　小程序里的路由没有像vue和react一样，更为简单不用写路由表什么的，比如wx.switchTab跳tab，关闭其他页面，wx.navigateTo等待这些。要进行页面跳转只有调用方法传入URL就可以，比较方便。但是缺点也是比较明显，它不能路由嵌套，使用起来诸多不便。

　　小程序发网络请求用的是wx.request，和传统的ajax有点像，但是后来用习惯了axios，觉得小程序自带的还是比较繁琐，故做了一下封装。

　　

class Axios{
  get(url,data,formType){
    return this.request('get',url,data,formType)
  }
  put(url,data,formType){
    return this.request('put',url,data,formType)
  }
  delete(url,data,formType){
    return this.request('delete',url,data,formType)
  }
  post(url,data,formType){
    return this.request('post',url,data,formType)
  }

  request(method,url,data,formType){
    return new Promise((resolve,reject)=>{
      // 判断post请求传的数据是表单类型还是json类型
      var contentType = formType?'application/x-www-form-urlencoded':'application/json'

      wx.request({
        url,data,method,
        header: {
          "content-type":contentType
          // 注意上传格式   默认是json
        },
        success: (res)=>{
           resolve(res.data)
        },
        fail: (res)=>{
           reject(res)
        }
      })
    })
  }
}

module.exports = new Axios()

　　这样用起来就和axios一样，只需要传入url和参数就行。舒服多了。

　　小程序的数据缓存不是html5自带的localstorage，它是自己定义的，用起来也差不多。wx.setStorageSync，wx.getStorageSync，wx.removeStorageSync，wx.clearStorage，这是同步的用法，对应也有异步的方法。

　　小程序有一些开发能力，比如web-view（可以在小程序中插入网页）小程序中打开网页需要企业认证才可以，offical-account可以用来关联公众号。 ==

　　小程序有自己的登录系统，不必重新写，前端调用比较方便，后端需要操作的逻辑多一点。整套登录逻辑：

　　1、wx.login()获取code，发给后端
　　2、后端需要把appid+appsecret+code发给微信服务器 （appid和appsecret在小程序管理后台查看）
　　3、微信服务器返回session_key+openid给后端
　　4、后端根据openID+session_key生成一个token，传给前端
　　5、前端把token存起来，在请求头加上token

　　小程序有自己的支付系统--微信支付。这个流程比较复杂，主要逻辑后端来处理，前端调用还算是方便。支付流程：

　　1、前端发请求给后端请求支付，后端调用小程序登录api发给微信服务器
　　2、微信服务器返回openid给后端，生成商户订单
　　3、后端调用支付下单api，微信服务器返回订单支付信息，后端返回支付信息给前端
　　4、用户支付完传给微信服务器，返回支付成功页面
　　5、微信服务器向后端发支付结果，更新订单状态

　　小程序支付前端要做的事情总结起来就是：1. 调用后端写的下单接口 后端返回5个参数（时间戳 随机字符串 加密算法 加密字符串 package）2. 通过下单接口返回的参数调用wx.requestPayment

　　小程序还有很多零碎的知识点，这里就不一一赘述，可以自行官网查阅。

　　前端学到现在，一些常用的技术栈算上小程序已经基本点亮，此时距离接触前端已经过去15个月了，这段时间有时感觉真的比高三还累啊，最近感觉愈发疲惫。技术不是最终目的，技术学好后寄托于某个赚钱的业务赚到钱才是目的，当然现在还是得先学好技术，加油吧少年！