微信小程序开发之路⑦

内存监控 & 一键复制

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //监控内存的警告
    wx.onMemoryWarning(()=>{
      console.log('内存警告')
      //清空缓存
      wx.clearStorage();

      wx.showToast({
        title: '玩的太久啦，手机顶不住了！',
      })
    })
  }

// 一键复制
<view class='container'>
  <text>{{detail}}</text>
  <button bindtap='copyTBL'>一键复制</button>
  <button bindtap='show'>显示</button>
</view>


// pages/clipboard/clipboard.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    detail:'窗前明月光，疑是地上霜，举头望明月，低头思故乡'
  },
  /**
   * 复制放入剪切板
   */
  copyTBL(){
    let that = this
    wx.setClipboardData({
      data: this.data.detail,
      success(res){
        // wx.showModal({
        //   title: '提示',
        //   content: '复制成功',
        //   showCancel:false
        // })
      }
    })
  },
  /**
   * 显示
   */
  show(){
    wx.getClipboardData({
      success(res){
        console.log(res)
      }
    })
  },
})

系统振动、用户截屏、添加联系人

用户截屏
wx.onUserCaptureScreen(CALLBACK)

设备-振动
wx.vibrateLong(OBJECT)

设备-手机联系人
wx.addPhoneContact(OBJECT)

;<view class="container">
    <view class="page-section">
        <view class="page-title">[用户截屏]</view>
        <text>{{ userCaptureScreen }}</text>
    </view>
    <view class="page-section">
        <view class="page-title">[设备振动]</view>
        <button bindtap="virateLong">使用手机发生较长时间的振动</button>
        <button bindtap="vibrateShort">使用手机发生较短时间的振动</button>
        <button bindtap="sliderchange">保持屏幕常亮</button>
    </view>
    <view class="page-section">
        <view class="page-title">[用户手机联系人]</view>
        <button bindtap="addPhoneContact">添加手机联系人</button>
    </view>
</view>

// pages/index/index.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        userCaptureScreen: '用户没有截屏',
    },
    /**
     * 生命周期函数--监听页面显示
     */
    onShow: function () {
        //监测用户截屏
        wx.onUserCaptureScreen(() => {
            this.setData({
                userCaptureScreen: '用户截屏了！',
            })
        })
    },
    /**
     * 长时间振动
     */
    virateLong() {
        wx.vibrateLong({})
    },
    /**
     * 短时间振动
     */
    vibrateShort() {
        wx.vibrateShort({})
    },
    /**
     * 保持屏幕常亮
     */
    sliderchange() {
        wx.setKeepScreenOn({
            keepScreenOn: true,
        })
    },
    /**
     * 添加手机联系人
     */
    addPhoneContact() {
        wx.addPhoneContact({
            firstName: '张三',
            nickName: 'zangsan',
            remark: '程序员',
            mobilePhoneNumber: '13938271434',
            email: '154543234@qq.com',
        })
    },
})

电量监控、系统电话

电量监控：

获取设备电量。

同步 API wx.getBatteryInfoSync

wx.getBatteryInfo 的同步版本在 iOS 上不可用

系统电话：
通过 wx.makePhoneCall 打电话

;<view class="container">
    <view class="page-section">
        <view class="page-section-title">电量监控</view>
        <view class="page-section-area">
            <view>当前电量值：{{ level }}</view>
            <view>是否在充电：{{ isCharging }}</view>
            <progress percent="{{level}}" show-info active></progress>
        </view>
    </view>
    <view class="page-section">
        <view class="page-section-title">系统电话</view>
        <view class="page-section-area">
            <form bindsubmit="formCallPhone">
                <input placeholder="电话号码" name="phoneNumber"></input>
                <button bindtap="callPhone" form-type="submit">
                    拨打电话
                </button>
            </form>
        </view>
    </view>
</view>

// pages/index/index.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        level: '',
        isCharging: '',
    },
    /**
     * 拨打电话
     */
    formCallPhone(e) {
        let phone = e.detail.value.phoneNumber || ''
        if (phone === '') {
            wx.showModal({
                title: '提示',
                content: '电话没有填写',
                showCancel: false,
            })
            return
        }
        wx.makePhoneCall({
            phoneNumber: phone,
        })
    },
})

手机感应器

;<view class="messageView">
    屏幕朝向：
    <text class="text">{{ screen }}</text>
    <view class="messageView">当前为alpha:{{ alpha }}</view>
    <button type="primary" bindtap="startScreenClick">
        开始监听
    </button>
    <button type="primary" bindtap="endScreenClick">
        结束监听
    </button>
</view>

// pages/index/index.js
Page({
    /**
     * 页面的初始数据
     */
    data: {
        screen: '正面',
        alpha: 0,
    },
    /**
     * 开始监听
     */
    startScreenClick() {
        wx.startDeviceMotionListening({
            success(res) {
                console.log(res)
            },
        })
    },
    /**
     * 结束监听
     */
    endScreenClick() {
        wx.stopDeviceMotionListening({
            success: function (e) {
                console.log(e)
            },
            fail(e) {
                console.log(e)
            },
        })
    },
    /**
     * 生命周期函数--监听页面加载
     */
    onLoad: function (options) {
        let that = this
        /**
         * alpha number 当手机坐标X/y和地球x/y重合时候，绕着Z轴转动的角度为alpha,范围值在[0,2*PI),转动逆时针为正转
         */
        wx.onDeviceMotionChange((res) => {
            let screen = '正面'
            let alpha = parseFloat(res.alpha)
            if (alpha > 45 && alpha < 136) {
                screen = '左侧'
            } else if (alpha > 225 && alpha < 316) {
                screen = '右侧'
            } else if (alpha > 135 && alpha < 226) {
                screen = '反面'
            } else {
                screen = '正面'
            }
            //数据绑定到data
            that.setData({
                screen: screen,
                alpha: alpha,
            })
        })
    },
})

设置动态导航物条

<view class='container'>
<view class='page-body' hidden='{{!showHidden}}'>
  <view class='page-section'>
    <view>动态设置导航条</view>
    <input bindinput='showNavigator' placeholder='请输入'></input>
    <button bindtap='setNavigationBarTite'>设置导航条</button>
    {{contentShow}}
  </view>
</view>
</view>


  /**
   * 动态这是导航条
   */
  setNavigationBarTitle(){
      let that = this
      wx.showNavigationBarLoading();
      wx.setNavigationBarTitle({
        title: '用户正在输入...',
      })
      wx.setNavigationBarColor({
        frontColor: 'black',
        backgroundColor: '#ccc',
      })
      setTimeout(()=>{
        wx.setNavigationBarTitle({
          title: '我的微信',
        }),
        that.setData({
          contentShow:'新内容'
        })
        wx.hideNavigationBarLoading()
      },3000)

  },