微信小程序制作代码

微信小程序的制作涉及到前端和后端两个方面，前端使用WXML、WXSS、JavaScript等技术，后端可以选择使用Node.js、Java、Python等语言。

项目结构：
在你的项目目录下创建

bash
/pages
    /index
        index.wxml
        index.wxss
        index.js
app.js
app.json
app.wxss

app.json：
小程序的配置文件，配置小程序的页面路径、窗口样式等信息。

json
{
  "pages": [
    "pages/index/index"
  ],
  "window": {
    "navigationBarTitleText": "Hello Mini Program",
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black"
  }
}

index.wxml：
小程序的页面结构，类似HTML。

html
<view class="container">
  <text>{{message}}</text>
</view>

index.wxss：
小程序的样式表，类似CSS。

css
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

index.js：
小程序的逻辑文件，处理页面的交互逻辑。

javascript
Page({
  data: {
    message: 'Hello, Mini Program!'
  }
})

app.js：
小程序的全局逻辑文件，可以在这里处理小程序的生命周期函数等。

javascript
App({
  onLaunch: function () {
    // 小程序启动时执行
  },
  onShow: function () {
    // 小程序显示时执行
  },
  onHide: function () {
    // 小程序隐藏时执行
  }
})

运行小程序：
使用微信开发者工具导入项目文件夹，然后点击运行按钮即可在模拟器中预览你的小程序。

后端接口：
在后端创建一个接口，可以使用Node.js、Java、Python等语言。这里以Node.js和Express框架为例：

javascript
// 后端服务器文件
const express = require('express');
const app = express();

app.get('/api/message', (req, res) => {
  const data = {
    message: 'Hello from the backend!'
  };
  res.json(data);
});

const PORT = 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

启动后端服务器：

bash
node server.js

小程序前端与后端交互：
修改小程序的 index.js 文件，使用 wx.request 方法向后端发送请求，并在页面上展示后端返回的数据：

javascript
// index.js
Page({
  data: {
    message: 'Loading...' // 默认显示加载中
  },
  onLoad: function () {
    // 页面加载时触发
    this.getDataFromBackend();
  },
  getDataFromBackend: function () {
    wx.request({
      url: 'http://localhost:3000/api/message', // 后端接口地址
      success: (res) => {
        const data = res.data;
        this.setData({
          message: data.message
        });
      },
      fail: (err) => {
        console.error('Failed to fetch data from backend', err);
        this.setData({
          message: 'Failed to fetch data'
        });
      }
    });
  }
});

小程序界面展示：
修改 index.wxml 文件，显示从后端获取到的数据：

html
<view class="container">
  <text>{{message}}</text>
</view>