1. 准备工作

    • 下载并安装微信开发者工具
    • 注册微信公众平台账号并创建小程序项目
  2. 项目结构

    • app.js:小程序的入口文件,用于定义全局变量和函数
    • app.json:小程序的全局配置文件,用于配置小程序的页面、窗口样式、网络超时时间等
    • app.wxss:小程序的全局样式表,用于定义全局的样式
    • pages:存放小程序各个页面的文件夹
      • index:首页
        • index.js:首页的逻辑文件
        • index.wxml:首页的结构文件
        • index.wxss:首页的样式文件
      • logs:日志页面
        • logs.js:日志页面的逻辑文件
        • logs.wxml:日志页面的结构文件
        • logs.wxss:日志页面的样式文件
  3. 编写代码

    • 在app.json中配置页面路径,例如:

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

    • 在pages文件夹下创建对应的页面文件夹,并在其中创建对应的文件。例如,创建index文件夹并在其中创建index.js、index.wxml和index.wxss文件。
    • 编写页面的逻辑文件(.js),例如:

      Page({ data: { message: 'Hello World' }, onLoad: function () { setTimeout(() => { console.log('页面加载完成'); }, 3000) } })

    • 编写页面的结构文件(.wxml),例如:

      {{message}}

    • 编写页面的样式文件(.wxss),例如:

      text { font-size: 24px; text-align: center; }

    • 在app.json中配置导航栏,例如:

      "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" } ] }

  4. 预览和调试

    • 使用微信开发者工具打开项目,预览和调试小程序。可以在手机上扫描二维码进行调试。