微信小程序逻辑判断有什么意义
编辑:小飞燕 发布时间:2021-04-16 10:48:56
微信小程序逻辑判断的意义是什么?到目前为止,很多小程序开发者都问过这个问题,所以小编会在微信小程序商城解决这个问题。
看了微信小程序的前端代码,真的让我热血沸腾。代码的逻辑和设计一目了然,没有多余的东西。真的是一条简单的路。
废话不多说,直接分析前端代码。个人观点,难免有疏漏,仅供参考。
基本文件结构:
看门户app.js,app(obj),注册微信小程序。接受一个对象参数,指定小程序的生命周期函数等。其他文件可以通过全局方法getapp获取app实例,然后直接调用其属性或方法,如(getapp.globaldata)
//app.js
app({
onlaunch:函数{
//调用api从本地缓存获取数据
var logs=wx . getstorageync(' logs ')| |[]
logs.unshift(date.now)
wx . setstoragesync(' log ',log)
},
getuserinfo:function(cb){
变量=这个
if(this.globaldata.userinfo){
type of cb==' function ' cb(this . global data . user info)
}else{
//小程序调用接口
wx.login({
成功:功能{
wx.getuserinfo({
成功:功能(res) {
that . global data . user info=res . user info
type of cb==' function ' cb(that . global data . user info)
}
})
}
})
}
},
globaldata:{
userinfo:null
}
})
我理解app.js是条目初始化文件,也是提供全局api扩展的地方。下面的分析带有几个方法和属性
一旦小程序初始化,onlunk钩子函数就会自动执行,如果你在小程序生命周期中没有主动调用onlunk,它就不会被执行。
varlogs=wx . getstoragesync(' logs ')| |[]获取本地缓存中的logs属性。如果该值为空,则设置log=[]类似于html5中的localstorage。当前登录时间被添加到数组中。wx . setstoragesync(' log ',logs)将数据存储在本地缓存中。因为wx是一个全局对象,所以可以在其他文件中直接调用wx . getstoragesync(' log ')来获取本地缓存数据。
getuserinfo函数顾名思义就是获取登录用户信息,相当于这个函数提供了一个获取用户信息的接口,其他页面不调用就不执行。其他页面通过getapp . getuser info(function(user info){ console . log(user info);})以这种方式调用这个方法获取用户信息。
getuser info : function(cb){//参数为cb,类型为function
变量=这个
如果(这个。global data . user info){//用户信息不为空
cb==' function' cb的类型(这个。数据。user info)//如果参数cb的类型是函数,则执行cb获取用户信息;
}else{//如果用户信息为空,也就是说第一次调用getuserinfo会调用用户登录界面。
wx.login({
成功:功能{
wx.getuserinfo({
成功:功能(res) {
console.log(res)
用户信息=res.userinfo//assign将用户信息发送到全局数据。如果再次调用getuserinfo函数,则不需要调用登录界面。
cb的类型==' function ' cb(that . global data . user info)//如果参数cb类型是函数,执行cb获取用户信息
}
})
}
})
}
}
globaldata对象用于存储全局数据,并在其他地方调用
然后简单分析一下app.json文件,用来全局配置微信小程序,确定页面文件路径,窗口展现,设置网络超时,设置多个标签等。
比较重要的是pages属性,这是必需的,是一个数组。数组中的元素是字符串文件路径,指定小程序由哪些页面组成。第一项必须是小程序的初始页面。
{
第' :页[
页面/索引/索引','页面/日志/日志'
],
window':{
背景textstyle':'light ',navigation barbakgroundcolor ' : ' # fff ',navigationbartitletext': '微信',navigationbartextstyle ' : '黑色'
}
}
然后查看项目索引和日志文件夹。微信小程序的初始项目中,每个页面相关的js、wxss、wxml都放在自己的文件中,这样结构看起来就清晰多了。
让我们看看索引文件夹,它是小程序的初始页面。在索引文件夹下,有三个小文件:index.js、index.wxml和index.wxss小程序将js、css和html代码分开,放在它们自己的文件中。js和样式表的文件名必须与当前文件夹的wxml文件名一致,以保证js和样式表的效果能够在页面上显示。我很欣赏这种设计理念,统一,职责明确,降低了代码设计的复杂度。
index.wxml,这是一个常用的模板文件,是数据驱动的。那些开发过前端mvc和mvvm项目的人会对此很熟悉。毕竟这是建立在反应上的。
//查看容器
//bindtap为容器绑定click和touch事件,当touch离开时触发bindviewtap事件处理函数,通过设置index.jspage添加bindviewtap
//花括号中的变量来自index.js的数据对象,实时解析为对应的值
{{userinfo.nickname}}
{ {座右铭}}
index.js的用法和reaact差不多。注册页面。接受一个对象参数,它指定了初始数据、生命周期函数、事件处理函数等。页面的。
var app=getapp //获取门户文件应用的应用实例
页面({
数据: {
motto: 'hello world ',userinfo: {}
},
//自定义事件处理功能。。userinfo轻松触发此功能
bindviewtap:函数{
wx.navigateto({//全局对象wx的跳转页方法)
url: './log/log '
})
},
onload:函数{//加载页面时自动触发此生命周期函数。
console.log('onload ')
变量=这个
//调用应用实例的方法获取全局数据
app . getuser info(function(user info){
//更新数据,渲染小程序页面
that.setdata({
userinfo:userinfo
})
})
}
})
文件index.wxss只呈现当前页面,覆盖全局app.wxss的相同样式
然后分析logs log文件夹,里面包含logs.wxml、logs.js、logs.wxss、logs.json,保证渲染效果同名。
logs.wxml文件
//块容器函数,没有其他实际意义。wx:for函数:遍历logs数组,遍历多少次就复制多少次。for-item相当于
遍历元素给出变量名,方便参考。
{ {索引1}}。{{log}}
logs.js文件
//log . js
varutil=require('././utils/util.js')//util.js相当于一个函数库。我们可以在这个文件中定制、扩展和封装一些常用的函数和方法
页面({
数据: {
logs: []
},
onload:函数{
this.setdata({
logs :(wx . getstoragesync(' logs ')| |[])。map(function(log){//通过wx.getstoragesync获取本地缓存的日志数据
returnutil.formattime(新日期(日志))//日期格式
})
})
}
})
logs.json文件
一个
2
3{
navigationbartitletext': '查看启动日志'/当前页面配置文件,在当前页面窗口顶部设置导航栏标题,以及其他相关内容
}
基本的页面结构和逻辑就这么简单,没有什么莫名其妙的东西暴露在我们面前。
由此可见,使用微信小程序的逻辑判断是的。对于小程序开发来说,每一个环节都不允许出错,小程序逻辑判断的作用就在这里。
下面是题目的开头。小程序打开了更多的页面功能,允许开发人员更好地使用体验。标题到此结束
根据微信微信账号的公告,小程序开辟了更多的页面内功能,其主要功能包括改善界面体验、丰富内容显示组件、提高系统硬件能力。具体微信小程序功能如下:
1.改善界面的用户体验
小程序可以灵活调整顶部标题栏的颜色,使颜色与自己的页面保持一致。
小程序可以得到页面布局,知道用户的屏幕滑动和使用页面滚动界面。比如你看到一半的文章,开发者可以定位并记住浏览位置。用户下次打开小程序时,立即滚动到未读的地方,方便用户继续阅读。
地图、视频和画布现在可以显示简单的图片和文本,以帮助用户更好地利用这些功能。
2.丰富内容显示组件
丰富的文本,如一篇布局精美的文章,可以很容易地在小程序中显示。
微信群聊用的小程序,可以在自己的页面上显示群名。
3.提高系统硬件能力
必要时小程序可以保持用户手机屏幕亮着,不用操作手机也不用担心锁屏。
截图事件通知。当用户在小程序截图中保存敏感信息时,小程序开发者可以提醒用户注意隐私和安全。
以上是小程序打开更多页面的能力,让开发者可以更好的使用体验的内容,希望
www.wechat.com上的内容对大家都有帮助,源代理网的小程序频道上有更多的微信小程序。
这是第一段的结尾。结束了。添加一个小程序来打开更多的页面内功能,这样开发人员可以更好地使用体验。目前已经获得了678网友的青睐!正文到此结束
上一篇:微信小程序分割字符串操作教程
猜你喜欢
-
2个微信小程序逻辑判断技巧649人喜欢
微信小程序逻辑判断的开发需要准确的教程和相应的小程序码,接下来小编会为大家详细讲解一下微信小程序逻辑判断和整理要怎么操作,一起来看看吧。微信两个小程序api所拿到的信息:login和getuserinfo注册小程序登录小程序端:通过上面wx.login和wx.getuserinfo两…
更新时间:2020-09-25 10:20:38
-
微信小程序逻辑层怎么开发和使用84人喜欢
微信小程序的逻辑层是小程序开发过程中必不可少的一部分,但是很多人还是不知道如何开发和使用逻辑层,下面给大家解释一下。通过上面两个api wx . log in和wx.getuserinfo获取相应的信息,通…
更新时间:2021-04-16 10:50:05
-
微信小程序逻辑判断和整理52人喜欢
微信小程序逻辑判断的开发需要精准的教程和对应的小程序代码。接下来,小编将详细讲解如何操作微信小程序的逻辑判断和整理。我们来看看。微信的两个小程序api得到的信息是:login和getuserinfo注…
更新时间:2021-04-16 10:43:45
-
微信小程序逻辑判断有什么意义10人喜欢
微信小程序逻辑判断的意义是什么?到目前为止,很多小程序开发者都问过这个问题,所以小编会在微信小程序商城解决这个问题。看了微信小程序的前端代码,真的让我热血沸腾。代码的逻辑和设计一目…
更新时间:2021-04-16 10:48:56