目录结构#

小程序项目可以分为两个级别：全局和页面级别，全局可以配置小程序整体信息，页面级别主要由配置、逻辑、样式、结构4个部分组成，详细：官方文档

全局配置文件#

使用全局配置制作菜单栏

app.json

1
  "tabBar": {
2
    "list": [{
3
      "pagePath": "pages/index/index",
4
      "text": "首页"
5
    }, {
6
      "pagePath": "pages/logs/logs",
7
      "text": "日志"
8
    }]
9
  },

详细的全局配置文件：官方文档，总体的配置也很简单，文档可以这样看，配置项就是整体可以配置的内容，可以配置什么功能，常用的有entryPagePath、pages、window、tabBar和networkTimeout，下面的就是对配置项的详细描述

页面级别配置文件#

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

1
{
2
  "navigationBarBackgroundColor": "#ffffff",
3
  "navigationBarTextStyle": "black",
4
  "navigationBarTitleText": "微信接口功能演示",
5
  "backgroundColor": "#eeeeee",
6
  "backgroundTextStyle": "light"
7
}

完整配置项说明请参考 小程序页面配置 。

全局逻辑中的生命周期函数#

关于全局逻辑中的生命周期函数可以参考文档，除了生命周期函数的说明外，文档也列举了一些推荐和不推荐写法，如现在并不推荐使用 App() 中的参数，而是使用对应的 wx 调用来代替。 文档地址

onLaunch：小程序启动的时候自动执行，带一个参数；小程序初始化完成时触发，全局只触发一次。这里需要注意，如果短时间内多次打开是执行一次，如果长时间再打开，这时候onLaunch就会重新执行一次

1
App({
2
  onLaunch(options){
3
    console.log('onLaunch',options);
4
  }
5
})

参数值可以参考：官方文档，也可以使用 wx.getLaunchOptionsSync 获取

onShow：小程序启动，或从后台进入前台显示时触发。一样也会带一个参数，onShow只要是退出重新进入小程序都会执行的一个函数，无论时间间隔的长短，这是与onLaunch区别，注意：onShow是onLaunch后的一个函数，也就是onLaunch是先执行，后才执行onShow

1
 onShow(options){
2
    console.log('onShow',options);
3
  },

参数值可以参考：官方文档，也可以使用 wx.onAppShow 获取

onHide：小程序从前台进入后台时触发。一样也有一个参数，这个参数可以了解用户退出后的去向，可以和onShow配对理解。一个显示一个退出

1
 onHide(options){
2
  console.log('onHide',options);
3
 }

onError：小程序发生脚本错误或 API 调用报错时触发。

1
// 不推荐的写法
2
App({
3
  onLaunch(options) {
4
    // 在启动时执行
5
  },
6
  onError(msg) {
7
    // 发生脚本错误时执行
8
    console.log(msg)
9
  },
10
})
11
// 推荐的写法
12
App()
13

14
wx.onError(function () {
15
  // 发生脚本错误时执行
16
  console.log(msg)
17
})
18

19
// 在启动时执行
20
var options = wx.getLaunchOptionsSync()

推荐写法中，原来放在 onLaunch() 里的初始化代码，可以直接放在 app.js 顶层执行，也可以封装成初始化函数后主动调用。

1
App();
2

3
// 监听全局错误
4
wx.onError((msg) => {
5
  console.log('全局错误：', msg);
6
});
7
// 获取启动参数
8
const options = wx.getLaunchOptionsSync();
9
// 初始化用户信息
10
function initUser() {
11
  console.log('初始化用户信息');
12
}
13
// 封装启动逻辑
14
function initApp() {
15
  console.log('小程序启动了');
16
  const token = wx.getStorageSync('token');
17
  initUser();
18
  console.log('启动参数', options);
19
}
20

21
// 主动执行初始化
22
initApp();

全局方法及数据的定义及调用方式#

全局的方法，怎么在页面级别的js中调用呢，小程序提供了一个getApp的接口，需要注意的是，这里的sayHello需要写在App内，也就是不能用推荐写法，当然现在这种写法也不推荐了，可以通过模块化来实现同样功能，文档地址

1
App({
2
   sayHello(){
3
    console.log('hello word');
4
  }
5
});

1
const app = getApp()
2
Page({
3
onLoad(){
4
  app.sayHello()
5
}
6
})

页面级别的生命周期函数#

在页面运行的某个时刻执行的函数，其实页面级别的生命周期函数和全局的差不多，只不过语义上有差别，页面级别有6个生命周期函数，具体可以参考文档：官方文档

onLoad：页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

onShow：页面显示/切入前台时触发。

onReady：页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互

onHide：页面隐藏/切入后台时触发。 如 wx.navigateTo 或底部 tab 切换到其他页面，小程序切入后台等。

onUnload：页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时

onRouteDone：路由动画完成时触发。如 wx.navigateTo 页面完全推入后 或 wx.navigateBack 页面完全恢复时。

除了上面6个外，还有很多其他在特定操作下自动触发的函数，如下拉刷新、用户点击右上角转发，用户点击右上角转发到朋友圈等等

页面逻辑层数据的定义及与页面的串联#

事件的文档：官方文档

数据绑定：

1
Page({
2
  data:{
3
    num:'1'
4
  },
5
})

1
<view>{{num}}</view>

点击事件：

1
changename(){
2
    console.log('changename');
3
  }

1
<view class="container" bind:tap="changename">{{num}}</view>

点击改变数据

1
Page({
2
  data:{
3
    num:'1'
4
  },
5
  changename(){
6
    console.log('changename');
7
   this.setData({
8
    num:'2'
9
   })
10
  }
11
})

1
<view class="container" bind:tap="changename">{{num}}</view>

逻辑层中的 API#

官方API文档：文档 api调用一般都是通过wx.调用的

1
wx.showModal({
2
    title: '提示',
3
    content: '这是一个模态弹窗',
4
})
5
wx.request({
6
    url:'https://www.fastmock.site/mock/fdf9557ad5613aec6428d08d90f25b45/weixin/api/getDate',
7
    success(res){
8
        console.log(res);
9
    }
10
})

视图层的数据绑定#

视图层包括WXML和WXSS，可以理解为HTML5和CSS3，只不过一些属性可能不支持；

在小程序没有DOM的概念，有组件的概念，view是最小的组件，可以理解为div

实现判断，点击显示隐藏功能：

1
<view class="flex">
2
 <button  bind:tap="changename">{{msg}}</button>
3
  <view wx:if="{{!show}}">hello</view>
4
  <view hidden="{{show}}">hidden</view>
5
  <checkbox checked="{{true}}">选择框</checkbox>
6
</view>

1
Page({
2
  data:{
3
    msg:'点击显示',
4
    show:true
5
  },
6
  changename(){
7
    if(!this.data.show){
8
      this.setData({
9
        msg:'点击显示',
10
        show:true
11
         })
12
         return
13
    }
14
 this.setData({
15
  msg:'点击隐藏',
16
  show:false
17
   })
18
  }
19
})

1
.flex{
2
  display: flex;
3
  flex-direction: column;
4
  justify-content: center;
5
  align-items: center;
6
}

wx，但是hidden是隐藏的意思，true就是隐藏，这个和vue的逻辑是相反的

视图层循环展示内容#

循环语句

1
<view class="flex">
2
 <view wx:for="{{list}}">
3
 {{item.title}}
4
 {{item.dec}}
5
 </view>
6

7
</view>

1
Page({
2
  data:{
3

4
    list:[
5
      {
6
        title:'我是标题1',
7
        dec:'描述1'
8
      },
9
      {
10
        title:'我是标题2',
11
        dec:'描述2'
12
      }, {
13
        title:'我是标题3',
14
        dec:'描述3'
15
      }
16
    ]
17
  },
18
})

视图层代码的拆分#

这里是页面嵌入：include 不推荐

1
<view class="flex">
2
 <view>header</view>
3
<include src="./content.wxml" />
4
<view>footer</view>
5
</view>

1
<view>content1</view>
2
<view>{{content}}</view>

include其实就把页面嵌入到另外页面中，这里{{content}}也是可以正常使用index.js定义的数据的

引入其他文件中的子模板：<template> 和 <import> 推荐

1
<view class="flex">
2
 <view>header</view>
3
<import src="./content.wxml"/>
4
<template is="content" data="{{ content }}"/>
5
<view>footer</view>
6
</view>

1
<template name="content">
2
  <view>content1</view>
3
<view>{{content}}</view>
4
</template>

组件&样式#

页面是由一个一个组件组成的，对于一些样式基本相同的组件，就可以封装成一个组件，供其他页面使用文档地址：自定义组件

样式尺寸单位：

• 布局：使用 %、rpx、vw 等相对单位，实现自适应。
• 字体：优先使用 px，保证字体大小稳定。
• 媒体查询：针对平板、PC 等大屏幕，适当调整字体大小和布局。
• Flex / Grid：配合相对单位，实现更加灵活的响应式布局。