登录
==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)
},
})
}
}
- openId:用户唯一标识,appid+appSecret+code = openId + session_key
- unionId: 公众平台
- session_key: 会话密钥 session_key 是对用户数据进行 加密签名 的密钥
- 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: {
}
})
通信
- 父子组件通信
props bindmyevent
- 页面间事件通信通道
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