目录结构
小程序默认的目录结构如下图：
- pages 页面文件夹
- index 首页
- logs 日志页
- utils 工具
- app.js 项目入口（类似main.m）
- app.json 全局配置
- app.wxss 全局样式
- project.config.json 项目配置（类似info.plist)
- sitemap.json 配置小程序及其页面是否允许被微信索引
- .gitignore git管理的文件忽略
小程序文件结构和传统web对比
| 结构 | 传统web | 微信小程序 |
|---|---|---|
| 结构 | html | wxml |
| 样式 | css | wxss |
| 逻辑 | javascript | javascript |
| 配置 | 无 | json |
app.json
app.json中，pages字段用于配置小程序中所有需要集成的页面，第一条数据页面是小程序的首页，当新增一条数据时，小程序IDE会自动生成对应的页面文件。
window字段用于配置window的一些属性，比如颜色，标题，是否支持下拉刷新等。
tarbar用于配置tarbar相关的属性，比如颜色，标题，图标，位置等。
页面.json
可单独为特定页面配置属性，若不配置则默认采用app.json文件中window的属性值。
usingComponents声明需要使用的自定义组件。
component是否为组件，Bool类型。
siteMap.json
页面.js
调用Page方法管理页面的生命周期。可以在data中添加自定义属性。
Page({
/**
* 页面的初始数据
*/
data: {
msg: "hello world",
num: 10000,
isOn: false,
person: {
age: 30,
name: "小王"
},
persons:[
{
id: 0,
name: "小王"
},
{
id: 1,
name: "小张"
},
{
id: 2,
name: "小李"
}
]
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
页面.wxml
| wxml标签 | html标签 | 描述 |
|---|---|---|
| text | span | 行内元素（不会换行） |
| view | div | 块级元素（会换行） |
访问js文件定义的属性：
<view>{{msg}}</view>
<view>{{person.name}}</view>
标签属性中使用js文件定义的属性：
<view data-person="{{person}}">person</view>
<checkbox checked="{{isOn}}">选择框</checkbox>
可以在{{}}中加入表达式（运算）
<view>{{1+2}}</view>
<!-- 3 -->
<view>{{'1'+'2'}}</view>
<!-- 12 -->
数组循环/对象循环 渲染
<view
wx:for="{{persons}}"
wx:for-item="item"
wx:for-index="index"
wx:key="*this">
{{index}} {{item.name}}
</view>
wx:for-item="item"与wx:for-index="index"是循环项和循环索引的默认值，可以不写，也可以手动改变名称。wx:key是用于提高渲染性能的唯一key，普通数组传"*this"。
<view
wx:for="{{person}}"
wx:for-item="value"
wx:for-index="key"
class="my_class">
{{key}} {{value}}
</view>
对象循环一般会重名为value和key，这样更符合语义。
block
block是个占位符标签，页面渲染时，小程序会将其移除。
上面的代码最终效果如下：
<view class="my_class">
age 30
</view>
<view class="my_class">
name 小王
</view>
如果将<view>改成<block>，则会忽略标签。
age 30
name 小王
条件渲染
控制标签显示/隐藏两种方式：
方式1:wx:if
直接将标签从页面结构移除。
<view wx:if="{{true}}">1</view>
<view wx:elif="{{true}}">2</view>
<view wx:else="{{true}}">3</view>
方式2:hidden
只是控制标签的显示与隐藏。对于频繁切换显示隐藏状态的标签，这种方式性能更好。
<view hidden="{{true}}">4</view>
两种方式最终效果如下，可以看到wx:if的未显示标签直接被移除了，而hidden只是设置了样式view[hidden] { display: none; }。
<view>1</view>
<view>4</view>
style样式分别如下：
view {
display: block;
}
view[hidden] {
display: none;
}
事件绑定
微信小程序js中不能通过this.data.num = value;的方式来设置num的值，而需要通过设置data对象来实现。
// pages/demo2/demo2.js
Page({
data: {
num: 100
},
handleInput(e) { // e事件源对象
var value = e.detail.value;
console.log(value);
this.setData({
num: value
})
},
handleTap(e) {
console.log(e);
const change = e.currentTarget.dataset.change
this.setData({
num: this.data.num+change
})
}
})
通过自定义属性change来传递值变化量。
<!--pages/demo2/demo2.wxml-->
<input type="text" bindinput="handleInput" />
<button bindtap="handleTap" data-change="{{1}}">+</button>
<button bindtap="handleTap" data-change="{{-1}}">-</button>
<view>{{num}}</view>
页面.wxss
在web开发中，需要通过link标签引入css样式文件，但小程序中不需要，会自动根据同名称文件引入。
rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。也可以通过100%或者100vw指定比例。
calc() 函数允许我们在属性值中执行数学计算操作。
@import 导入外联样式表，只支持相对路径。
/* pages/demo2/demo2.wxss */
@import "../../styles/common.wxss";
view{
width: calc(750rpx * 100 / 375);
height: 200rpx;
font-size: 40px;
background-color: bisque;
}
小程序自带组件
https://developers.weixin.qq.com/miniprogram/dev/component/native-component.html
自定义组件
以下是自定义Tabs组件的一个例子。
properties属性可以通过外部访问。
// pages/demo1/Tabs.js
Component({
/**
* 组件的属性列表
*/
properties: {
tabs:{
type:Array,
value:[]
}
},
/**
* 组件的初始数据
*/
data: {
},
/**
* 组件的方法列表
*/
methods: {
handleItemTap(e){
const {index} = e.currentTarget.dataset;
// 子组件向父发送自定义事件
this.triggerEvent("itemChange", {index})
}
}
})
Tabs.json文件：
{
"component": true,
"usingComponents": {}
}
slot标签是占位标签，slot是插槽的意思。可以通过Shift+Alt/Option+F快捷键对代码进行格式化。
<!--pages/demo1/test.wxml-->
<view class="tabs">
<view class="tabs_title">
<view class="title_item {{item.isActive?'active':''}}" wx:for="{{tabs}}" wx:key="id" bindtap="handleItemTap"
data-index="{{index}}">
{{item.name}}
</view>
</view>
<slot></slot>
</view>
wxss中view.xx可以省略view，简写为.xx。
view.tabs_title{
display: flex;
}
view.title_item{
flex: 1;
display: flex;
justify-content: center;
align-items: center;
}
.active{
color: red;
border-bottom: 10rpx solid currentColor;
}
使用Tabs组件。
// pages/demo1/demo1.js
Page({
/**
* 页面的初始数据
*/
data: {
tabs:[
{
id:0,
name:"首页",
isActive:true
},
{
id:1,
name:"分类",
isActive:false
},
{
id:2,
name:"我的",
isActive:false
}
]
},
handleItemChange(e){
const {index} = e.detail;
// let {tabs} = this.data;
// let tabs = this.data.tabs;
let tabs = JSON.parse(JSON.stringify(this.data.tabs))
tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false);
this.setData({
tabs
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
demo1.json中配置使用到的组件。
{
"usingComponents": {
"Tabs": "Tabs"
}
}
view标签将会替换Tabs组件中的slot标签。
<!--pages/demo1/demo1.wxml-->
<Tabs tabs="{{tabs}}" binditemChange="handleItemChange" >
<view>内容，替换slot标签</view>
</Tabs>
组件js文件各定义段如下图：
应用生命周期
// app.js
App({
// 第一次启动触发事件，类似iOS中的didFinishLaunchingWithOptions
onLaunch(){
console.log("onLaunch");
},
// 小程序被看到，类似iOS中applicationWillEnterForeground
// 但iOS中首次启动显示不会触发，小程序会触发
onShow(){
console.log("onShow");
},
// 小程序隐藏，类似iOS中的applicationDidEnterBackground
onHide(){
console.log("onHide");
},
// 小程序代码发送报错触发，常用于收集错误信息，并发送给后台
onError(err){
},
// 应用找不到启动时候的入口页面触发
onPageNotFound(){
wx.navigateTo({
url: '/pages/demo2/demo2',
})
}
})
