登录

小程序登录、用户信息相关接口调整说明官方

==getUserProfile 每次都会弹框 要保存用户信息==

// index.wxml
<van-button custom-class="button" round bindtap="getUserProfile" plain block>立即登录</van-button>


// index.js
    lifetimes: {
        created() {
            wx.login({
                success: (res) => {
                    // 发送 res.code 到后台换取 openId, sessionKey, unionId
                    this.code = res.code
                },
            })
        }
    },
    methods: {
        getUserProfile: function (e) {
            wx.getUserProfile({
                desc: '正在获取', //不写不弹提示框
                success: (res) => {
                    if (res.errMsg !== 'getUserProfile:ok') return
                    this.wxLogin(res.userInfo)
                },
                fail: (err) => {
                    console.log('获取失败: ', err)
                },
            })
        }
    }

  1. openId:用户唯一标识,appid+appSecret+code = openId + session_key
  2. unionId: 公众平台
  3. session_key: 会话密钥 session_key 是对用户数据进行 加密签名 的密钥
  4. access_token: access_token 是小程序全局唯一后台接口调用凭

request 封装

request.js

const dev = __wxConfig.envVersion // develop "开发版""  trial "体验版"  release "正式版"
const BASE_URL = dev === 'release' ? 'https://uni.forudesigns.com/api/v1' : 'https://minip.forudesigns.cn/api/v1'
import ErrorInterceptor from '../api/interceptor/on-response-error-interceptor'

// 同时发送异步代码的次数
let ajaxTimes = 0


function _request(method, url, data, retryTimes = 3) {
  // 显示加载中 效果
  wx.showLoading({
    title: "加载中",
    mask: true
  })
  return new Promise((resolve, reject) => {
    const token = wx.getStorageSync('token')
    ajaxTimes++
    wx.request({
      method,
      url: `${BASE_URL}/${url}`,
      header: {
        Accept: 'application/json',
        Authorization: token ? `Bearer ${token}` : ''
      },
      data,
      success: (res) => {
        const { data, statusCode } = res
        ajaxTimes--
        if (ajaxTimes === 0) {
          //  关闭正在等待的图标
          wx.hideLoading()
        }
        if (statusCode === 200 || statusCode === 201) {
          resolve(data)
        } else {
          ErrorInterceptor(res).catch(err => {
            reject(err)
          })
        }
      },
      fail: (err) => {
        ajaxTimes--
        if (ajaxTimes === 0) {
          //  关闭正在等待的图标
          wx.hideLoading()
        }
        reject(err)
        retryTimes--
        if (retryTimes > 0) return this._request(method, url, data, retryTimes)
      },
      complete: () => { }
    })
  })
}

export function $get(url, data) {
  return _request('GET', url, data)
}

export function $post(url, data) {
  return _request('POST', url, data)
}

export function $put(url, data) {
  return _request('PUT', url, data)
}

export function $delete(url, data) {
  return _request('DELETE', url, data)
}

/api

/api/interceptor

/api/respirce

/api/index

app.$api

组件化

使用 Component 构造器构造页面

//Component 构造器的主要区别是:方法需要放在 methods: { } 里面。
Component({
  data: {
    text: "This is page data."
  },
  methods: {
    onLoad: function(options) {
      // 页面创建时执行
    },
    onPullDownRefresh: function() {
      // 下拉刷新时执行
    },
    // 事件响应函数
    viewTap: function() {
      // ...
    }
  }
})

Component 构造器

Component({

  behaviors: [],

  // 属性定义(详情参见下文)
  properties: {
    myProperty: { // 属性名
      type: String,
      value: '',
       observer: function (data) {
        this.init(data)
      }
    },
    myProperty2: String // 简化的定义方式
  },

  data: {}, // 私有数据,可用于模板渲染

  lifetimes: {
    // 生命周期函数,可以为函数,或一个在methods段中定义的方法名
    attached: function () { },
    moved: function () { },
    detached: function () { },
  },

  methods: {

  }

})

通信

  1. 父子组件通信
props bindmyevent
  1. 页面间事件通信通道
wx.navigateTo({
  url: 'test?id=1',
  events: {
    // 为指定事件添加一个监听器,获取被打开页面传送到当前页面的数据
    acceptDataFromOpenedPage: function(data) {
      console.log(data)
    },
    someEvent: function(data) {
      console.log(data)
    }
    ...
  },
  success: function(res) {
    // 通过eventChannel向被打开页面传送数据
    res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
  }
})

//test.js
Page({
  onLoad: function(option){
    console.log(option.query)
    const eventChannel = this.getOpenerEventChannel()
    eventChannel.emit('acceptDataFromOpenedPage', {data: 'test'});
    eventChannel.emit('someEvent', {data: 'test'});
    // 监听acceptDataFromOpenerPage事件,获取上一页面通过eventChannel传送到当前页面的数据
    eventChannel.on('acceptDataFromOpenerPage', function(data) {
      console.log(data)
    })
  }
})

样式

组件样式隔离

Component({
  options: {
    styleIsolation: 'isolated'
  }
})

styleIsolation 选项从基础库版本 2.6.5 开始支持。它支持以下取值:

isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值);
apply-shared 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;
shared 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。(这个选项在插件中不可用。)

外部样式 ~ ^

例如,如果在页面 wxss 中定义了:

.blue-text {
  color: blue;
}
在这个组件中可以使用 ~ 来引用这个类的样式:

<view class="~blue-text"> 这段文本是蓝色的 </view>
如果在一个组件的父组件 wxss 中定义了:

.red-text {
  color: red;
}
在这个组件中可以使用 ^ 来引用这个类的样式:

<view class="^red-text"> 这段文本是红色的 </view>

上拉加载

onReachBottomDistance:100
onReachBottom()
is_last_page