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


Posted in Javascript onOctober 08, 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当前页面顶部导航栏标题等相关内容
}

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

 感谢阅读,希望能帮助到大家,谢谢大家对本站的支持!

Javascript 相关文章推荐
jquery datatable后台封装数据示例代码
Aug 07 Javascript
2014年50个程序员最适用的免费JQuery插件
Dec 15 Javascript
直接拿来用的页面跳转进度条JS实现
Jan 06 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
js实现音乐播放控制条
Sep 09 Javascript
js原生日历的实例(推荐)
Oct 31 Javascript
arcgis for js栅格图层叠加(Raster Layer)问题
Nov 22 Javascript
浅析vue深复制
Jan 29 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
js数组中去除重复值的几种方法
Aug 03 Javascript
在antd中setFieldsValue和defaultVal的用法
Oct 29 Javascript
jQuery treeview树形结构应用
Mar 24 jQuery
AngularJS 2.0入门权威指南
Oct 08 #Javascript
省市区三级联动jquery实现代码
Apr 15 #Javascript
微信小程序 数据访问实例详解
Oct 08 #Javascript
Bootstrap Table的使用总结
Oct 08 #Javascript
js HTML5手机刮刮乐代码
Sep 29 #Javascript
原生js的RSA和AES加密解密算法
Oct 08 #Javascript
ReactNative-JS 调用原生方法实例代码
Oct 08 #Javascript
You might like
php缓存技术介绍
2006/11/25 PHP
关于PHP内存溢出问题的解决方法
2013/06/25 PHP
基于PHP创建Cookie数组的详解
2013/07/03 PHP
PHP 如何获取二维数组中某个key的集合
2014/06/03 PHP
深入分析PHP优化及注意事项
2016/07/04 PHP
对YUI扩展的Gird组件 Part-2
2007/03/10 Javascript
javascript各种复制代码收集
2008/09/20 Javascript
javascript中验证大写字母、数字和中文
2014/01/15 Javascript
jQuery中addClass()方法用法实例
2015/01/05 Javascript
jQuery prototype冲突的2种解决方法(附demo示例下载)
2016/01/21 Javascript
javascript实现移动端上的触屏拖拽功能
2016/03/04 Javascript
javascript作用域、作用域链(菜鸟必看)
2016/06/16 Javascript
仿百度换肤功能的简单实例代码
2016/07/11 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
详解Vue路由History mode模式中页面无法渲染的原因及解决
2017/09/28 Javascript
AngularJs点击状态值改变背景色的实例
2017/12/18 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
vue基础之使用get、post、jsonp实现交互功能示例
2019/03/12 Javascript
JavaScript数组常用的增删改查与其他属性详解
2020/10/13 Javascript
教你安装python Django(图文)
2013/11/04 Python
python 读取目录下csv文件并绘制曲线v111的方法
2018/07/06 Python
PyTorch的SoftMax交叉熵损失和梯度用法
2020/01/15 Python
基于Python测试程序是否有错误
2020/05/16 Python
使用CSS3的::selection改变选中文本颜色的方法
2015/09/29 HTML / CSS
一加手机美国官方网站:OnePlus美国
2019/09/19 全球购物
联想C++笔试题
2012/06/13 面试题
可口可乐广告词
2014/03/20 职场文书
党支部公开承诺践诺书
2014/03/28 职场文书
教师新年寄语
2014/04/03 职场文书
幼儿教师个人总结
2015/02/05 职场文书
个人求职意向书
2015/05/11 职场文书
网络妈妈观后感
2015/06/08 职场文书
培训心得体会怎么写
2016/01/25 职场文书
彻底理解golang中什么是nil
2021/04/29 Golang
python 提取html文本的方法
2021/05/20 Python
Python - 10行代码集2000张美女图
2021/05/23 Python