微信小程序基础

微信小程序是一种无需下载安装即可使用的应用，具备应用的完整功能并且具有灵活性和轻量化的特点。开发微信小程序需要掌握一些基本的编程知识和工具。以下是微信小程序编程的基础文档。

一、开发环境搭建

注册微信小程序账号：前往微信公众平台注册一个微信小程序账号。
下载并安装微信开发者工具：前往微信开发者工具下载页面下载适合自己操作系统的开发者工具。

二、微信小程序的项目结构

微信小程序的项目通常包含以下几个文件：

app.js：小程序的入口文件。
app.json：全局配置文件，决定小程序的页面路径、窗口表现等。
app.wxss：全局样式表，用于定义小程序的公共样式。
页面目录：每个页面通常包含四个文件：
page.js：页面的逻辑代码。
page.json：页面的配置文件。
page.wxml：页面的结构文件。
page.wxss：页面的样式文件。

三、核心文件详解

1.app.js：定义小程序的生命周期函数和全局数据

// app.js
App({
  onLaunch() {
    // 小程序启动时执行
  },
  globalData: {
    userInfo: null
  }
});

2.app.json：定义小程序的页面路径、窗口外观、底部导航等。

// app.json
{
  "pages": [
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle": "black"
  },
  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首页"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日志"
    }]
  }
}

3.app.wxss：定义全局样式，可以在这里设置一些公共的样式类。

/* app.wxss */
body {
  background-color: #f8f8f8;
}

4.页面文件：page.js：页面的逻辑，定义页面的生命周期函数和数据。

// pages/index/index.js
Page({
  data: {
    message: "Hello, WeChat!"
  },
  onLoad() {
    console.log("Page loaded");
  }
});

                page.json：页面的配置，覆盖全局配置的部分。

// pages/index/index.json
{
  "navigationBarTitleText": "首页"
}

                 page.wxml：页面的结构，使用类似 HTML 的标记语言。

<!-- pages/index/index.wxml -->
<view>
  <text>{{message}}</text>
</view>

                   page.wxss：页面的样式，可以覆盖全局样式。

/* pages/index/index.wxss */
text {
  color: #333;
}

四、开发流程

1. 创建项目：打开微信开发者工具，选择“新建小程序项目”，填写项目名称和目录。
2. 编写代码：根据项目结构编写代码，定义小程序的页面和逻辑。
3. 调试：使用微信开发者工具进行调试，可以实时预览和查看日志。
4. 提交审核：完成开发后，提交小程序进行审核，审核通过后即可发布。