唱吧小程序开发上线还不到一个月的时间，，，，，唱吧小程序通过借助小程序的用完即走特征，，，，，使小程序用户数突破200万，，，，，下面就以最近接触到的一款小程序为例，，，，，简朴总结一下小程序底层框架和一些api接口方面的设计思绪。
。。。

1小程序框架浅析

各人都说小程序体验好，，，，，即开即用，，，，，和通俗Webview渲染的H5相比页面启动速率、流通度等方面好许多，，，，，这个问题我以为需要从几个方面思量，，，，，首先，，，，，抛开产品营业层面的设计和优化，，，，，就是小程序底层框架的设计和实现方面的特点。
。。。

当我们新建或翻开一个小程序项目（以唱吧角逐小程序为例），，，，，即可看到如下图的项目结构。
。。。

小程序入口文件为app.js，，，，， 全局样式文件为app.wxss，，，，，全局设置文件为app.json，，，，， 每个页面中再分视图wxml，，，，，wxss和逻辑js、文件设置json等，，，，，从这里我们可以看出，，，，，整个小程序的上层框架，，，，，也就是概略分为视图层和逻辑层两个部分。
。。。 （摘自官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/structure.html）

小程序接纳的MINA框架，，，，，View层主要用来渲染页面结构，，，，，App Service层用来逻辑处理、数据请求、接口挪用，，，，，它们在两个线程里运行，，，，，整个小程序是只有一个App Service的，，，，，并且整个小程序的生命周期内它是常驻内存的。
。。。View层主要使用WebView渲染，，，，，而App Service逻辑层是使用JSCore运行。
。。。

通讯方面，，，，，View和AppService是双线程通讯的，，，，，主要通过系统层的JSBridage举行通讯，，，，，AppService把数据转变通知到View，，，，，体现要领也就是setData要领，，，，，触发View页面更新，，，，，View把触发的事务通知到AppService举行营业处理。
。。。

这里要说的是，，，，，小程序是没有DOM结构的，，，，，那么视图层的渲染是怎样做到的呢，，，，，就是运行情形中会把pages中的WXML的节点树结构，，，，，转化为JS的工具，，，，，举行渲染，，，，，这也是小程序体验优于通俗分享页面的一大原因，，，，，省去了许多关于浏览器DOM的操作，，，，，由JS运行情形之间举行渲染剖析。
。。。

2唱吧小程序底层搭建

那么话说回来，，，，，基于优异的框架，，，，，这次在搭建唱吧小程序底层的时间，，，，，我们着实做了哪些事情呢。
。。。

首先，，，，，我们并没有举行纯Native层的搭建和刷新，，，，，而是对上述提到的API层的一次的封装，，，，，尤其是在关于网络请求的刷新和小程序启动的登录流程方面，，，，，我们前端团队实验去做一些分层和优化。
。。。

• 网络请求方面

首先网络请求优化方面，，，，，微信提供的请求接口基本长这样：

1. wx.request({

2.  url: 'test.php', //仅为示例，，，，，并非真实的接口地点

3.  data: {

4.     x: '' ,

5.     y: ''

6.  },

7.  header: {

8.      'content-type': 'application/json' // 默认值

9.  },

10.  success: function(res) {

11.    console.log(res.data)

12.  }

13. })

是不是感受和之前的某种请求模式很像，，，，，没错，，，，，就是古老的$.ajax，，，，，这时间我们又想起了ajax的回调地狱，，，，，若是页面的请求许多，，，，，请求的顺序尚有限制，，，，，瞬间又是种种嵌套，，，，，可以说是要从请求到懵逼了。
。。。

以是为相识决回调地狱和同时优化请求代码逻辑，，，，，我们在封装wx.request的同时，，，，，我们在小程序开发中，，，，，引入了async/await语法糖，，，，，用到了来自facebook的regenerator？？？？？？椋ㄏ昵榍氪粒篽ttps://github.com/facebook/regenerator），，，，，async、await函数经babel编译后，，，，，再用regenerator-runtime？？？？？？橛糜谔峁┕π迪，，，，，这一方面也得力于小程序支持ES6语法的编译。
。。。

实现历程中，，，，，单独用一个公共要领封装，，，，，返回wx.request的promise

1. //wechat.js

2.  

3. const request = (url,options) => {

4.  return new Promise((resolve, reject) => {

5.    wx.request({

6.      url: url,

7.      method: options.method,

8.      data: Object.assign({}, options.data),

9.      header: options.header,

10.      success: resolve,

11.      fail: reject

12.    })

13.  })

14. }

之后在pp电子上层公共库中，，，，，编写与请求相关的处理逻辑。
。。。

1. // changba.js

2.  

3. const regeneratorRuntime = require('./regenerator-runtime.js')

4. const wechat = require('./wechat')

5. const URI = 'xxx'

6.  

7. const requestAPI = async (url,opt) => {

8.  const app = getApp()

9.  let options = Object.assign({data: {}},opt)

10.    if (/^\/api\/(.+)$/.test(url)) {

11.        url = URI + url;

12.    }

13.    if (!options.method) {

14.        options.method = 'POST';

15.    }

16.    let header = {

17.        'Content-Type': 'application/x-www-form-urlencoded'

18.    }

19.    options.header = options.header || header ;

20.    //除了login要领  其余接口都要加入sessionInfo也就是后端加密过的session_key

21.    if (!url.includes('/checkCode')) {

22.      options.data['sessionInfo'] = app.globalData.sessionkey;

23.    }

24.    let isTimeout = false;

25.    try {

26.      const ree = await wechat.checkSession();

27.    } catch (error) {

28.      isTimeout = true;

29.    };

30.    try {

31.      if (isTimeout) {

32.        let aaa = await login(app);

33.      }

34.      wx.showLoading({

35.        title: '加载中'

36.      });

37.        const res = await wechat.request(url,options)

38.        if (res && res.statusCode) {

39.            if (res.statusCode != 200) {

40.                if (wx.hideLoading) {

41.                    wx.hideLoading()

42.                }

43.                wx.showModal({

44.                    content: wechat.errMsg(res.statusCode).message || '请求失败，，，，，请重新实验',

45.                    title: '提醒',

46.                    showCancel: false

47.                })

48.            } else {

49.                if (res.data && res.data.code === 1) {

50.                  if (wx.hideLoading) {

51.                     wx.hideLoading()

52.                  }

53.                  return res.data

54.                } else {

55.                    // xxx 其他情形营业逻辑处理

56.                }

57.            }

58.        }

59.    } catch (error) {

60.        console.log('请求异常信息：' + error)

61.        if (wx.hideLoading) {

62.          wx.hideLoading()

63.        }

64.        wx.showModal({

65.            content: '请求信息异常',

66.            title: '',

67.            showCancel: false

68.        })

69.    }

70. }

上述封装历程中，，，，，以是除了思量到请求超时、检查用户身份等操作，，，，，还可以加入session逾期等相关其他的营业处理逻辑，，，，，这也是自己搭建请求的利益，，，，，针对自己的营业需求，，，，，举行匹配和刷新。
。。。

然而在履历这样两层封装之后，，，，，在写营业逻辑代码的历程中，，，，，就可以一目了然的发送请求了，，，，，抵达逻辑清晰且誊写自若，，，，，若是习惯了fetch以及axios的朋侪应该都会较量喜欢这种方式。
。。。

1.   async getdata() {

2.     let self = this;

3.     let cb_getdata = await app.changba.requestAPI('/api/xxx', { data: { id: self.data.id } });

4.     if (cb_getdata && cb_getdata.code === 1) {

5.           // xxx

6.     }

7.   }

• 登录流程方面

下面说下，，，，，启动小程序后的登录流程方面，，，，，在这一方面，，，，，小程序与其他差别的是，，，，，没有牢靠的登录启动页面，，，，，而是完全后台交互，，，，，虽然凭证产品定位和需求，，，，，也可以自己做一套登录系统~