带有样式的旅游调查表单微信小程序带有信息保存本地功能代码

以下是一个简单的带有样式的旅游调查表单微信小程序，并且包含了信息保存本地的功能代码：

1. 首先，在wxml文件中添加以下代码：

<!-- 调查表单 -->
<view class="form">
  <view class="form-item">
    <view class="form-label">姓名:</view>
    <input class="form-input" placeholder="请输入姓名" bindinput="bindNameInput"/>
  </view>
  <view class="form-item">
    <view class="form-label">性别:</view>
    <radio-group class="form-radio-group" bindchange="bindGenderChange">
      <label class="form-radio-label">
        <radio class="form-radio" value="male" checked="{{gender==='male'}}"/>
        <view class="form-radio-text">男</view>
      </label>
      <label class="form-radio-label">
        <radio class="form-radio" value="female" checked="{{gender==='female'}}"/>
        <view class="form-radio-text">女</view>
      </label>
    </radio-group>
  </view>
  <view class="form-item">
    <view class="form-label">年龄:</view>
    <input class="form-input" type="number" placeholder="请输入年龄" bindinput="bindAgeInput"/>
  </view>
  <view class="form-item">
    <view class="form-label">旅游目的地:</view>
    <checkbox-group class="form-checkbox-group" bindchange="bindDestinationChange">
      <label class="form-checkbox-label">
        <checkbox class="form-checkbox" value="beijing" checked="{{destination.indexOf('beijing')!==-1}}"/>
        <view class="form-checkbox-text">北京</view>
      </label>
      <label class="form-checkbox-label">
        <checkbox class="form-checkbox" value="shanghai" checked="{{destination.indexOf('shanghai')!==-1}}"/>
        <view class="form-checkbox-text">上海</view>
      </label>
      <label class="form-checkbox-label">
        <checkbox class="form-checkbox" value="guilin" checked="{{destination.indexOf('guilin')!==-1}}"/>
        <view class="form-checkbox-text">桂林</view>
      </label>
    </checkbox-group>
  </view>
  <button class="form-btn" bindtap="saveData">保存</button>
</view>

2. 在wxss文件中添加以下样式：

.form {
  display: flex;
  flex-direction: column;
  padding: 20rpx;
}

.form-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 20rpx;
}

.form-label {
  font-size: 28rpx;
  color: #333;
  margin-right: 20rpx;
}

.form-input, .form-radio-group, .form-checkbox-group {
  flex: 1;
  height: 60rpx;
  border: 1rpx solid #ccc;
  border-radius: 10rpx;
  padding: 0 20rpx;
}

.form-radio-label, .form-checkbox-label {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-right: 20rpx;
}

.form-radio {
  margin-right: 10rpx;
}

.form-checkbox {
  margin-right: 10rpx;
}

.form-radio-text, .form-checkbox-text {
  font-size: 28rpx;
  color: #333;
}

.form-btn {
  width: 100%;
  height: 80rpx;
  background-color: #3f88ff;
  color: #fff;
  font-size: 32rpx;
  border-radius: 10rpx;
  margin-top: 40rpx;
}

3. 在js文件中添加以下代码：

Page({
  data: {
    name: '',
    gender: 'male',
    age: '',
    destination: [],
  },

  // 姓名输入
  bindNameInput: function(e) {
    this.setData({
      name: e.detail.value,
    });
  },

  // 性别选择
  bindGenderChange: function(e) {
    this.setData({
      gender: e.detail.value,
    });
  },

  // 年龄输入
  bindAgeInput: function(e) {
    this.setData({
      age: e.detail.value,
    });
  },

  // 目的地选择
  bindDestinationChange: function(e) {
    this.setData({
      destination: e.detail.value,
    });
  },

  // 保存数据
  saveData: function() {
    wx.setStorageSync('formData', this.data);
    wx.showToast({
      title: '保存成功',
    });
  },
});

以上代码实现了一个简单的带有样式的旅游调查表单微信小程序，并且包含了信息保存本地的功能代码。在保存数据的函数中，我们使用了wx.setStorageSync方法将表单的数据存储在本地缓存中，并且使用了wx.showToast方法在保存成功后弹出一个提示框。