微信小程序前端源码逻辑和工作流程

看完微信小程序的前端代码，真的让我热血沸腾。代码的逻辑和设计一目了然，没有多余的东西。这真是一条简单的路。

废话不多，直接分析前端代码。个人观点，难免有遗漏，仅供参考。

基本文件结构：

先看门户app.js，在app(obj)注册一个小程序。接受一个对象参数，它指定了applet的生命周期函数等。其他文件可以通过全局方法getApp()获取app实例，然后直接调用其属性或方法，如(getApp()。globalData)

//app . jsapp({ onlunch : function(){//调用API从本地缓存获取数据var log=wx . getstorageync(' log ')|[]log . unshift(date . now()))wx . setstorageync(' log '，log)}，getuserninfo : function(CB){ var=this if(this . globaldata . userinfo){ type of CB=' function ' CB(this . globaldata . userinfo)} els {//调用登录界面wx下面的分析带有几个方法和属性

onlunch hook函数会在小程序初始化后自动执行，然后如果在小程序生命周期内不主动调用onlunk，就不会执行。

Varlogs=wx。getstorage ync(' logs ')| |[]获取本地缓存中的logs属性。如果该值为空，设置log=[]类似于HTML5中的localStorage。

当前登录时间被添加到数组中

Wx . setstorageync(' logs '，log)将数据存储在本地缓存中，因为wx是全局对象，所以可以在其他文件中直接调用wx . getstorageync(' log ')来获取本地缓存数据。

GetUserInfo函数，顾名思义就是获取登录用户信息，相当于这个函数提供了一个获取用户信息的接口，其他页面不调用就不会执行。其他页面通过getapp()。getuser info(function(user info){ console . log(user info)；})以这种方式调用这个方法来获取用户信息。

getuserinfo : function(cb){//参数为CB，类型为function varthat=thisif (this。global data . user info){//用户信息不为空。cb的类型==' function' CB(这个。global data . user info)//如果参数CB是函数，则执行CB获取用户信息；}else{//如果用户信息为空，也就是说第一次调用getUserInfo会调用用户登录界面。wx . log in({ success : function(){ wx . getuserinfo({ success : function(RES){ console . log(RES)that . globalData . userinfo=res.userInfo//)将用户信息提供给global data。如果再次调用getUserInfo函数，则无需调用登录界面类型为cb==' function '的cb(即。global data . user info)//如果参数CB类型是函数，执行CB获取用户信息} })} } } global data对象用于存储全局数据，在别处调用。

然后简单分析一下app.json文件，用来全局配置微信小程序，确定页面文件路径，窗口呈现，设置网络超时，设置多个标签页等。

最重要的是pages属性，它是必需的，并且是一个数组。数组中的元素是字符串文件路径，指定小程序由哪些页面组成。第一项必须是小程序的初始页面。

{ ' pages ' :[' pages/index/index '，' pages/log/log ']，' window ' : { ' backgroundTextStyle ' : ' light '，' navigationbarbackgroundcolor ' : ' # fff '，'导航栏标题文字' : '微信'，'导航栏文字样式' :' Black'}}然后看项目索引和日志文件夹。在微信小程序的初始项目中，与每个页面相关的js、wxss和wxml都放在自己的文件中，这使得结构看起来更加清晰。

让我们看看索引文件夹，这是小程序的初始页面。在index文件夹下，有三个小文件：index.js、index.wxml和index.wxss小程序将js、css和html代码分开，放在各自的文件中。js和样式表的文件名必须与当前文件夹的wxml文件名一致，这样才能保证js和样式表的效果能够在页面上显示。我很欣赏这种设计理念，统一，职责明确，降低了代码设计的复杂性。

Index.wxml，这是一个通用的模板文件，是数据驱动的。那些开发过前端mvc和mvvm项目的人会对此很熟悉。毕竟，这是基于反应。

！-index . wxml-view class=' container '/view container viewbindtap=' bindwiewtap ' class=' user info '/bind tap为容器绑定了touch事件，并在touch离开时触发bindwiewtap事件处理程序。BindViewTap添加图像类=' user info-avatar ' src=' http : { { user info }。avatar URL } } ' background-size=' cover '/image//花括号的变量来自index.js的数据对象，解析为对应的值，并且是一个实时文本类=' user info-昵称' {userinfo。昵称}}/text/viewview class='用户座右铭' text class='用户座右铭' { {座右铭}}/text/view/viewindex.js，与reaact几乎相同。Page()注册页面。接受一个OBJECT参数，该参数指定初始数据、生命周期函数、事件处理函数等。页面的。

Var app=getApp() //获取门户文件app的应用实例页面({ data : { motto : ' hello world '，user info : } }，//自定义事件处理函数。单击bindwiewtap 3360 function(){ wx . navigatteto({//跳转页面方法URL 3360 './logs/logs'})}的。userinfo，onload : function(){//页面加载发生时，自动触发生命周期函数console.log ('onload') var即=this//调用应用实例的方法获取全局数据app . getuser info(function(user info){//更新数据，page自动渲染即。setdata({ user info : user info })} })index . wxss文件仅呈现当前页面，该页面将覆盖相同样式的global app.wxss

然后分析logs log文件夹，里面包括logs.wxml、logs.js、logs.wxss、logs.json，保证渲染效果名称一致。

logs.wxml文件

！-logs . wxml-view class=' container log-list ' block wx : for=' { { logs } } ' wx : for-item=' log '//block充当容器，没有其他实际意义。Wx:for函数：遍历logs数组，块被遍历的次数将被复制。for-item相当于给br遍历的元素赋予一个变量名，方便引用。br text class=' log-item“{ index 1 } }。{{log}}/text/block/viewlogs.js文件

//logs.js varutil=require('././utils/util.js')//util.js相当于一个函数库，我们可以自定义、扩展、封装一些常用的函数和方法Page({ data: {logs: []})。onLoad:函数(){ this . setdata({ logs :(wx . getstorageync(' log ')| |[])。map(function (log) {//通过wx . getstoragesync returnutil . format time(new date(log))//date format })})} }获取本地缓存的log日志数据)logs.json文件

{'navigationBarTitleText': '查看启动日志'//当前页面配置文件，在窗口当前页面顶部设置导航栏标题等。}基本的页面结构和逻辑就这么简单，没有什么让我们费解的。

小程序还提供了很多官方组件和API等着我们去深挖。加油，少年！小程序的官方文档地址

通过这篇文章，希望对大家有所帮助。感谢您对本网站的支持！