微信开发小程序

本文详细介绍了微信小程序的开发,包括页面注册、setData函数、页面间通信、组件生命周期、事件处理、wxs模块的使用、列表渲染、尺寸单位rpx、条件渲染、背景图片设置、textarea事件、弹窗遮罩层、TabBar隐藏、轮播组件的使用以及app.json的注意事项等关键知识点。
摘要由CSDN通过智能技术生成

新建项目的注意点:

直接在app.json中写新页面的路径,然后新页面的文件就自动生成了。

1、注册页面
对于小程序中的每个页面,都需要在页面对应的js文件中进行注册,指定页面的初始数据、生命周期回调、事件处理函数等。
使用Page构造器注册页面
简单的页面可以使用Page()进行构造。

Page({
   
	data:{
   
		text:"This is page data."
	},
	onload:function(options){
   //页面创建时执行},
	onShow:function(){
   //页面出现在前台时执行},
	onReady:function(){
   //页面首次渲染完毕时执行},
	onHide:function(){
   //页面从前台变为后台时执行},
	onUnload:function(){
   //页面销毁时执行},
	onPullDownRefresh:function(){
   //触发下拉刷新时执行},
	onReachBottom:function(){
   //页面触底时执行},
	onShareAppMessage:function(){
   //页面被用户分享时执行},
	onPageScroll:function(){
   //页面滚动时执行},
	onResize:function(){
   //页面尺寸变化时执行},
})

page中还可以定义组件事件处理函数。在渲染层的组见证加入事件绑定,当事件被触发时,就会执行Page中定义的事件处理函数。
逻辑层 App Service
小程序开发框架的逻辑层使用javascript引擎为小程序提供开发者javascript代码的运行环境以及微信小程序的特有功能。
逻辑层将数据进行处理后最终将会打包成一份javascript文件,并在小程序启动的时候运行,直到小程序销毁。这一行为类似ServiceWorker,所以逻辑层也称之为App Service。
在javascript的基础上,我们增加了一些功能,以方便小程序的开发:
增加App和Page方法,进行程序注册和页面注册。
增加getApp和getcurrentpages方法,分别用来获取App实例和当前页面栈。
提供丰富的API,如微信用户数据,扫一扫,支付等微信特有能力。
提供模块化能力,每个页面有独立的作用域。

2、setData(data,callback)函数

setData函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的this.data的值(同步)。
data 必填项,是这次要改变的数据。
callback不是必填项,setData引起的界面更新渲染完毕后的回调函数。
直接修改this.data而不调用this.setData是无法改变页面的状态的,还会造成数据不一致。

3、Page.route

到当前页面的路径,类型为String

4、页面间通信

如果一个页面由另一个页面通过wx.navigateTo()打开,这两个页面间将建立一条数据通道:
被打开的页面可以通过this.getopenerEventchannel()方法来获得一个Eventchannel对象
wx.navigateTo的success回调中也包含一个Eventchannel对象
这两个Eventchannel对象间可以使用emit和on方法相互发送、监听事件。

5、组件的生命周期
组件的生命周期,指的是组件自身的一些函数,这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。

6、由e.currentTarget.dataset.type引起的对事件的理解
什么是事件

事件时视图层到逻辑层的通讯方式
事件可以将用户的行为反馈到逻辑层进行处理
事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数
事件对象可以携带额外信息,如id,dataset,touches.

事件的使用方式

在组件中绑定一个事件处理函数
如bindtap,当用户点击该组件的时候会在该页面对应的p

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值