2.1小程序的基本目录结构
pages 页面文件夹
utils 工具包文件夹
2.1.1 主体文件
微信小程序的主体部分由3个文件组成,该三个文件必须放在项目的主目录中,负责小程序的整体配置,名称是固定的。
app.js 小程序逻辑文件,主要用来注册小程序全局实例,该文件在项目中不可缺少
app.json 小程序公共设置文件,配置小程序全局设置,该文件在项目中不可缺少
app.wxss 小程序主样式文件
2.1.2 页面文件
小程序通常由多个页面组成每个页面包含4个文件,同一页面的4个文件必须有相同的路径和文件名。
.js文件: 页面逻辑文件,在该文件中编写JavaScript代码控制页面的逻辑
.wxml文件: 页面结构文件,用于设计页面布局,数据绑定等,类似HTML页面中的.html文件
.wxss文件: 页面样式表文件,用于定义本业面中用到各类样式表
.json文件: 页面配置文件
2.2小程序的开发框架
小程序MINA框架示意图:
小程序MINA框架将整个系统划分为视图层和逻辑层。
MINA 框架为页面组件提供了bindtap、bindtouchstart等与事件监听相关的属性,并与逻辑层中的事件处理函数绑定在一起,实现面向逻辑层与用户同步交互数据。
2.2.1 视图层
MINA框架的视图层由WXML与WXSS编写,由组件来进行展示。视图层就是所有.wxml文件与,wxss文件的集合:.wxml文件用于描述页面的结构;.wxss 文件用于描述页面的样式。
2.2.2 逻辑层
逻辑层用于处理事务逻辑。逻辑层就是所有.js脚本文件的集合。微信小程序在逻辑层将数据进行处理后发送给视图层,同时接受视图层的事件反馈。
微信小程序开发框架的逻辑层采用JavaScript编写
2.2.3 数据层
1.页面临时数据或缓存
在Page()中,使用setData函数将数据从逻辑层发送到视图层,同时改变对应的this. data的值。
setData()函数的参数接收一一个对象, 以(key ,value)的形式表示将key在this. data中对应的值改变成value。
2.文件存储(本地存储)
使用数据API接口,如下:
wx. getStorage获取本地数据缓存。
wx. setStorage设置本地数据缓存。
wx. clearStorage清理本地数据缓存。
3.网络存储与调用
上传或下载文件API接口,如下:
wx. request发起网络请求。
wx. uploadFile上传文件。
wx. downloadFile下载文件。
调用URL的API接口,如下:
wx. navigateTo新窗口打开页面。
wx. rediretTo原窗口打开页面。
2.3创建小程序页面
在pages目录下新建一个index目录,并在index目录下新建news.js,news.json,news.wxml,news.wxss空文件
2.4配置文件
全局配置项
1. pages配置项
pages配置项接受一个数组,用来指定小程序由哪些页面组成,数组的每一项都是字符串,代表对应页面的“路径”+“文件名”。pages 配置项是必填项。
设置pages 配置项时,应注意以下3点:
(1)数组的第一项用于设定小程序的初始页面。
(2)在小程序中新增或减少页面时,都需要对数组进行修改。
件有相
(3)文件名不需要写文件扩展名。小程序框架会自动寻找路径及对.js、.json、.wxml和.wxss文件进行整合数据绑定。
2.window配置项
window配置项及其描述
3.tabBar配置项
tabBar配置项及其描述
tabBar中list选项
4.networkTimeout配置项
networkTimeout配置项
5.debug
debug配置项用于开启开发者工具的调试模式,默认为FALSE。
2.4.2页面配置文件
页面配置文件(*.json)只能设置本页面的窗口表现,而且只能设置window配置项的内容。
2.5逻辑层文件
2.5.1项目逻辑文件
2.5.2 页面逻辑文件
1.设置初始数据
设置初始数据是对页面的第一次数据绑定
2.定义当前页面的生命周期函数
在Page()函数的参数中,可以定义当前页面的生命周期函数。页面的生命周期函数主要有onLoad、onShow、onReady、onHide、onUnload。
onLoad页面加载函数。当页面加载完成后调用该函数。一个页面只会调用一次。
示效果 该函数的参数可以获取wx.navigateTo和wx. redirectTo 及<navigator/>中的 query。
onShow 页面显示函数。当页面显示时调用该函数。每次打开页面都会调用一次。 onReady 页面数据绑定函数。当页面初次数据绑定完成时调用该函数。一个页面只会调用一次,代表页面已经准备就绪,可以和视图层进行交互。
onHide 页面隐藏函数。当页面隐藏时及当navigateTo或小程序底部进行tab切换时调用该函数。
onUnload 页面卸载函数。当页面卸载、进行navigateBack或redirectTo操作时,调用该函数。
2.6页面结构文件
1.数据绑定
简单绑定:使用大括号({{{}}})将变量包起来,在页面中直接作为字符串输出使用
运算:在{{}}内可以做一些简单的运算(主要有算术运算,逻辑运算,三元运算,字符串运算等)
示例代码
<view>算术运算:{{age+num}}</view>
<view>逻辑运算:{{age==40}}</view>
<view>三元运算:{{age==1 ? 3 : num}}</view>
2.条件数据绑定
wx:if条件数据绑定
block wx:if条件数据绑定
3.列表数据绑定
wx:for
block wx:for
ru.wxml代码:
<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>算术运算:{{age+num}}</view>
<view>逻辑运算:{{age==40}}</view>
<view>三元运算:{{age==1 ? 3 : num}}</view>
<view wx:if="{{age>40}}">1</view>
<view wx:elif="{{age==40}}">2</view>
<view wx:else>3</view>
ru .js代码:
Page({
data: {
name:'lwk',
age:30,
num:100,
birthday:[{year:1988},{month:11},{date:18}],
object:{hobby:'computer'},
students:[
{nickname:"Tom",height:180,weight:150},
{nickname:"Aiz",height:160,weight:100}
]
}
})
app.js代码:
App({
onLaunch:function(){
console.log("小程序初始化完成......")
},
onShow:function(options){
console.log("小程序显示");
console.log(this.data);
console.log(this.fun());
},
onHide:function(){
console.log("小程序进入后台");
},
onError:function(msg){
},
fun:function(){
console.log("在app.js中定义的方法");
},
data:'在app.js中定义属性'
})
运行结果图
4.模板
定义模板
调用模板
示例代码
<template name="stu">
<view wx:for="{{students}}">
<text>姓名:{{item.nickname}}</text>
<text>升高:{{item.height}}</text>
<text>体重:{{item.weight}}</text>
</view>
</template>
<template is="stu" data="{{students}}"></template>
2.7页面样式文件
wxss常用属性