微信小程序开发系列——5.前端页面开发

童凌

墨衍会员 · AI 创作全网分发码龄13年

关注

VIP免费原创最新推荐文章于 2025-01-18 00:11:49 发布 1.2w 阅读 AI 写同款· GEO 优化 ›

AI权益加码！Claude Code、Cursor等20+工具免费用！购周边限时加赠Coding Plan Lite，畅享主流AI工具！学习进阶更高效！阅读详情

摘要：本文说明了微信前端页面开发的基本架构，说明了组成文件各自的详细结构，通过这几个文件的协同工作，微信小程序开发框架可以实现页面Page中视图层和逻辑层的统一。

0. 简介

根据之前开发者工具和开发框架简介的内容，我们把官方demo和开发者工具安装好以后，就可以开始准备微信小程序的web开发了。

这里写图片描述

在开发的主要界面，点击开发者工具左侧导航的“编辑”，我们可以看到这个项目，已经初始化并包含了一些简单的代码文件。最关键也是必不可少的，是 app.js、app.json、app.wxss 这三个。

1. App系列配置文件

在 app.js、app.json、app.wxss 这三个文件中，.js后缀的是脚本文件，.json后缀的文件是配置文件，.wxss后缀的是样式表文件。微信小程序会读取这些文件，并生成小程序实例。

下面我们简单了解这三个文件的功能，方便修改以及从头开发自己的微信小程序。

1.1 App.js

app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。调用框架提供的丰富的 API，如本例的同步存储及同步读取本地数据。


App({
  onLaunch: function () {
   
   
    // 调用 API 从本地缓存中获取数据
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)
  },
  getUserInfo:function(cb){
   
   
    var that = this;
    if(this.globalData.userInfo){
      typeof cb == "function" && cb(this.globalData.userInfo)
    }else{
      // 调用登录接口
      wx.login({
        success: function () {
   
   
          wx.getUserInfo({
            success: function (res) {
   
   
              that.globalData.userInfo = res.userInfo;
              typeof cb == "function" && cb(that.globalData.userInfo)
            }
          })
        }
      });
    }
  },
  globalData:{
    userInfo:null
  }
})

1.2 App.json

app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。当有新建的页面时，需要在app.json的”pages”中添加相对路径。

{
  "pages": [
    "pages/index/index",
    "pages/logs/index"

  ],
  "window": {
    "navigationBarTitleText": "Demo"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text":