小程序的基本目录结构
pages:放了所有页面文件,每个页面都有一个文件夹
utils:工具包,所有的页面都可以用到
app.js:主逻辑文件,主要用来注册小程序全局实例
app.json:主配置文件,配置小程序全局设置
app.wxss:主样式文件,在主样式表文件中设置的样式在其他页面文件中同样有效
视图层:视图层就是所有.wxml文件与.wxss文件的集合,决定我们看到什么
逻辑层:逻辑层就是所有.js脚本文件的集合,进行交互处理或者网络处理
数据层:数据层在逻辑上包括页面临时数据或缓存、文件存储(本地存储)和网络存储与调用
删除小程序页面
单击pages文件目录下的lz文件按delete即可删除。
在找到app.json配置文件删除如下代码即可:
"pages/lz/lz",
创建小程序页面
在pages下新建一个lz文件夹,并在lz目录下新建lz.js、lz.json、lz.wxml、lz.wxss空文件。新建lz文件页面后的项目结构如下:
打开lz.wxml文件,输入小程序开发。然后打开项目配置文件app.json,输入如下代码:
这段代码将lz页面注册到小程序中,这个对象的第一属性pages接受了一个数组,该数组的每一项是一个字符串,该字符串由“路径”+“文件名”组成,多个页面之间用“,”分隔接下来,打开lz.json文件,输入如下代码:
打开lz.js文件,输入如下代码:
Page({
})
将这4个文件保存后进行编译,在模拟器中即可得到所需结果如下:
配置文件
app.json的pages和window的配置项:
app.json的tabBar配置项及其描述:
lz.json配置文件代码如下:
{
"navigationBarBackgroundColor": "#fff",
"navigationBarTextStyle":"black",
"navigationBarTitleText": "微信小程序-新闻", //导航栏的标题,因为就近原则
"backgroundColor": "#ccc",
"backgroundTextStyle":"light"
}
运行结果:
逻辑文件
app.js代码如下
lz.wxml代码如下:
<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>爱好:{{object.hobby}}</view>
<view>算数运算:{{age+num}}</view>
<view>逻辑运算:{{age==40}}</view>
<view>三元运算:{{1==1?3:4}}</view>
<view wx:if="{{age>30}}">1</view>
<view wx:elif="{{age==30}}">0</view>
<view wx:else>-1</view>
<template name="stu"> //定义模板,名为"stu"
<view wx:for="{{students}}">
<text>姓名:{{item.xm}}</text> //数组当前项的变量名默认为item
<text>身高:{{item.height}}</text>
<text>体重:{{item.weight}}</text>
</view>
</template>
<template is="stu" data="{{students}}"></template> //使用"stu"模板,数据来源"students"
lz.js代码如下:
Page({
//页面初始数据
data:{
name:'linzi',
age:20,
num:100,
students:[
{xm:"Tom",height:"180",weight:"150"},
{xm:"Anne",height:"160",weight:"100"}
],
birthday:[{year:2004},{month:6},{date:19}],
object:{hobby:'吃零食'}
}
})
运行结果如下: