1.什么是逻辑层
小程序开发框架的逻辑层使用 JavaScript 引擎为小程序提供开发者 JavaScript 代码的运行环境以及微信小程序的特有功能。
逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
开发者写的所有代码最终将会打包成一份 JavaScript 文件,并在小程序启动的时候运行,直到小程序销毁。这一行为类似 ServiceWorker,所以逻辑层也称之为 App Service。
在 JavaScript 的基础上,我们增加了一些功能,以方便小程序的开发:
`增加 App 和 Page 方法,进行程序注册和页面注册。
`增加 getApp 和 getCurrentPages 方法,分别用来获取 App 实例和当前页面栈。
`提供丰富的 API,如微信用户数据,扫一扫,支付等微信特有能力。
`提供模块化能力,每个页面有独立的作用域。
2.页面数据
1.页面数据的定义:
页面js文件page中第一个项为data属性,在data中定义本页面逻辑处理需要用到的数据,其中很大一部分数据将用于wxml文件的数据渲染。因为小程序js文件时基于JavaScript编写的,所以在js文件中可以定义字符串,数字,布尔值,对象和数组等类型的数据。
2.setDate()的使用:
wxml:
<viewstyle="font-size: 50rpx;margin: 50rpx 0 0 0;">{{lqj1}}</view><viewstyle="font-size: 50rpx;">{{lqj2}}</view><buttonstyle="background-color: aqua;"bindtap="changeDate2">点击我切换成模拟男友语气</button>
js:
data: { scrollTop: '', //滑动置顶lqj1:'你好!', lqj2:'小胖子' }, changeDate2:function(){ this.setData({ lqj1:'你好坏!我好喜欢你呀!', lqj2:'小胖宝儿~' }) },
效果展示:
3.onPullDownRefresh()监听用户下拉事件:
wxml:
<!-- 第二个知识点开始(onPullDownRefresh()监听用户下拉事件) --><textstyle="margin: 100rpx 0 0 0;font-size: 40rpx;">2.onPullDownRefresh()此函数(监听用户下拉动作,需要在app.json或本文件夹下的json文件中配置)配置代码如下:</text><textstyle="font-size: 40rpx;color: red;">"enablePullDownRefresh": true</text><textstyle="margin: 50rpx 25% 0 25%;color: rgb(255, 0, 191);">配置好请下拉整个页面(将会改变文字)</text><!-- 第二个知识点结束 -->
js:
onPullDownRefresh() { this.setData({ lqj1:'小胖,不许无理取闹!', lqj2:'再惹我,我把你填在我家户口本上' }) },
效果展示:
4.onReachBottom()监听用户上拉触底事件:
wxml:
<!-- 第三个知识点开始(onReachBottom()监听用户上拉触底事件) --><textstyle="margin: 100rpx 0 0 0;font-size: 40rpx;">3.onReachBottom()此函数(监听用户下拉动作,需要在app.json或本文件夹下的json文件中配置)配置代码如下:</text><textstyle="font-size: 40rpx;color: red;margin: 50rpx 0 0 0;">"onReachBottomDistance":50(上拉触底的单位,默认为px)</text><textstyle="margin: 50rpx 25% 0 25%;color: rgb(255, 0, 191);">配置好请上拉整个页面(将会改变文字)注意:\n1.如果页面显示已经在最下面时再上拉是无效的\n2.如果页面的高度小于显示页面的高度(显示的内容小于等于页面的高度,上拉时无效)</text><!-- 第三个知识点结束 -->
js:
onReachBottom() { this.setData({ lqj1:'小胖子!到底啦!', lqj2:'我已经1米9了,别再拉长我啦!' }) },
效果展示:
5.onPageScroll(lqj)此函数(监听用户滑动页面事件,显示效果见演示区下方导航栏):
wxml:
<!--第四个知识点开始(onPageScroll(lqj)监听用户滑动页面事件) --><!-- 悬浮导航 --><viewclass="{{scrollTop>100 ? 'fixedTab fixed' : 'fixedTab'}}"><!-- 上面运用三目运算实现一个class类的挑选 --><viewclass="fixedTabItem on">001班课代表</view><viewclass="fixedTabItem on">炒鸡帅!</view></view><!-- 悬浮导航 --><!--第四个知识点结束 -->
js:
data: { scrollTop: '', //滑动置顶 },onPageScroll(lqj) { leta=this; // console.log(t.scrollTop)a.setData({ scrollTop:lqj.scrollTop// scrollTop是微信小程序规定的唯一的onPageScroll()属性,并且要定义一个参数例:(lqj),用lqj.scrollTop来让scrollTop:识别! }) },
效果展示:(导航吸附状态)
6.onShareAppMessage(lqj1)用户点击分享事件:
wxml:
<buttondata-name="shareBtn"open-type="share"style="background-color: rgb(255, 115, 0);width: 400rpx;">转发</button>
js:
onShareAppMessage(lqj1) { if(lqj1.from=='button'){ console.log(lqj1.target) } return{ title:'小程序开发001班课代表超级大帅B!',//转发的标题(默认是小程序的标题,自定义)path:'../index/index.js'//转发的路径(转发到别人的微信,别人打开后的首页) } },
效果展示:
7.onResize(res)屏幕旋转事件
wxml:
<!-- 第六个知识点开始onResize(res)屏幕旋转事件 --><textstyle="margin: 100rpx 0 0 0;font-size: 40rpx;">6.onResize(res)屏幕旋转事件 具体代码如下:(对于这个api我要说腾讯**,这个api只支持ios系统)</text><textstyle="font-size: 40rpx;color: red;margin: 50rpx 0 0 0;">在json中配置:"pageOrientation": "auto"</text><textstyle="margin: 50rpx 25% 0 25%;color: rgb(255, 0, 191);"> 以下代码是判断页面内如果有转发button时,返回值里卖弄有title与path(下方有注释): js代码: onResize(res) { res.size.windowWidth // 新的显示区域宽度 res.size.windowHeight // 新的显示区域高度 } </text><!-- 第六个知识点结束 -->
js:
// ios系统手机旋转时程序跟着转onResize(res) { res.size.windowWidth// 新的显示区域宽度res.size.windowHeight// 新的显示区域高度 },
效果展示:
3.跳转页面+跳转传参
1.跳转(wx.navigateTo)无法跳转到tabbar(下面的one,two等带图标的页面)页面,返回时返回到上一个页面:
wxml:
<viewstyle="margin: 30rpx 25% 0 25%;background-color: darkorange;"bindtap="tiaozhuan1">点我跳转到跳转1页面</view>
js:
tiaozhuan1:function(){ wx.navigateTo({ url: '../tiaozhuan1/tiaozhuan1', }) },
效果展示:
2.跳转(wx.redirectTo)无法跳转到tabbar(下面的one,two等带图标的页面)页面,返回时无法返回上一个页面,直接返回到首页(one):
wxml:
<viewstyle="margin: 30rpx 25% 0 25%;background-color: darkorange;"bindtap="tiaozhuan2">点我跳转到跳转2页面</view>
js:
tiaozhuan2:function(){ wx.redirectTo({ url: '../tiaozhuan2/tiaozhuan2', }) },
效果展示:
3.跳转(wx.redirectTo)可以跳转到tabbar(下面的one,two等带图标的页面)页面,返回时无法返回上一个页面,直接返回到首页(one):
wxml:
<viewstyle="margin: 30rpx 25% 0 25%;background-color: darkorange;"bindtap="tiaozhuan3">点我跳转到跳转tabbar(one)页面</view>
js:
tiaozhuan3:function(){ wx.redirectTo({ url: '../index/index', }) },
效果展示:(只能在模拟器上显示该效果)
4.以(wx.navigateTo)为例,做跳转传参的演示:
跳转前的wxml:
<viewstyle="margin: 30rpx 25% 0 25%;background-color: darkorange;"bindtap="tiaozhuan4">点我跳转到跳转3页面并把“001班课代表最帅”传到页面1</view>
跳转前的js:
tiaozhuan4:function(){ wx.navigateTo({ url: '../tiaozhuan3/tiaozhuan3?id=001班课代表最帅', }) },
跳转后的wxml:
<viewstyle="font-size: 50rpx;margin: 0 20% 0 20%;">小胖子说:</view><viewstyle="font-size: 50rpx;margin: 0 20% 0 20%;color: deeppink;">{{tiaozhuan3Date}}!!!</view>
跳转后的js:
data: { tiaozhuan3Date:null }, /** * 生命周期函数--监听页面加载 */onLoad(options) { lettiaozhuan3Date=options.id; console.log(options); this.setData({ tiaozhuan3Date:tiaozhuan3Date }) },
效果展示:
4.现在来讲讲全局及局部变量
本页wxml:
<textstyle="font-size: 50rpx;margin: 50rpx 10% 0 10%;color: pink;">{{lqj}}</text>
本页js:
varapp=getApp() varlqj=app.quanjuDate.lqjpqge({ data: { lqj:lqj, }, })
app.js:
App({ quanjuDate:{ lqj:"你可能不是我见过最漂亮的女孩,但却是我心中最美丽的存在!" }, })
效果展示:
5.现在来讲讲代码模块化
1.首先我们创建一个外部公共js来供给所有的子js调用,和app.js类似,担忧不同!
我在这里创建了一个名为:gonggong.js的外部公共js文件
gongong.js:
functionsayHello(name){ console.log("我想你了,"+name+"!") } module.exports.sayHello=sayHello
three.wxml:
<buttonstyle="background-color: aqua;"bindtap="Helloxiaopang">点击我打印“我想你了,小胖”</button>
效果展示:
6.现在来讲讲页面自定义事件函数
1.bindtap=""绑定点击事件(这个很简单了哈,前面用的点击都是)
2.事件绑定和冒泡
举例说明两种绑定属性(bindtap,catchtap)
·bindtap为冒泡事件,所以点击子节点时父节点跟着执行(并且先执行)
·catchtap为阻止冒泡事件,所以点击子节点时父节点不会跟着执行
例子:
wxml:
<viewstyle="background-color: aqua;width: 500rpx;height: 500rpx;"bindtap="box1"> 外层选择器A <viewstyle="background-color: rgb(109, 209, 16);width: 300rpx;height: 300rpx;"catchtap="box2"> 中层选择器B <viewstyle="background-color: rgb(247, 152, 10);width: 150rpx;height: 150rpx;"catchtap="box3">内层选择器C</view></view></view>
js:
box1:function(){ wx.showToast({ title: '外层选择器A', }) }, box2:function(){ wx.showToast({ title: '中层选择器B', }) }, box3:function(){ wx.showToast({ title: '内层选择器C', }) },
效果展示:
3.事件对象
1.type:表示事件的类型(这个只能在手机预览时看得见区别,手机输入时type绑定的值不一样,手机弹出的输入器也是不同的):
text:(文本)
number:数字键盘(无小数点)
idcard:数字键盘(无小数点、有个 X 键)
digit:数字键盘(有小数点)
wxml:
<inputtype="number"style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput1'placeholder="请输入bumber型"/><inputtype="digit"style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput2'placeholder="请输入digit型"/><inputtype="idcard"style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput3'placeholder="请输入idcard型"/><inputtype="text"style="width: 660rpx;height: 70rpx;border: 2rpx gray solid;"bindblur='dianjiinput4'placeholder="请输text入型"/>
js:
dianjiinput1:function(e){ console.log(typeof(e.detail.value)) console.log(e) }, dianjiinput2:function(e){ console.log(typeof(e.detail.value)) }, dianjiinput3:function(e){ console.log(typeof(e.detail.value)) }, dianjiinput4:function(e){ console.log(typeof(e.detail.value)) },
效果展示:(type类型的不同点击input输入框时开启的输入器也不同)