微信小程序入门指南：页面结构与生命周期-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_43912883/article/details/109346257

本文简要介绍了微信小程序的主目录结构、页面加载、生命周期、样式使用、调试方法、页面跳转和事件处理。重点讲解了app.json、app.js、样式引用以及页面生命周期函数onLoad、onShow、onHide、onUnload的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

微信小程序简要学习（上）

一、主目录结构

app.js为外部全局主js，可以当作一个父类
app.json为全局配置文件，以对象形式存在
app.wxss为全局样式文件，公用

二、页面目录结构

items.js为私有的js，相当于子类
items.json为以json为对象形式存在的配置(每个页面都有page对象)
items.wxml为元素渲染页面
items.wxss为私有样式，私有样式可以覆盖公有(import导入)

三、程序页面加载

小程序默认加载pages中的第一个目录（第一行），如下文，加载index，其他页面需要通过触发加载

3.1 app.json

"pages":[
	"pages/index/index",
	"pages/index1/index1",
	"pages/index2/index2",
]

导航栏navigationBar跟底部切换栏tarbar配置，详情参考官网文档：https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#%E9%A1%B5%E9%9D%A2%E9%85%8D%E7%BD%AE

3.2 app.json

  "window":{
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "第一个demo",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  },

3.3 app.json

  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/imooc/imooc",
      "text": "慕课网"
    }]
  },

以及网络请求以及debug一些配置

3.4 app.json

  "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  },
  "debug": true,

四、小程序APP的生命周期

onLaunch：第一次打开，初始化，只被调用一次
onShow：第一次打开会随着onLaunch一起触发，当退到后台又切换回来，便会触发onShow
onHide：例如点手机的home键小程序退到后台，便会触发onHide
onError：当小程序出现错误，会在这里抛出并在此处理

4.1 app.js

App({
  onLaunch (options) {
    console.log("触发onLaunch")
  },
  onShow (options) {
    console.log("触发onShow")
  },
  onHide () {
    console.log()
  },
  onError (msg) {
    console.log(msg)
  },
  globalData: 'I am global data',
  authorName: 'Derrick'
})

全局的app.js不允许注释，globalData与authorName为全局字符串，调用如下，参考官网给的例子https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html

4.2 test.js (页面目录结构)

page对象是一定要有的，如果没有页面则会空白

Page({
	data:{
		mytext:'My kinda wonderland'
	},
	onLoad:function(){
		const appInstance = getApp()
		console.log(appInstance.authorName);
		//获取到上面的data并设置值时，用setData
        this.setData({
        	mytext:appInstance.authorName
        });
	}
})

五、样式使用

在这里插入图片描述

5.1 一般引用情况

直接像往常html引用即可，其中container为app.wxss全局样式，txt-css为index.wxss私有样式，私有样式可以覆盖公有

5.1.1 index.wxss

.txt-css{
  margin-top:350rpx;
}

5.1.2 index.wxml

<view class="container">
<text class="txt-css">{{mytxt}}</text>
</view>

5.2 利用import

5.2.1 out.wxss

.txt-left{
  margin-left:350rpx;
}

5.2.2 index.wxss

利用import导入，然后添加相对路径，并以分号为结尾

@import "out.wxss";
.txt-css{
  margin-top:350rpx;
}

5.2.3 index.wxml

<view class="container">
<text class="txt-css txt-left">{{mytxt}}</text>
</view>

5.3 内联样式并有数据绑定，与vue类型

5.3.1 index.wxml

<view class="container">
<text class="txt-css txt-left" style="color:{{color}};">{{mytxt}}</text>
</view>

5.3.2 index.js

Page({
  data: {
    mytxt:'这是第一demo',
    color: "red"
  },
......

六、debug与调试

打断点，语句为debugger，代码如下，打开微信调试器，重新编译的时候就会出现如下图状况，按F10是单步往下继续走，按F8是直接跳到下一个断点，并且支持真机调试

App({
  onLaunch (options) {
    debugger;
    console.log("触发onLaunch")
  },
  onShow (options) {
    debugger;
    console.log("触发onShow")
  },
  onHide () {
    debugger;
    console.log()
  },
  onError (msg) {
    debugger;
    console.log(msg)
  },
  globalData: 'I am global data',
  authorName: 'Derrick'
})

在这里插入图片描述

七、page生命周期以及跳转

第一次onLoad加载完便会触发onShow，当页面展示完毕之后再onReady

7.1 index.js

 /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

在这里插入图片描述

接下来展示onHide与onUnload，先给标签绑定clickMe事件，代码如下：

7.2 index.wxml

利用bindtap绑定一个clikMe事件

<view class="container">
<text class="txt-css txt-left" style="color:{{color}};" bindtap="clickMe">{{mytxt}}</text>
</view>

7.3 index.js

在js中写出clickMe事件，跳转到imooc页面，其中的url填写相对路径，跳转后就会触发onHide生命周期函数，点击返回按钮就会再触发onShow生命周期函数，点击返回不会触发onLoad与onReady，因为它们只有在页面第一次加载的时候触发，除非页面被卸载

  clickMe:function(){
    wx.navigateTo({
      url: '../imooc/imooc',
    })
  }

7.4 index.js

将navigateTo改成redirectTo，这时候就会将页面重定向到下一个页面，便会触发onUnload生命周期函数，即卸载页面，这时候就会没有返回按钮

  clickMe:function(){
    wx.redirectTo({
      url: '../imooc/imooc',
    })
  }

八、事件

如第七中，我们其实可以对整个事件进行捕捉并进行打印，打印的log可参考官方文档：https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/event.html

  clickMe:function(e){
    console.log(e)
  }

其中，我们可以自定义数据，利用data-XXXX，代码如下：

<view class="container">
<text class="txt-css txt-left" data-customName="derrick" bindtap="clickMe">{{mytxt}}</text>
</view>

在函数中可以获取到自定义数据，代码如下，但是要注意，customName已经被全部转换为小写

  clickMe:function(e){
    console.log(e);
    var name = e.currentTarget.dataset.customname;
    console.log(name);
  }

在这里插入图片描述

九、小程序模块化

把通用的方法抽离出来，作为通用函数，并构建再utils-common包中，供js类去调用，是业务共用化，官方文档https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/module.html

//传入name变量，打印的使用${变量}
function sayHello(name) {
  //也可使用单引号，字符串拼接的方式
  //console.log('Hello' + name + '!')
  console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
  console.log(`Goodbye ${name} !`)
}
//利用module.exports或者exports使得sayHello跟sayGoodbye暴露出去
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

//使用require将公共代码引入
var common = require('common.js')
Page({
  helloMINA: function() {
  //类似于java一样调用即可
    common.sayHello('MINA')
  },
  goodbyeMINA: function() {
    common.sayGoodbye('MINA')
  }
})

//注意路径问题，引入时需要在page对象之外
var common = require('../utils/common.js')
Page({
  data: {
    mytxt:'这是第一demo',
    color: "red"
  },
  clickMe:function(e){
    console.log(e);
    var name = e.currentTarget.dataset.customname;
    console.log(name);
    //调用
    common.sayHello("derrick");
  },