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


Posted in Javascript onSeptember 25, 2016

废话不多说,直接分析前端代码。

文件基本结构:

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

先看入口app.js,app(obj)注册一个小程序。接受一个 object 参数,其指定小程序的生命周期函数等。其他文件可以通过全局方法getApp()获取app实例,进而直接调用它的属性或方法,例如(getApp().globalData)

//app.js
App({
onLaunch: function () {
//调用API从本地缓存中获取数据
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
}
})

我理解app.js为入口初始化文件,也是提供全局API拓展的地方。下边分析下自带的几个方法和属性

onLaunch钩子函数会在小程序初始化完成后会自动执行一次,然后在小程序生命周期里如果你不主动调用onLaunch,它就不会在执行。

var logs = wx.getStorageSync('logs') || []获取本地缓存中的logs属性,如果值为空,那么设置logs=[] 与HTML5中的localStorage作用相似logs.unshift(Date.now()) 当前登录时间添加到数组中wx.setStorageSync('logs', logs) 将数据存入本地缓存,因为wx为全局对象,所以可以在其他文件中直接调用wx.getStorageSync('logs')获取本地缓存数据

getUserInfo函数,顾名思义就是获取登录用户信息,相当于此函数提供了获取用户信息的接口,其他页面不调用自然不会执行。其他页面通过getApp().getUserInfo(function(userinfo){console.log(userinfo);})这种方式调用该方法,获取用户信息。

getUserInfo:function(cb){//参数为cb,类型为函数
var that = this
if(this.globalData.userInfo){//用户信息不为空
typeof cb == "function" && cb(this.globalData.userInfo)//如果参数cb的类型为函数,那么执行cb,获取用户信息;
}else{//如果用户信息为空,也就是说第一次调用getUserInfo,会调用用户登录接口。
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {



 console.log(res)
that.globalData.userInfo = res.userInfo//把用户信息赋给globalData,如果再次调用getUserInfo函数的时候,不需要调用登录接口
typeof cb == "function" && cb(that.globalData.userInfo)//如果参数cb类型为函数,执行cb,获取用户信息
}
})
}
})
}
}

globalData对象用来存储全局数据,在其他地方调用

然后简要分析下app.json文件,该文件作用是对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等、

最重要的是pages属性,必填,为数组,数组内的元素为字符串性文件路径,指定小程序由哪些页面组成,第一项必须是小程序初始页面。

{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}

然后来看下项目index和logs文件夹。微信小程序初始项目把每个页面相关的js、wxss、wxml放在各自的文件,这样看起来结构清晰明朗很多。

先来看index文件夹,即小程序初始页面。index文件夹下为index.js、index.wxml、index.wxss三个小文件。小程序把js、css、html代码分离开来,放在独自的文件里,各司其职。js和样式表文件名必须与当前文件夹的wxml文件名保持一致,这样才能保证js和样式表的效果能够在页面中显现出来。我很欣赏这样的设计理念,整齐划一,职责明确,减轻代码设计复杂度。

index.wxml,这就是常见的模板文件,数据驱动,有过前端mvc、mvvm项目开发的对这个一定不会陌生,毕竟这是基于react开发的。

<!--index.wxml-->
<view class="container">//视图容器
<view bindtap="bindViewTap" class="userinfo">//bindtap为容器绑定点击触摸事件,在触摸离开时触发bindViewTap事件处理函数,bindViewTap通过index.js page()设置添加
<image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>//大双括号的变量来自于index.js的data对象解析成对应的值,而且是实时的
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
<view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>

index.js,与reaact用法几无二异,换汤不换药。page()来注册一个页面。接受一个 OBJECT 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

var app = getApp() // 获取入口文件app的应用实例
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//自定义事件处理函数,点击.userinfo的容易触发此函数
bindViewTap: function() {
wx.navigateTo({//全局对象wx的跳转页面方法
url: '../logs/logs'
})
},
onLoad: function () {//发生页面加载时,自动触发该生命周期函数
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据,页面自动渲染
that.setData({
userInfo:userInfo
})
})
}
})

index.wxss文件只渲染当前所属页面,会覆盖全局app.wxss同一样式。

  再分析下logs日志文件夹,logs文件夹下为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数组,遍历多少次,block块就会复制多少次,for-item等同于为<br>遍历元素起一个变量名,方便引用。<br>
<text class="log-item">{{index + 1}}. {{log}}</text>
</block>
</view>

logs.js 文件

//logs.js
var util = require('../../utils/util.js') //util.js相当于一个函数库,我们可以在这个文件内自定义扩展和封装一些常用的函数和方法
Page({
data: {
logs: []
},
onLoad: function () {
this.setData({
logs: (wx.getStorageSync('logs') || []).map(function (log) {//通过wx.getStorageSync获取本地缓存的logs日志数据
return util.formatTime(new Date(log))//日期格式化
})
})
}
})

logs.json文件

{
"navigationBarTitleText": "查看启动日志" //当前页面配置文件,设置window当前页面顶部导航栏标题等相关内容
}

基本页面结构和逻辑就这么简单,暴露给我们的没有一点令人费解的东西。

小程序还提供了很多官方组件和API等待我们深挖,加油吧,少年!小程序官方文档地址

Javascript 相关文章推荐
JavaScript的parseInt 取整使用
May 09 Javascript
JavaScript 5 新增 Array 方法实现介绍
Feb 06 Javascript
JSON+JavaScript处理JSON的简单例子
Mar 20 Javascript
jquery限定文本框只能输入数字即整数和小数
Nov 29 Javascript
wap手机图片滑动切换特效无css3元素js脚本编写
Jul 28 Javascript
javascript学习指南之回调问题
Apr 23 Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 Javascript
使用JS和canvas实现gif动图的停止和播放代码
Sep 01 Javascript
JavaScript设计模式之单例模式原理与用法实例分析
Jul 26 Javascript
Vue.js 中的 v-show 指令及用法详解
Nov 19 Javascript
JS为什么说async/await是generator的语法糖详解
Jul 11 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 Javascript
BootStrap 超链接变按钮的实现方法
Sep 25 #Javascript
原生JS实现网络彩票投注效果
Sep 25 #Javascript
JavaScript实现url参数转成json形式
Sep 25 #Javascript
动态JavaScript所造成一些你不知道的危害
Sep 25 #Javascript
jQuery中的AjaxSubmit使用讲解
Sep 25 #Javascript
需要牢记的JavaScript基础知识
Sep 25 #Javascript
分享一个原生的JavaScript拖动方法
Sep 25 #Javascript
You might like
php常见的魔术方法详解
2014/12/25 PHP
开启PHP的伪静态模式
2015/12/31 PHP
PHP邮箱验证示例教程
2016/06/01 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
基于php伪静态的实现方法解析
2020/07/31 PHP
javascript hashtable 修正版 下载
2010/12/30 Javascript
js获取当前日期时间及其它操作汇总
2015/04/17 Javascript
理解JS事件循环
2016/01/07 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
2016/12/08 Javascript
JS定时器用法分析【时钟与菜单中的应用】
2016/12/21 Javascript
基于js中style.width与offsetWidth的区别(详解)
2017/11/12 Javascript
vue框架搭建之axios使用教程
2018/07/11 Javascript
如何阻止小程序遮罩层下方图层滚动
2019/09/05 Javascript
vue实现顶部菜单栏
2020/11/08 Javascript
vue使用echarts图表自适应的几种解决方案
2020/12/04 Vue.js
[48:48]2014 DOTA2国际邀请赛中国区预选赛 SPD-GAMING VS Dream TIME
2014/05/21 DOTA
[37:23]DOTA2上海特级锦标赛主赛事日 - 3 胜者组第二轮#2Secret VS EG第二局
2016/03/04 DOTA
[04:48]DOTA2亚洲邀请赛林书豪为VGJ加油
2017/04/01 DOTA
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
wxPython学习之主框架实例
2014/09/28 Python
利用python批量修改word文件名的方法示例
2017/10/17 Python
tornado 多进程模式解析
2018/01/15 Python
python 重定向获取真实url的方法
2018/05/11 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
俄罗斯的精英皮具:Wittchen
2018/01/29 全球购物
法国票务网站:Ticketmaster法国
2018/07/09 全球购物
什么是View State?
2013/01/27 面试题
电子商务网站的创业计划书
2014/01/05 职场文书
四风问题自查报告剖析材料
2014/02/08 职场文书
党员岗位承诺书
2014/03/25 职场文书
法律意见书范本
2015/06/04 职场文书
青年联谊会致辞
2015/07/31 职场文书
html2 canvas svg不能识别的解决方案
2021/06/03 HTML / CSS
还在手动盖楼抽奖?教你用Python实现自动评论盖楼抽奖(一)
2021/06/07 Python
让JavaScript代码更加精简的方法技巧
2022/06/01 Javascript