微信小程序-other

1. 了解的是屏幕中的元素组成

微信提供的单位是px,需要转换成rpx,方便做适配


     let systemInfo = wx.getSystemInfoSync()
	  // px转换到rpx的比例
      let pxToRpxScale = 750 / systemInfo.windowWidth;
      // 状态栏的高度
      let ktxStatusHeight = systemInfo.statusBarHeight * pxToRpxScale
      // 导航栏的高度
      let navigationHeight = 44 * pxToRpxScale
      // window的宽度
      let ktxWindowWidth = systemInfo.windowWidth * pxToRpxScale
      // window的高度
      let ktxWindowHeight = systemInfo.windowHeight * pxToRpxScale
      // 屏幕的高度
      let ktxScreentHeight = systemInfo.screenHeight * pxToRpxScale
      // 底部tabBar的高度
      let tabBarHeight = ktxScreentHeight - ktxStatusHeight - navigationHeight - ktxWindowHeight

 

 

2. 微信小程序wx.request的简单封装

1. 新建一个request类，对wx.request进行简单封装
在request类里做了以下几件事:

 

• 在构造函数里创建默认请求的http header，可以在header里配制一些内容，在对应请求方法中如果没有设置header参数，就使用此默认header参数；
• 以get post delete put等方法对request进行封装，在发起网络请求不需要重复的写wx.request({method:xxx})这些代码，只要调用getRequest、postRequest等方法就可以了；
• 在rquest的结果返回处理函数success中，判定服务端返回的状态代码，对于200状态代码的按业务处理成功处理，对于非200的状态码按异常处理。
• 预留统一异常处理函数处理接口，可以通过setErrorHandler来设置统一的异常处理，这样对于一些可以统一处理的异常就不用在业务页面里去重复处理了，例如后端返回401的代码，就可以统一转到登录页面让用户登录了；
• 此request不限定服务提供都，可以是自己开发的业务服务端，也可以用于第三方服务的调用；

/**
 * name: api.js
 * description: request处理基础类
 */
class request {
  constructor() {
    this._header = {}
  }

/**
 * 设置统一的异常处理
 */
  setErrorHandler(handler) {
    this._errorHandler = handler;
  }

  /**
   * GET类型的网络请求
   */
  getRequest(url, data, header = this._header) {
    return this.requestAll(url, data, header, 'GET')
  }

  /**
   * DELETE类型的网络请求
   */
  deleteRequest(url, data, header = this._header) {
    return this.requestAll(url, data, header, 'DELETE')
  }

  /**
   * PUT类型的网络请求
   */
  putRequest(url, data, header = this._header) {
    return this.requestAll(url, data, header, 'PUT')
  }

  /**
   * POST类型的网络请求
   */
  postRequest(url, data, header = this._header) {
    return this.requestAll(url, data, header, 'POST')
  }

  /**
   * 网络请求
   */
  requestAll(url, data, header, method) {
    return new Promise((resolve, reject) => {
      wx.request({
        url: url,
        data: data,
        header: header,
        method: method,
        success: (res => {
          if (res.statusCode === 200) {
            //200: 服务端业务处理正常结束
            resolve(res)
          } else {
            //其它错误，提示用户错误信息
            if (this._errorHandler != null) {
            //如果有统一的异常处理，就先调用统一异常处理函数对异常进行处理
              this._errorHandler(res)
            }
            reject(res)
          }
        }),
        fail: (res => {
          if (this._errorHandler != null) {
            this._errorHandler(res)
          }
          reject(res)
        })
      })
    })
  }
}

export default request

 

2. 新建一个agriknow类
在agriknow里面做了以下几件事：

• 实现所有业务服务调用，如查询所有新闻列表【getNews】，查询所有课程列表【getCourseList】；
• 实现统一的异常处理，并传给request；
• 将服务端返回的结果response转成response.data回传给API调用的地方；

/**
 * name: agriknow.js
 * description: 农知汇服务器提供的服务
 */
import request from './request.js'
class agriknow {
  constructor() {
    this._baseUrl = 'https://apis.xxx.xxx.com/dev/apis/train/v1/'
    this._defaultHeader = { 'Content-Type': 'application/json' }
    this._request = new request
    this._request.setErrorHandler(this.errorHander)
  }

  /**
   * 统一的异常处理方法
   */
  errorHander(res) {
    console.error(res)
  }

  /**
   * 查询所有新闻列表
   */
  getNews(page = 1, size = 10) {
    let data = { page: page, size: size }
    return this._request.getRequest(this._baseUrl + 'news/client', data).then(res => res.data)
  }

  /**
   * 获取所有课程
   */
  getCourseList(page = 1, size = 10, key = null) {
    let data = key != null ? { page: page, size: size, queryValue: key } : { page: page, size: size }
    return this._request.getRequest(this._baseUrl + '/course/mobile', data).then(res => res.data)
  }
}
export default agriknow

3. 函数的调用

 

在app中引用argriknow

import agriknow from './apis/agriknow.js'
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

 

定义一个类型为agriknow的属性并实例化

import agriknow from './apis/agriknow.js'
App({
  onLaunch: function () {
    // 展示本地存储能力
    var logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

  },
  agriknow:new agriknow()
})

 

在Page里调用

const app = getApp();
Page({
  data: {
    courseData: [],
    page: 1,
    size: 10,
    total: 0
  },
  onLoad: function () {
    wx.startPullDownRefresh()
    this.getdataList();
  },
  //查询课程列表
  getdataList() {
    app.agriknow.getCourseList(this.data.page++, this.data.size, '')
      .then(res => {
        wx.stopPullDownRefresh()
        let list = this.data.page > 2 ? this.data.courseData.concat(res.list) : res.list
        this.setData({
          courseData: list
        })
      })
      .catch(res => {
        wx.stopPullDownRefresh()
        wx.showToast({
          title: '出错了！',
          icon: 'none'
        })
      })
  },
  //下拉刷新
  onPullDownRefresh() {
    console.log("下拉刷新");
    this.getdataList();
  },
})

 

 

3. blog

https://www.cnblogs.com/viaiu/p/9935602.html
https://blog.csdn.net/weixin_39939012/article/details/84714093

 

4. 定义轮播图swiper dots默认样式

wxml

<view class="swiper-container">
  <swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">
    <block wx:for="{{imgUrl}}" wx:key="unique">
      <swiper-item>
        <image src="{{item}}" class="img"></image>
      </swiper-item>
    </block>
  </swiper>
 
  <view class="dots">
    <block wx:for="{{imgUrl}}" wx:key="unique">
      <view class="dot{{index == swiperCurrent ? ' active' : ''}}"></view>
    </block>
  </view>
</view>

wxss

.swiper-container{
  position: relative;
}
.swiper-container .swiper{
  height: 300rpx;
}
.swiper-container .swiper .img{
  width: 100%;
  height: 100%;
}
.swiper-container .dots{
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20rpx;
  display: flex;
  justify-content: center;
}
.swiper-container .dots .dot{
  margin: 0 8rpx;
  width: 14rpx;
  height: 14rpx;
  background: #fff;
  border-radius: 8rpx;
  transition: all .6s;
}
.swiper-container .dots .dotactive{
  width: 24rpx;
  background: #f80;
}

js

data: {
imgUrl: [
  // 里面写图片地址
 'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
 'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
 'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
swiperCurrent: 0,
},

swiperChange:function(e){

this.setData({

swiperCurrent: e.detail.current  // current 改变时会触发 change 事件

    })
}