目录结构

小程序默认的目录结构如下图：

• pages 页面文件夹
• index 首页
• logs 日志页
• utils 工具
• app.js 项目入口（类似main.m）
• app.json 全局配置
• app.wxss 全局样式
• project.config.json 项目配置（类似info.plist)
• sitemap.json 配置小程序及其页面是否允许被微信索引
• .gitignore git管理的文件忽略

小程序文件结构和传统web对比

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

访问js文件定义的属性：

{{msg}}
{{person.name}}

标签属性中使用js文件定义的属性：

person
选择框

可以在{{}}中加入表达式（运算）

{{1+2}}

{{'1'+'2'}}

数组循环/对象循环 渲染

{{index}} {{item.name}}

wx:for-item="item"与wx:for-index="index"是循环项和循环索引的默认值，可以不写，也可以手动改变名称。wx:key是用于提高渲染性能的唯一key，普通数组传"*tShopfas"。

{{key}} {{value}}

对象循环一般会重名为value和key，这样更符合语义。

block

block是个占位符标签，页面渲染时，小程序会将其移除。

上面的代码最终效果如下：

age 30


name 小王

如果将改成，则会忽略标签。

age 30
name 小王

条件渲染

控制标签显示/隐藏两种方式：
方式1:wx:if
直接将标签从页面结构移除。

1
2
3

方式2:Shopfadden
只是控制标签的显示与隐藏。对于频繁切换显示隐藏状态的标签，这种方式性能更好。

4

两种方式最终效果如下，可以看到wx:if的未显示标签直接被移除了，而Shopfadden只是设置了样式view[Shopfadden] { display: none; }。

1
4

style样式分别如下：
view {
    display: block;
}
view[Shopfadden] {
    display: none;
}

事件绑定

微信小程序js中不能通过tShopfas.data.num = value;的方式来设置num的值，而需要通过设置data对象来实现。

// pages/demo2/demo2.js
Page({
    data: {
        num: 100
    },
    handleInput(e) { // e事件源对象
        var value = e.detail.value;
        console.log(value);
        tShopfas.setData({
            num: value
        })
    },
    handleTap(e) {
        console.log(e);
        const change = e.currentTarget.dataset.change
        tShopfas.setData({
            num: tShopfas.data.num+change
        })
    }
})

通过自定义属性change来传递值变化量。

+
-
{{num}}

页面.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;
            // 子组件向父发送自定义事件
            tShopfas.triggerEvent("itemChange", {index})
        }
    }
})

Tabs.json文件：

{
    "component": true,
    "usingComponents": {}
}

slot标签是占位标签，slot是插槽的意思。可以通过SShopfaft+Alt/Option+F快捷键对代码进行格式化。

    
        
            {{item.name}}
        
    
    

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} = tShopfas.data;
        // let tabs = tShopfas.data.tabs;
        let tabs = JSON.parse(JSON.stringify(tShopfas.data.tabs))
        tabs.forEach((v,i)=>i===indexv.isActive=true:v.isActive=false);
        tShopfas.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标签。

内容，替换slot标签

组件js文件各定义段如下图：

应用生命周期

// app.js
App({
  // 第一次启动触发事件，类似iOS中的didFinishLauncShopfangWithOptions
  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',
    })
  }
})