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


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 相关文章推荐
JMenuTab简单使用说明
Mar 13 Javascript
一些常用的JS功能函数代码
Jun 23 Javascript
有关JavaScript的10个怪癖和秘密分享
Aug 28 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
jquery放大镜效果超漂亮噢
Nov 15 Javascript
简单js代码实现selece二级联动(推荐)
Feb 18 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
Apr 23 Javascript
JS判断变量是否为空判断是否null
Jul 25 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
第一篇初识bootstrap
Jun 21 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
Jan 07 Javascript
基于Ionic3实现选项卡切换并重新加载echarts
Sep 24 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实现框架(二)
2006/10/09 PHP
如何写php程序?
2006/12/08 PHP
一个PHP的QRcode类与大家分享
2011/11/13 PHP
php保存任意网络图片到服务器的方法
2015/04/14 PHP
php获取文件类型和文件信息的方法
2015/07/10 PHP
Zend Framework基于Command命令行建立ZF项目的方法
2017/02/18 PHP
PHP之认识(二)关于Traits的用法详解
2019/04/11 PHP
php校验公钥是否可用的实例方法
2019/09/17 PHP
php设计模式之观察者模式定义与用法经典示例
2019/09/19 PHP
JavaScript中的作用域链和闭包
2012/06/30 Javascript
javascripit实现密码强度检测代码分享
2013/12/12 Javascript
jquery的ajax跨域请求原理和示例
2014/05/08 Javascript
JavaScript字符串对象fromCharCode方法入门实例(用于把Unicode值转换为字符串)
2014/10/17 Javascript
JavaScript实现把数字转换成中文
2015/06/29 Javascript
JS+CSS实现表格高亮的方法
2015/08/05 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
jQuery利用sort对DOM元素进行排序操作
2016/11/07 Javascript
js数字计算 误差问题的快速解决方法
2017/02/28 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
AngularJS 应用模块化的使用
2018/04/04 Javascript
JavaScript实现星级评价效果
2019/05/17 Javascript
如何使用vue slot创建一个模态框的实例代码
2020/05/24 Javascript
vue中全局路由守卫中替代this操作(this.$store/this.$vux)
2020/07/24 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
Python回调函数用法实例详解
2015/07/02 Python
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
python 地图经纬度转换、纠偏的实例代码
2018/08/06 Python
Python:type、object、class与内置类型实例
2019/12/25 Python
CSS3动画之流彩文字效果+图片模糊效果+边框伸展效果实现代码合集
2017/08/18 HTML / CSS
会计电算化应届生求职信
2013/11/03 职场文书
人力资源总监工作说明
2014/03/03 职场文书
《三个小伙伴》教学反思
2014/04/11 职场文书
学生旷课检讨书500字
2014/10/28 职场文书
课外活动总结
2015/02/04 职场文书
Python基础之字符串格式化详解
2021/04/21 Python
如何利用python实现Simhash算法
2022/06/28 Python