山东大学项目实训——地图圈系统——微信小程序（11）

一、系统设置

为了增加用户体验感，在微信程序中增加了系统设置以及系统信息功能。系统设置可以检测小程序是否支持NFC，可以设置当前的亮度以及可以设置是否保持常亮。算是一个小小的附加功能吧。

二、项目代码

setting_index.wxml文件：

<!--pages/setting_index/setting_index.wxml-->
<navBar 
    title-text="系统设置" 
    back-icon="../../src/images/back@3x.png"

    background="#f2f2f2"
    bindback="back"/>
 <!-- 小工具 -->
 <view class='setting'>
 <view class='t'>
      <view class='title'>
        <view>小工具</view>
      </view>
      <view class='content sub'>
        <view class='subtitle'>NFC</view>
        <view class='item' catchtap='getHCEState'>
          <view>检测是否支持NFC</view>
          <image class='more' src='/img/arrow.png'></image>
        </view>
      </view>
      <view class='content sub'>
        <view class='subtitle'>屏幕亮度</view>
        <view class='item'>
          <view>
            <view>当前屏幕亮度</view>
            <view class='tip'>范围0~100，0 最暗，100 最亮</view>
          </view>
          <view>{{screenBrightness}}</view>
        </view>
        <view class='item' catchtap='setScreenBrightness'>
          <view style='width:100%'>
            <view>设置屏幕亮度</view>
            <slider value='{{screenBrightness}}' min='0' max='100' step='1' block-size='12' block-color='#40a7e7' activeColor='#40a7e7' show-value='true' bindchange='screenBrightnessChanging' bindchanging='screenBrightnessChanging'></slider>
          </view>
          <!-- <view>设置屏幕亮度</view> -->
        </view>
        <view class='item'>
          <view>
            <view>保持常亮</view>
            <view class='tip'>仅在当前小程序、当次生效，离开小程序后设置失效</view>
          </view>
          <switch color='#40a7e7' bindchange='switchChange' data-switchparam='keepscreenon' checked='{{keepscreenon}}'></switch>
        </view>
      </view>
      <view class='content sub'>
        <view class='subtitle'>系统信息</view>
        <view class='item'catchtap='getsysteminfo'>
          <view>
            <view>查看系统信息</view>
          </view>
          <image class='more' src='/img/arrow.png'></image>
        </view>
      </view>
    </view>
  </view>

setting_index.wxss文件：

.setting {
  font-size: 28rpx;
  color: #666;
}
.more {
  width: 32rpx;
  height: 32rpx;
}
.item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
}
.sub.content .item {
  padding-left: 20rpx;
}
.item .right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.item .tip {
  font-size: 22rpx;
  color: #999;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.item .tip image {
  width: 24rpx;
  height: 24rpx;
  margin-right: 10rpx;
}
.item slider {
  width: 100%;
  margin: 0;
}
.title {
  font-size: 32rpx;
  color: #40a7e7;
  margin: 26rpx 0;
}
.subtitle {
  font-size: 28rpx;
  color: #40a7e7;
}
.toast .mask {
  position: fixed;
  z-index: 9;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: rgba(0, 0, 0, .5);
}
.toast .wrapper {
  position: fixed;
  z-index: 10;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  background: #fff;
  font-size: 24rpx;
  color: #333;
  width: 60%;
  height: 400rpx;
  border-radius: 14rpx;
  padding: 46rpx 28rpx;
}
.toast .box {
  height: 400rpx;
  overflow: scroll;
}
.t {
  overflow: hidden;
  padding: 0 40rpx;
  background: #fff;
  margin-bottom: 20rpx;
}
.toast .t {
  font-size: 28rpx;
  color: #40a7e7;
  margin: 20rpx 0;
  padding: 0;
}
.toast .content {
  line-height: 1.8em;
  text-align: justify;
}
.toast .content text {
  display: block;
  margin-bottom: 10rpx;
}

setting_index.js文件：

let utils = require('../../utils/utils')
Page({
  data: {
    setting: {},
    show: false,
    screenBrightness: '获取中',
    keepscreenon: false,
    SDKVersion: '',
    enableUpdate: true,
    indexPage: {},
  },

  
  hide () {
    this.setData({
      show: false,
    })
  },

  onShow () {
    let pages = getCurrentPages()
    let len = pages.length
    let indexPage = pages[len - 2]
    // 不能初始化到 data 里面！！！！
    this.setData({
      keepscreenon: getApp().globalData.keepscreenon,
      indexPage,
    })

    this.getScreenBrightness()
    wx.getStorage({
      key: 'setting',
      success: (res) => {
        let setting = res.data
        this.setData({
          setting,
        })
      },
      fail: (res) => {
        this.setData({
          setting: {},
        })
      },
    })
  },

  getHCEState () {
    wx.showLoading({
      title: '检测中...',
    })
    wx.getHCEState({
      success: function (res) {
        wx.hideLoading()
        wx.showModal({
          title: '检测结果',
          content: '该设备支持NFC功能',
          showCancel: false,
          confirmText: '朕知道了',
          confirmColor: '#40a7e7',
        })
      },
      fail: function (res) {
        wx.hideLoading()
        wx.showModal({
          title: '检测结果',
          content: '该设备不支持NFC功能',
          showCancel: false,
          confirmText: '朕知道了',
          confirmColor: '#40a7e7',
        })
      },
    })
  },
  getScreenBrightness () {
    wx.getScreenBrightness({
      success: (res) => {
        this.setData({
          screenBrightness: Number(res.value * 100).toFixed(0),
        })
      },
      fail: (res) => {
        this.setData({
          screenBrightness: '获取失败',
        })
      },
    })
  },
  screenBrightnessChanging (e) {
    this.setScreenBrightness(e.detail.value)
  },
  setScreenBrightness (val) {
    wx.setScreenBrightness({
      value: val / 100,
      success: (res) => {
        this.setData({
          screenBrightness: val,
        })
      },
    })
  },
  setKeepScreenOn (b) {
    wx.setKeepScreenOn({
      keepScreenOn: b,
      success: () => {
        this.setData({
          keepscreenon: b,
        })
      },
    })
  },
  getsysteminfo () {
    wx.navigateTo({
      url: '/pages/system/system',
    })
  },


})

三、效果展示

点击系统设置：



查看系统信息功能正在开发。。。。。。