如何制作唱歌小程序，类似于小程序开发文档

在线上唱歌小程序开发不到一个月，通过使用小程序的run-and-go功能唱出小程序，这样小程序用户的数量就超过了200万，以下是最近以小程序为例的接触，例如简要总结小程序低级框架和一些api接口设计思路。

目录1，唱吧小程序框架分析2，唱吧小程序底层构建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结构的，那么如何实现视图层的渲染，也就是说，运行时环境会将页面中的WXML节点树结构转换为JS对象，渲染，这也是一个主要原因小程序体验优于普通共享页面。它节省了大量关于浏览器DOM的操作，并在JS运行时环境之间进行了解析和解析。

2唱吧小程序底层构造

那么，基于一个好的框架，这次我们实际上做了我们在设置底层小程序时所做的事情。

首先，我们没有构建和重建纯Native层，而是上面提到的API层的一次性封装，特别是在网络请求的转换和我们的前端团队小程序汇海的登录过程方面试图做一些分层和优化。

网络请求方面

首先，在网络请求优化方面，微信提供的请求接口基本上与此一样长：

Wx.request（{

Url:'test.php'，//例如，不是真正的接口地址

数据: {

x:''，

y:''

}，

标头: {

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

}，

成功:函数（res）{

CONSOLE.LOG（res.data）

}

}）

它是否像以前的请求模式非常相似，是的，它是旧的$ .ajax，这次我们想到了ajax回调地狱，如果页面有很多请求，请求的顺序是有限的，并且时刻是各种嵌套可以说是强制要求的。

因此，为了解决回调问候并同时优化请求代码逻辑，我们封装了wx.request，我们在小程序开发中引入了async/await语法糖，并使用了facebook的再生模块（请注：https://github。 com/facebook/regenerator），async，await由babel编译的函数，然后使用regenerator-runtime模块提供函数实现，这方面在小程序中也有效支持ES6语法编译。

在实现过程中，它由公共方法封装并返回wx.request的承诺

//wechat.js

Const request=（url，options）=> {

返回新的Promise（（解决，拒绝）=> {

Wx.request（{

网址:网址，

方法: options.method，

数据: Object.assign（{}，options.data），

标头: options.header，

成功:解决，

失败:拒绝

}）

}）

}

然后在我们的上层公共库中，编写与请求关联的处理逻辑。

//changba.js

Const regeneratorRuntime=require（'./regenerator-runtime.js'）

Const wechat=require（'./wechat'）

Const URI='xxx'

Const requestAPI=async（url，opt）=＆gt; {

Const app=getApp（）

让options=Object.assign（{data: {}}，opt）

如果（/^\/api\/(.+)$/.test(url)) {

Url=URI + url;

}

如果（！options.method）{

Options.method='POST';

}

设header={

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

}

Options.header=options.header ||标题;

//除了login方法之外，必须将其余的接口添加到sessionInfo中，后端加密的session_key是

如果（！url.includes（'/checkCode'））{

Options.data ['sessionInfo']=app.globalData.sessionkey;

}

设isTimeout=false;

试试{

Const ree=等待wechat.checkSession（）;

} catch（错误）{

isTimeout=true;

};

试试{

如果（isTimeout）{

让aaa=等待登录（app）;

}

wx.showLoading（{

标题:'正在加载'

}）;

Const res=await wechat.request（url，options）

如果（res＆amp;＆amp; res.statusCode）{

如果（res.statusCode！=200）{

如果（wx.hideLoading）{

wx.hideLoading（）

}

wx.showModal（{

内容: wechat.errMsg（res.statusCode）.message || '请求失败，请再试一次'，

标题:'提示'，

showCancel: false

}）

} else {

如果（res.data＆amp;＆amp; res.data.code===1）{

如果（wx.hideLoading）{

wx.hideLoading（）

}

返回res.data

} else {

//xxx其他业务逻辑处理

}

}

}

} catch（错误）{

Console.log（'请求异常信息：'+错误）

如果（wx.hideLoading）{

wx.hideLoading（）

}

wx.showModal（{

内容:'请求信息异常'，

标题:''，

showCancel: false

}）

}

}

在上面的封装过程中，除了考虑请求超时，检查用户身份和其他操作外，还可以加入其他业务处理逻辑，例如会话到期，这也是您自己的设置请求，匹配和根据您自己的业务需求进行转型

然而，在经历了这两层封装之后，在编写业务逻辑代码的过程中，如果习惯于提取和axios的朋友应该更喜欢这个，那么可以一目了然地发送请求，以实现逻辑清晰和自由写入。办法。

异步getdata（）{

让self=this;

设cb_getdata=await app.changba.requestAPI（'/api/xxx'，{data: {id: self.data.id}}）;

如果（cb_getdata＆amp;＆amp; cb_getdata.code===1）{

//xxx

}

}

登录过程方面

我们来谈谈汇海小程序之后的登录过程。在这方面，小程序与其他的不同，因为没有固定的登录汇海页面，而是完整的后台交互。当然，根据产品定位和要求，您也可以自己做一套登录。系统〜

＆lt; 汇海（www.hvihi.com）是国内知名的商城系统和商城网站建设提供商，其中汇海技术小程序系统提供小程序商城开发，小程序配送系统，微分配系统，商城系统，电子商务网站建设， 微信发行系统，小程序商城及其他多端商场和电子商务行业解决方案＆gt;

确认：这个文件和图像源网络编辑器的网站部分，如果有侵权及时通信删除。 汇海hvihi.com网站原创文章，请注明出处。