微信小程序：服务器请求、上传图片和提交表单开发完整代码实例

该示例涉及服务器请求、上传图片、展示上传的图片，并提交表单，同时配合使用 WXML（微信小程序的前端页面结构）、WXSS（样式表）、以及 JavaScript（逻辑控制）。请注意，服务器端的实现将不在本示例范围内，您需要根据实际需求创建后端 API 来处理请求和上传的操作。

1. 首先，创建一个小程序页面

在微信开发者工具中，创建一个新的页面，命名为upload-page。在upload-page目录下，您将会有一个upload-page.wxml文件（用于页面结构）、一个upload-page.wxss文件（用于样式）、以及一个upload-page.js文件（用于逻辑控制）。

2. 编写页面结构 (upload-page.wxml)

<view class="container">
  <button bindtap="chooseImage">选择图片</button>
  <image class="preview-image" src="{
   
   {imageUrl}}" mode="aspectFit" wx:if="{
   
   {imageUrl}}"></image>
  <form bindsubmit="submitForm">
    <input name="name" placeholder="姓名" />
    <input name="email" type="email" placeholder="邮箱" />
    <button formType="submit">提交</button>
  </form>
</view>

在这个页面结构中，我们有一个按钮用于选择图片，一个用于展示已上传图片的<image>标签，以及一个表单，其中包含姓名和邮箱输入框以及提交按钮。

3. 编写样式 (upload-page.wxss)

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

button, input {
  margin: 10px;
  padding: 5px;
  width: 80%;
  border: 1px solid #ccc;
}

.preview-image {
  width: 80%;
  max-height: 300px;
  margin-top: 10px;
}

这是一个简单的样式表，用于美化页面元素的外观。

4. 编写逻辑控制 (upload-page.js)

Page({
  data: {
    imageUrl: ''
  },
  
  chooseImage: function () {
    const that = this;
    wx.chooseImage({
      count: 1,
      success: function (res) {
        const tempFilePaths = res.tempFilePaths;
        wx.uploadFile({
          url: 'https://api.example.com/upload', // 请替换为实际的上传地址
          filePath: tempFilePaths[0],
          name: 'file',
          success: function (uploadRes) {
            const imageUrl = uploadRes.data;
            that.setData({
              imageUrl: imageUrl
            });
            wx.showToast({
              title: '图片上传成功',
              icon: 'success'
            });
          },
          fail: function (err) {
            console.error(err);
            wx.showToast({
              title: '图片上传失败',
              icon: 'none'
            });
          }
        });
      },
      fail: function (err) {
        console.error(err);
        wx.showToast({
          title: '选择图片失败',
          icon: 'none'
        });
      }
    });
  },

  submitForm: function (e) {
    const formData = e.detail.value;
    // 向服务器提交表单数据
    wx.request({
      url: 'https://api.example.com/submit', // 请替换为实际的提交地址
      method: 'POST',
      data: formData,
      success: function (res) {
        console.log('表单提交成功', res);
        wx.showToast({
          title: '表单提交成功',
          icon: 'success'
        });
      },
      fail: function (err) {
        console.error('表单提交失败', err);
        wx.showToast({
          title: '表单提交失败',
          icon: 'none'
        });
      }
    });
  }
});

这段 JavaScript 代码包含了两个函数：chooseImage 用于选择并上传图片，submitForm 用于提交表单数据。请确保将上传图片和提交表单的实际请求地址替换为您的服务器端点。

5. 小程序页面配置 (upload-page.json)

在 upload-page 目录下，还有一个 upload-page.json 文件，用于配置页面的一些属性，例如页面标题：

{
  "navigationBarTitleText": "上传图片和提交表单示例"
}

6. 配置路由

在 app.json 文件中配置页面路由，将 upload-page 添加到页面列表中：

{
  "pages": [
    "pages/index/index",
    "pages/upload-page/upload-page" // 添加此行
  ],
  "window": {
    "navigationBarTitleText": "微信小程序示例"
  }
}

7. 测试和调试

通过微信开发者工具，在模拟器或真机上测试和调试您的小程序。

这就是一个完整的微信小程序示例，演示了如何实现服务器请求、上传图片并展示，以及提交表单。请注意，您需要根据实际需求编写服务器端代码来处理这些请求。希望这个示例对您有所帮助，鼓励您继续学习微信小程序开发，创建更多有趣和实用的应用程序。

微信小程序：服务器请求、上传图片和提交表单开发完整代码实例

猜你喜欢