项目目录结构
微信小程序的基本文件构造和项目目录结构说明如下:
.
├── app.js # 小程序的逻辑文件
├── app.json # 小程序的配置文件
├── app.wxss # 全局公共样式文件
├── pages # 存放小程序的各个页面
│ ├── index # index页面
│ │ ├── index.js # 页面逻辑
│ │ ├── index.wxml # 页面结构
│ │ └── index.wxss # 页面样式表
│ └── logs # logs页面
│ ├── logs.js # 页面逻辑
│ ├── logs.json # 页面配置
│ ├── logs.wxml # 页面结构
│ └── logs.wxss # 页面样式表
├── project.config.json
└── utils
└── util.js
wxml 类似于 HTML 文件,用来编写页面的标签和骨架,但里面只能用小程序自己封装的组件;
wxss 类似于 CSS 文件,用来编写页面样式,只是把 css 文件换成了 wxss 文件;
js 文件类似于前端编程中的 JavaScript 文件,用来编写小程序的页面逻辑;
json 文件用来配置页面的样式和行为。
app.json 文件最初的内容如下:
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "balack"
}
}
pages 属性用来设置页面路径,它是一个数组,每一项都是字符串来指定小程序由哪些页面组成。数组的第一项代表小程序的初始页面。小程序中新增或减少页面,都需要对 pages 数组进行修改。
window 属性用于设置小程序的状态栏、导航条、标题、窗口背景色。
页尾部分我们做一个 tab 栏来切换页面,这个属性叫做 tabBar
"tabBar":{
"color": "#bfc1ab",
"selectedColor": "#13b11c",
"backgroundColor": "#1f1f4f",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "image/icon_component.png",
"selectedIconPath": "image/icon_component_HL.png",
"text": "个人中心"
},
{
"pagePath": "pages/details/details",
"iconPath": "image/icon_API.png",
"selectedIconPath": "image/icon_API_HL.png",
"text": "生活指南"
}
]
}
使用
下面使用 {{company}}、{{position}} 和 {{lesson}} 作为占位符,用法类似于 Django 的模板语言。当然也可以直接用相应的字符来替换它,只不过我们想沿用 {{motto}} 的做法,让你知道在哪里修改这些数据。没错,就是在 index.js 文件:
<!--index.wxml-->
<view class="container">
<view class="userinfo">
<button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
<block wx:else>
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</block>
</view>
<!-- <view class="usermotto">
<text class="user-motto">{{motto}}</text>
</view> -->
<view class="ID_Badge">
<view>
<text class="ID_info">{{company}}</text>
</view>
<view>
<text class='ID_info'>{{position}}</text>
</view>
<view>
<text class='ID_info'>{{lesson}}</text>
</view>
</view>
</view>
Page({
data: {
motto: 'Hello World',
company: "GoZeroWaste",
lesson: "21天零垃圾生活指南",
position: "垃圾魔法师",
/* ... */
},
wxml 文件中<view> 组件类似于网页开发中的 <div>,而 <text> 组件是用来写文本的,
需要注意的是 <text/> 组件内只支持 <text/> 嵌套。当然,可用用 <image> 插入图片,
图片要保存到 image 目录,否则在测试的时候是无法上传的。
<view>
<image class='pic' mode='widthFix' src='../../image/GoZeroWaste.jpg'></image>
</view>
mode=‘widthFix’ 表示以宽度不变,高度自动变化,保持原图宽高比不变的方式进行缩放以适应屏幕大小。
使用列表渲染(wx:for)的方法将这些数据绑定一个数组,并在页面上重复渲染。
<view>
<view wx:for="{{list}}" wx:key="id" >
<view class="lesson" id="{{item.id}}">
<image class="lessonPic" mode='aspectFit' src="{{item.src}}"></image>
<view class="lessonName">{{item.name}}</view>
<view class="lessonIntroduce">{{item.introduce}}</view>
</view>
</view>
</view>
默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item。
绑定事件
<view class='btn_ok' bindtap='powerDrawer' data-statu='close' id='{{item.id}}'>确定</view>
在组件中绑定一个事件处理函数 bindtap,点击该组件的时候,小程序会在该页面对应的 js文件中的Page 中找到相应的事件处理函数。
powerDrawer: function (e) {
}
<view>
<text catchtap="click" class="window">Hello</text>
</view>
catch 代表非冒泡事件
tap 代表点击事件
所以连在一起就是非冒泡点击事件
click 其实只是个方法名字
每个页面生命周期:
index.js文件:
Page({
data:{
// text:"这是一个页面"
},
onLoad:function(options){
// 页面初始化 options为页面跳转所带来的参数
},
onReady:function(){
// 页面渲染完成
},
onShow:function(){
// 页面显示
},
onHide:function(){
// 页面隐藏
},
onUnload:function(){
// 页面关闭
}
})
更新界面数据
这里有个问题 我们更换完值 但是在wxml中不会立即生效
所以我们需要调用 this.setData() 方法将值同步给wxml 让它立即生效