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


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 监听textarea中按键事件
Oct 08 Javascript
Visual Studio中的jQuery智能提示设置方法
Mar 27 Javascript
Dom与浏览器兼容性说明
Oct 25 Javascript
jQuery获得IE版本不准确webbrowser的解决方法
Feb 23 Javascript
JavaScript使用concat连接数组的方法
Apr 06 Javascript
jQuery中的ready函数与window.onload谁先执行
Jun 21 Javascript
关于微信中a链接无法跳转问题
Aug 02 Javascript
Google 地图获取API Key详细教程
Aug 06 Javascript
Vue项目全局配置微信分享思路详解
May 04 Javascript
vue内置组件transition简单原理图文详解(小结)
Jul 12 Javascript
VUE中使用HTTP库Axios方法详解
Feb 05 Javascript
基于JavaScript实现随机点名器
Feb 25 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有效防止同一用户多次登录
2015/11/19 PHP
ThinkPHP发送邮件示例代码
2016/10/08 PHP
javascript 匿名函数的理解(透彻版)
2010/01/28 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
利用javascript实现禁用网页上所有文本框,下拉菜单,多行文本域
2013/12/14 Javascript
js的toLowerCase方法用法实例
2015/01/27 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
js简单实现表单中点击按钮动态增加输入框数量的方法
2015/08/18 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
基于jQuery实现Div窗口震动特效代码-代码简单
2015/08/28 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
2015/09/27 Javascript
解决jQuery上传插件Uploadify出现Http Error 302错误的方法
2015/12/18 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
2016/01/05 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
select隐藏选中值对应的id,显示其它id的简单实现方法
2016/08/25 Javascript
Nodejs实现文件上传的示例代码
2017/09/26 NodeJs
ES6解构赋值实例详解
2017/10/31 Javascript
vue实现简单loading进度条
2018/06/06 Javascript
浅谈Angular6的服务和依赖注入
2018/06/27 Javascript
深入浅析Vue 中 ref 的使用
2019/04/29 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
Python压缩和解压缩zip文件
2015/02/14 Python
Python中几个比较常见的名词解释
2015/07/04 Python
Python常见异常分类与处理方法
2017/06/04 Python
python中set()函数简介及实例解析
2018/01/09 Python
windows下安装Python虚拟环境virtualenvwrapper-win
2019/06/14 Python
opencv-python 提取sift特征并匹配的实例
2019/12/09 Python
keras .h5转移动端的.tflite文件实现方式
2020/05/25 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
css3实现input输入框颜色渐变发光效果代码
2014/04/02 HTML / CSS
美国和加拿大房车出售在线分类广告:RVT.com
2018/04/23 全球购物
Java中会存在内存泄漏吗,请简单描述
2016/12/22 面试题
安全教育实施方案
2014/03/02 职场文书
室内设计专业自荐信
2014/05/31 职场文书
工地安全标语
2014/06/07 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书