微信米乐体育APP官网小程序开发

　　微信小程序组成结构包含两层，逻辑层和视图层。逻辑层是由javascript编写而成，视图层是由WXML和WXSS组合构成。还有flex模型，flex布局可以确保页面需要适应不同屏幕尺寸及设备类型时元素在恰当的位置。本文主要内容是以上几点。

　　小程序开发框架逻辑层又称App Service，所有的逻辑交互都是由JavaScript编程语言实现。逻辑层的作用是处理业务数据之后，发送给视图层进行渲染和接收视图层所产生事件的反馈。

　　1. 注册程序小程序通过使用App(OBJECT)方法进行注册，用于指定小程序的生命周期函数。 需要注意的是，App()只能写在小程序根目录的app.js文件中，有且只能注册一个。App()中的函数均可为可选函数，比如，onLaunch()、onShow（）、onError等函数。在实际开发过程中根据需要可以自行删除部分函数，或者保留函数不具体编写内容。

　　小程序后台是指小程序没有在手机当前画面显示，但是并没有被消毁。比如，当用户点击左上角的按钮关闭小程序时，会进入后台运行状态。小程序前台是指小程序在手机当前画面正在被使用。比如，进入小程序所前呈现给用户的状态，或打开处于后台运行状态时重新进入前的台运行状态。

　　小程序每个页面JS文件中通过使用Page(OBJECT)方法进行页面注册，该方法可以用于指定小程序页面的生命周期函数。Page()只能写在小程序根每个页面对应的JS文件中，每个页面有且只能注册一个。Page()和App()的函数类似，可以根据实际情况删除或保留该函数不具体编写内容。Page()支持自定义页面变量，包括变量名称、取值和数量。

　　Page()默认生成的第一项就是data属性，该属性是页面第一次渲染使用的初始数据。data会以JSON字符串的形式由逻辑层传至渲染层，所以data中的数据必须是可以转成JSON的类型。

　　2.2.生命周期回调函数Page()中默认生成的onLoad()、onShow()、onReady()、onHide()、onUnload()均属于页面生命周期回调函数。onLoad()页面加载时触发一次，可以在onLoad()参数中获取打开当前页面路径附带参数。onShow() 当页面显示或从小程序后台切入前台时触发。onReady()当页面初次渲染完成时触发，一个页面只会调用一次，页面已经准备妥当，可以和视图层进行交互。onHide() 当页面隐藏/切入后台时触发。比如，navigateTo或底部tab切换到其他页面，小程序会切入后台等。

　　Page()中可以定义组件事件处理函数，在WXML页面的组件上添加事件绑定，当事件被触发时就会主动执行Page()中对应的事件处理函数。

　　视图层主要负责页面结构的呈现，WXML页面、WXSS样式和组件都是视图层的内容。

　　小程序在组件上使用wx:for属性实现列表渲染，即同一个组件批量出现多次，内容可以不同。嵌套列表：wx:for可以多层次嵌套，比如，二维数组数据渲染。多节点列表：用户可以将wx:for用在block标签上，以渲染一个包含多节点的结构块。条件渲染简单条件：使用wx:if={{condition}} 判断是否需要渲染该代码块。

　　如果一次性判断多个组件标签，可以使用block标签将多个组件包装起来，并在block上使用wx:if控制属性。

　　小程序框架允许在WXML文件中提供模板(template)，模板可以用于定义代码片段，然后在不同页面被重复调用。

　　事件是视图层到逻辑层的通信方式，有以下特点：可以将用户的行为反溃到逻辑层进行处理；可以绑定在组件上，当触发事件时就会执行逻辑层中对应的事件处理函数；对像可以携带额外信息。

　　事件分为 冒泡事件和非冒泡事件，说明如下。冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

　　WXSS （WeiXin Style Sheets）微信样式表，这是一种样式语言，用于描述WXML的组件样式。样式分为全局样式与局部样式，根据在app.wxss中样式为全局样式；在页面WXSS文件中定义的样式为局部样式。

　　小程序规定了全新的尺寸单位rpx(responsove pixel)，可以根据屏幕宽度进行自适应。其原理是无视设备原先的尺寸，统一规定屏幕宽度为750rpx。

　　小程序在WXSS样式表中使用@import语句导入外联样式表，@import后跟需要导入的外联样式的相对路径。

　　小程序使用fiex模型提高页面布局的效率。这是一种灵活的布局模型，当页面需要适应不同屏幕尺寸及设备类型时该模型可以确保元素在恰当的位置。