目录
小程序的基本目录结构
基本排版
pages
所有的页面存放在pages文件夹中
pages中每个文件夹都表示一个页面
index
其中index四个文件有分别的作用
.json | 页面配置 |
.ts | 页面逻辑 |
.wxml | 页面结构 |
.wxss | 页面样式表 |
utils
所有的工具包存放在utils文件夹中
utils目录用来存放一些公共的.js文件
pages中的所有页面都可以用到utils中的工具包,当某个页面需要用到utils.js函数时,可以将其引入后直接使用
app
app开头的为项目的主体文件
app.json | 主逻辑文件 |
app,ts | 主配置文件 |
app.wxss | 主样式文件 |
开发框架
小程序MINA框架将整个系统划分为视图层和逻辑层。
视图层
MINA框架的视图层由WXML和WXSS编写,由组件来进行展示。对于微信小程序而言,视图层就是所有.wxml文件与.wxss文件的集合:.wxml文件用于描述页面的结构;.wxss文件用于描述页面的样式。
逻辑层
逻辑层用于处理事务逻辑。
如何删除和新建页面
如图作者创建了一个名为news的页面文件
单击选中后删除
然后选择编译
新建直接在app.json文件中
pages输入想要的文件及名称
即可得到想要的页面和四个基本配置文件
主体json配置文件
常用window全局配置
tabBar选项卡
list属性
imges文件夹
没有可自建
用于存放导航栏选项卡图标
数据初始,数据绑定及运行效果
news.wxml
<view>姓名:{{name}}</view>
<view>年龄:{{age}}</view>
<view>出生日期:
{{birthday[0].year}}年
{{birthday[1].month}}月
{{birthday[2].date}}日
</view>
<view>爱好:{{object.hobby}}</view>
news.js
Page({
data:{
name:'lwh',
age:20,
birthday:[{year:2004},{month:7},{date:12}],
object:{hobby:'computer'}
}
})
运行结果
app.js
app.js文件是项目的入口文件:
//app.js
App({
onLaunch: function () {
// 展示本地存储能力
var logs = wx.getStorageSync('logs') || []
logs.unshift(Date.now())
wx.setStorageSync('logs', logs)
// 登录
wx.login({
success: res => {
// 发送 res.code 到后台换取 openId, sessionKey, unionId
}
})
// 获取用户信息
wx.getSetting({
success: res => {
if (res.authSetting['scope.userInfo']) {
// 已经授权,可以直接调用 getUserInfo 获取头像昵称,不会弹框
wx.getUserInfo({
success: res => {
// 可以将 res 发送给后台解码出 unionId
this.globalData.userInfo = res.userInfo
// 由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
if (this.userInfoReadyCallback) {
this.userInfoReadyCallback(res)
}
}
})
}
}
})
},
globalData: {
userInfo: null
}
})
数据绑定和条件数据绑定及模板使用
news.js设置数据绑定
Page({
data:{
name:'lxx',
age:20,
num:99,
birthday:[{year:2004},{month:7},{date:12}],
object:{hobby:'computer'},
students:[
{nickname:"tom",height:180,weight:140},
{nickname:"anne",height:160,weight:100}
]
}
})
news.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)*3/3}}</view>
<view>逻辑运算:{{age==40}}</view>
<view>三元运算:{{age==18? 1:2}}</view>
<view wx:if="{{age>20}}">1</view>
<view wx:elif="{{age<20}}">2</view>
<view wx:else>20</view>
<view wx:for="{{students}}">
<text>姓名:{{item.nickname}}</text>
<text>身高:{{item.height}}</text>
<text>体重:{{item.weight}}</text>
</view>
<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>
运行结果
页面事件
冒泡事件
冒泡事件是指某个组件上的时间被触发后,事件会向父级元素传递,父级元素再向其父级元素传递,一直到页面的顶级元素。
非冒泡事件
非冒泡事件是指某个组件上的时间被触发后,该事件不会向父节点传递。
页面样式属性
本章小结
本章首先讲解了小程序的目录结构,然后通过目录结构介绍了小程序的框架,最后主要介绍了小程序文件的类型及其配置。这些知识都是开发微信小程序的基础知识,大家必须深刻理解和熟练掌握,并勤写代码多加练习,为后续的学习打下扎实的基础。