提供微商城·微分销·小程序开店需求
5分钟开通你的微信商城店铺！微信小程序使用的框架：逻辑层和视图层
2017-12-05 作者：黄保
微信小程序使用的框架已经是当下最热门的话题，下面将从多方面来谈谈微信小程序使用的框架相关的内容。
小程序的逻辑层由js完成，视图层由微信提供的WXML(WeiXin Mark Language)和WXSS(WeiXin Style Sheet)文件来完成。
其中官方给出的解释：页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件。同时由于zepto/jQuery 会使用到window对象和document对象，所以在小程序中均无法使用。
逻辑层
逻辑层将数据进行处理后发送给视图层，同时接受视图层的事件反馈。 在 JavaScript 的基础上，微信增加和修改了以下特性：
-
增加 App 和 Page 方法，进行程序和页面的注册。
-
增加 getApp 和 getCurrentPages 方法，分别用来获取 App 实例和当前页面栈。
-
提供丰富的 API，如微信用户数据，扫一扫，支付等微信特有能力。
-
每个页面有独立的作用域，并提供模块化能力。
-
由于框架并非运行在浏览器中，所以 JavaScript 在 web 中一些能力都无法使用，如 document，window 等。
-
开发者写的所有代码最终将会打包成一份 JavaScript，并在小程序启动的时候运行，直到小程序销毁。类似 ServiceWorker，所以逻辑层也称之为 App Service。
注册程序
quikstart示例中App.js文件内容如下：
//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()函数
App() 函数用来注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。
其中onLaunch为系统的生命周期函数，getUserInfo和globalData分别为用户自定义函数和数据结构对象。
App() 函数的object参数说明：
属性
类型
描述
触发时机
onLaunchFunction生命周期函数–监听小程序初始化当小程序初始化完成时，会触发 onLaunch(全局只触发一次)
onShowFunction生命周期函数–监听小程序显示当小程序启动，或从后台进入前台显示，会触发 onShow
onHideFunction生命周期函数–监听小程序隐藏当小程序从前台进入后台，会触发 onHide
其他Any开发者可以添加任意的函数或数据到 Object 参数中，用 this 可以访问
getApp()函数
我们提供了全局的 getApp() 函数，可以获取到小程序实例。
示例代码：
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data
注册页面
index页面中index.js代码如下：
//index.js
//获取应用实例
var app = getApp()
Page({
data: {
motto: 'Hello World',
userInfo: {}
},
//事件处理函数
bindViewTap: function() {
wx.navigateTo({
url: '../logs/logs'
})
},
onLoad: function () {
console.log('onLoad')
var that = this
//调用应用实例的方法获取全局数据
app.getUserInfo(function(userInfo){
//更新数据
that.setData({
userInfo:userInfo
})
})
}
})
Page()函数
Page() 函数用来注册一个页面。接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
object 参数说明：
属性
类型
描述
dataObject页面的初始数据
onLoadFunction生命周期函数–监听页面加载
onReadyFunction生命周期函数–监听页面初次渲染完成
onShowFunction生命周期函数–监听页面显示
onHideFunction生命周期函数–监听页面隐藏
onUnloadFunction生命周期函数–监听页面卸载
onPullDownRefreshFunction页面相关事件处理函数–监听用户下拉动作
onReachBottomFunction页面上拉触底事件的处理函数
其他Any开发者可以添加任意的函数或数据到 object 参数中，在页面的函数
Page还提供了setData() 和getCurrentPages()函数。
setData()函数：
setData 函数用于将数据从逻辑层发送到视图层，同时改变对应的 this.data 的值。
注意：
-
直接修改 this.data 无效，无法改变页面的状态，还会造成数据不一致。
-
单次设置的数据不能超过1024kB，请尽量避免一次设置过多的数据。
getCurrentPages()函数：
getCurrentPages() 函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
注意：不要尝试修改页面栈，会导致路由以及页面状态错误。
API
微信提供了诸多JavaScript形式的微信原生 API，可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等。
API将在专门的章节介绍。
视图层WXML
WXML(WeiXin Markup Language)是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。
用以下一些简单的例子来看看 WXML 具有什么能力：
数据绑定
<!--wxml-->
<view> {{message}} </view>
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
列表渲染
<!--wxml-->
<view wx:for="{{array}}"> {{item}} </view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
条件渲染
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
<view wx:elif="{{view == 'APP'}}"> APP </view>
<view wx:else="{{view == 'MINA'}}"> MINA </view>
// page.js
Page({
data: {
view: 'MINA'
}
})
模板
<!--wxml-->
<template name="staffName">
<view>
FirstName: {{firstName}}, LastName: {{lastName}}
</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
data: {
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
}
})
事件
<view bindtap="add"> {{count}} </view>
Page({
data: {
count: 1
},
add: function(e) {
this.setData({
count: this.data.count + 1
})
}
})
-
微信小程序商城系统开发其实很简单
微信小程序商城系统开发其实很简单，只需要五步就可以完成，整个过程包括开发、上线、发布都可以轻松搞定...详情
推荐文章
-
微信小程序滚动字幕及弹幕的实现技巧
微信小程序滚动字幕已经是当下微信小程序开发最热门的话题，下面将从多方面来谈谈微信小程序滚动字幕及弹幕的实现技巧...
-
微信小程序开发教程之Array数组对象(1)
2017年6月14日，微信小程序开发教程已经是当下最热门的话题，下面将从多方面来谈谈Array数组对象相关的内容。...
-
拼多多天天拆红包是真的吗,拼多多天天拆红包的
最近在微信社群都可以看到拼多多的拆红包的界面，这又是一款拼多多的裂变营销方式，很多朋友对此表示很怀疑，到底是不...
-
微信如何用小程序定位好友,微信小程序定位朋友
Hishop最新消息，有这样一个小程序可以无需询问，就知道朋友的位置了，那么是如何定位分享位置的呢。...
-
目前最好的收银系统是哪个品牌?
目前最好最受欢迎的收银系统品牌有HiShop友数、商米等，每个品牌都有各自的特点和主要发展的行业，下面小编就为大家来介...
-
餐饮收银系统前十排名有哪些?
餐饮行业是国内规模万亿级别的市场，如今市面上的餐饮品牌门店数不胜数，在如今这个互联网时代，许许多多餐饮门店都开...
-
连锁超市收银系统哪个好用实现会员一体化
连锁超市在选择收银系统的时候，首先会考虑到收银系统的操作便捷，能够给收银员的工作提升效率的同时，避免出现错误，...
-
超市收银系统百科-超市收银系统的核心功能
超市收银系统百科 超市收银系统是零售业中用于处理销售交易的关键技术，它不仅提高了结账效率，还增强了顾客的购物体...
-
酒吧收银系统百科-酒吧收银系统软件排名
酒吧收银系统百科 1. 酒吧收银系统概述 酒吧收银系统是专为酒吧、夜店等娱乐场所设计的一套集成化管理软件，它能够实现...
-
2024年生鲜超市收银系统十大排名榜（哪个好用？
生鲜超市收银系统十大品牌有哪些呢?下面小编就为大家来讲解一下各收银系统的特...
长沙总部热线
4006-089-731
北京公司
4006-601-982
深圳公司
4008-400-198
一对一咨询
