微信小程序开发代码实现输入编号点击按钮查询跳转到另外一页展示查询结果jsjsonwxmlwxss代码实现

下面是一个简单的微信小程序开发代码实现输入编号点击按钮查询跳转到另外一页展示查询结果的示例：

在 js 文件中编写查询逻辑和跳转逻辑：

// pages/index/index.js

Page({
  data: {
    number: '',
  },

  // 输入编号
  bindNumberInput: function (e) {
    this.setData({
      number: e.detail.value
    });
  },

  // 点击查询按钮
  search: function () {
    // 获取输入的编号
    var number = this.data.number;

    // TODO: 进行查询逻辑，获取查询结果

    // 跳转到结果展示页，并传递查询结果
    wx.navigateTo({
      url: '/pages/result/result?number=' + number
    });
  }
});

在 json 文件中配置页面路由信息：

// pages/index/index.json

{
  "navigationBarTitleText": "查询页"
}

在 wxml 文件中编写页面布局和事件绑定：

<!-- pages/index/index.wxml -->

<view class="container">
  <view class="input-container">
    <input class="input" type="text" placeholder="请输入编号" bindinput="bindNumberInput" />
  </view>
  <view class="btn-container">
    <button class="btn" bindtap="search">查询</button>
  </view>
</view>

在 wxss 文件中编写页面样式：

/* pages/index/index.wxss */

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

.input-container {
  margin-bottom: 20px;
}

.input {
  width: 200px;
  height: 40px;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 0 10px;
}

.btn {
  width: 100px;
  height: 40px;
  background-color: #007aff;
  color: #fff;
  border: none;
  border-radius: 5px;
}

在 result 页面中，可以通过 wx.getStorageSync() 或者 wx.getStorage() 方法获取到查询结果，并在 onLoad 生命周期函数中进行展示：

// pages/result/result.js

Page({
  data: {
    result: ''
  },

  onLoad: function (options) {
    // 获取查询结果
    var result = wx.getStorageSync('result');

    this.setData({
      result: result
    });
  }
});

在 result 页面的 wxml 文件中展示查询结果：

<!-- pages/result/result.wxml -->

<view class="container">
  <view class="result">{{result}}</view>
</view>

在 result 页面的 wxss 文件中编写样式：

/* pages/result/result.wxss */

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

.result {
  font-size: 16px;
  color: #333;
}

以上是一个简单的示例，实际开发中可以根据需求进行适当修改和扩展

微信小程序开发代码实现输入编号点击按钮查询跳转到另外一页展示查询结果jsjsonwxmlwxss代码实现