微信小程序,最简单目录结构。满足最简单目录结构,微信小程序在微信开发环境中才可以调试。
pages
index
index.js
index.json
index.wxml
index.wxss
app.js
app.json
pages包括所有页面,每个页面用一个文件夹表示。
indesx一个页面的文件夹,里面有4个文件js/json/wxml/wxss,js、wxml、wxss相当于网页的js、html、css文件,json是当前页面配置文件。
app.js全局js文件,可以为空。
app.json全局配置文件。样例(指向index页面):
{
"pages": ["pages/index/index"]
}
index.js样例。
// pages/index/index.js
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady() {
},
/**
* 生命周期函数--监听页面显示
*/
onShow() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload() {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage() {
}
})
index.json样例。
{
"usingComponents": {}
}
index.wxml样例(这里随意写了一个页面)。
<!--pages/index/index.wxml-->
<text>span</text>
<view class="c1">div</view>
index.wxss样例(根据wxml配置了一个简单样式)。
/* pages/index/index.wxss */
.c1 {
color: red;
}