微信小程序开发基础(下)

1、数据层

数据层在逻辑上包括页面临时数据或缓存、文件储存(本地储存)和网络存储与调用。

1.1、页面临时数据或缓存

        在Page()中。使用setData函数将数据从逻辑层发送到视图层,同事改变对应的this.data的值。

        setData()函数的参数接收一个对象,以(key,value)的形式表示将key在this.data中对应的值改变成value。

1.2、文件存储(本地存储)

        使用数据API接口,如下:

        wx.getStorage  获取本地数据缓存

        wx.setStorage  设置本地数据缓存

        wx.clearStorage  清理本地数据缓存

1.3、网络存储与调用

        上传或下载文件API接口,如下:

        wx.request  发起网络请求

        wx.uploadFile  下载文件

        wx.downloadFile  下载文件

        调用URL的API接口,如下:

        wx.navigateTo  新窗口打开页面

        wx.redirectTo  原窗口打开页面

2、逻辑层文件

2.1、项目逻辑文件

        项目逻辑文件 app.js中可以通过App()函数注册小程序生命周期函数、全局属性和全局方法,已注册的小程序实例可以在其他页面逻辑层文件中通过getApp()获取。

        App()函数用于注册一个小程序,参数为Object,用于指定小程序的生命周期函数,用户自定义属性和方法,其参数如下:

2.2、页面逻辑文件

        页面逻辑文件的主要功能有:设置初始数据;定义当前页面的生命周期函数;定义事件处理函数等。每个页面都有一个相应的逻辑文件,逻辑文件试运行在纯JavaScript引擎中。因此,在逻辑文件中不能使用浏览器提供的特有对象(document、window)及通过操作DOM改变页面,只能采用数据绑定和时间响应来实现。

        在逻辑层中,Page()方法用来注册一个页面,并且每个页面有且仅有一个,其参数如下:

3、页面结构文件

        页面结构文件(WXML)是框架设计的一套类似HTML语言,在小程序中,类似HTML的标签被称为组件,是页面结构文件的基本组成单元。这些组件有开始(如<view>)和结束(如</view>)标志,每个组件可以设置不同的属性(如id、class等),组件还可以嵌套。

        WXML还具有数据绑定、条件数据绑定、列表数据绑定、模板、引用页面文件、页面事件等能力。

3.1、数据绑定

        小程序的数据绑定使用Mustache语法({{}})将变量或运算规则包起来。

3.2、条件数据绑定

        条件数据绑定就是根据绑定表达式的逻辑值来判断是否数据绑定当前组件。

3.3、列表数据绑定

        列表数据绑定用于将列表中的各项数据进行重复数据绑定。

3.4、模板

        在小程序中,如果要经常使用几个组件的组合(如“登录”选项),通常把这几个组件结合定义为一个模板,以后在需要的文件中直接使用这个模板。

3.5、引用页面文件

        在WXML文件中,不仅可以引用模板文件,还可以引用普通的页面文件。WXML提供了两种方式来引用其他页面文件。

3.6、页面事件

        简单来说,小程序中的事件是用户的一种行为或通信方式。

4、页面样式文件

页面样式文件(WXSS)是基于CSS拓展的样式语言,用于描述WXML的组成样式,决定WXML的组件如何显示。WXSS具有CSS的大部分特性,小程序对WXSS做了一些扩充和修改。

        如下是常见的WXSS属性

到此本章就结束了。拜拜!

  • 6
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值