1.登录获取手机号
// body中写入这个按钮
<button class="con_text" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">手机号：***</button>
// script的methods中写这个函数，获得code值，然后将code返回给后端，
// 后端会结合access_token + code得到手机号信息（phone_info）
getPhoneNumber(e) {
console.log(e.detail.code)
},
2.下拉刷新
pages.json
"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": "菜谱大全",
// 开启下拉刷新
"enablePullDownRefresh": true
}
},
{
"path": "pages/me/index",
"style": {
"navigationBarTitleText": "我的"
}
}
],
.vue
// 下拉刷新
onLoad: function(options) {
setTimeout(function() {
console.log('start pulldown');
}, 1000);
uni.startPullDownRefresh();
},
onPullDownRefresh() {
console.log('refresh');
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
}
3.上拉加载
// 上拉触底
onReachBottom: function () {
var that = this;
console.log(that)
}
4.图片上传
<view class="" @click="upload">
<image class="" :src="image" mode=""></image>
</view>
data() {
return {
iconcheck: 0, //头像是否改变
image: '../../../static/add.png' //默认头像
}
},
methods: {
upload() {
let _self = this;
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
sourceType: ['album'], //从相册选择
success: function(res) {
const tempFilePaths = res.tempFilePaths;
_self.image = tempFilePaths[0];
// console.log('tempFilePaths[0]', tempFilePaths[0]); //能够打印出选中的图片
console.log(_self.image);
_self.iconcheck = 1; //点击后图片更改状态由0变成1
uni.showLoading({
title:'图片上传中'
})
_self.touxiang(_self.image);
},
error: function(e) {
console.log(e);
}
});
},
// 拿到上传的图片路径
touxiang(path) {
console.log(path)
let token = uni.getStorageSync('storage_token');
console.log(token);
uni.uploadFile({
url: this.baseUrl + '/api/uploadFile',
method: 'POST',
formData: {
file: path
},
filePath: path,
name: 'file',
// header: {
// token: token
// },
success: res => {
uni.hideLoading()
uni.showToast({
title:'上传成功',
icon:'none'
})
// console.log(res.data);
// console.log(JSON.parse(res.data).code);
let img = JSON.parse(res.data).data.img_path;
// let img = res.data.data.img_path;
console.log(img);
uni.showToast({
title: JSON.parse(res.data).msg,
icon: 'none',
duration: 800
});
console.log("22222222222");
console.log(img);
this.shangChuanImg(img);
},
fail: (sma) => {
uni.hideLoading()
uni.showToast({
title:'上传失败，请检查网络情况',
icon:'none'
})
console.log(sma)
},
complete: () => {}
});
},
// 进行图片更新
shangChuanImg(img) {
var that = this;
// let token = uni.getStorageSync('storage_token');
// console.log(path);
uni.request({
url: this.baseUrl + '/api/portrait',
method: 'POST',
data: {
path: img
},
header: {
'content-type': 'application/x-www-form-urlencoded',
// token: token
},
success: res => {
console.log(res.data);
if (res.data.code == '200') {
uni.showToast({
title: res.data.msg,
icon: 'none',
duration: 800
});
that.userinfo();
} else {
uni.showToast({
title: res.data.msg,
icon: 'none',
duration: 800
});
return false;
}
},
fail: () => {},
complete: () => {}
});
},
}
5.图片预览
// An highlighted block
// 预览图片单张
previewImg(logourl) {
let _this = this;
let imgsArray = [];
imgsArray[0] = logourl
uni.previewImage({
current: 0,
urls: imgsArray
});
},
// 预览图片多张
previewImg(index) {
let _this = this;
let imgsArray = [];
for (let i = 0; i < this.imgUrlList.length; i++) {
if (this.imgUrlList[i].videoUrl == "") {
imgsArray.push(this.imgUrlList[i].imgUrl);
}
}
// #ifdef MP
uni.previewImage({
current: index - 1,
urls: imgsArray,
indicator: 'number',
loop: true
});
// #endif
// #ifndef MP
uni.previewImage({
current: index - 1,
urls: imgsArray,
indicator: 'number',
loop: true
});
// #endif
},
6. 打开另一个小程序
uni.navigateToMiniProgram(OBJECT)
7. tabs分页切换 + 上拉加载
<template>
<view class="">
<view class="">
<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color='#dc6027' @change="tabsChange"
:current="current" :bar-width='120'></u-tabs-swiper>
<swiper class="swiper u-flex-1" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
:duration="duration" :easing-function="easeInOutCubic" :current='swiperCurrent' @change="pageChange">
<!-- 副业发布 -->
<swiper-item class="h-full w-750">
<scroll-view scroll-y @scrolltolower="scrolltolower" style="overflow: auto;height: 100%;">
</scroll-view>
</swiper-item>
<!-- end -->
<!-- 闲置转卖 -->
<swiper-item class="w-750">
<scroll-view scroll-y @scrolltolower="scrolltolower" style="overflow: auto;height: 100%;">
</scroll-view>
</swiper-item>
<!-- end -->
</swiper>
</view>
</view>
</template>
<script>
export default {
components: {
},
data() {
return {
list: [{
name: '直接团队'
}, {
name: '间接团队'
}],
current: 0, // tabs组件的current值，表示当前活动的tab选项
swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
scrollTop: 0,
}
},
methods: {
// tabs通知swiper切换
tabsChange(index) {
this.swiperCurrent = index;
},
// swiper切换后告诉tabs切换
pageChange(index) {
this.current = index.detail.current
},
// scroll-view到底部加载更多
onreachBottom() {
var that = this;
console.log(that)
},
scroll(e) {
this.scrollTop = e.detail.scrollTop;
},
}
}
</script>
<style>
</style>
8. 可以左右滑动的分页
<u-tabs-swiper ref="tabs" :list="list" :is-scroll="false" active-color='#ED1616' @change="tabsChange"
:current="current"></u-tabs-swiper>
<swiper class="swiper u-flex-1" :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval"
:duration="duration" :easing-function="easeInOutCubic" :current='swiperCurrent' @change="pageChange">
<swiper-item class="h-full">
</swiper-item>
<swiper-item>
</swiper-item>
data() {
return {
keyword: "",
list: [{
name: '生活服务'
}, {
name: '闲置转卖'
}],
current: 0, // tabs组件的current值，表示当前活动的tab选项
swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
}
}
methods: {
// tabs通知swiper切换
tabsChange(index) {
this.swiperCurrent = index;
},
// swiper切换后告诉tabs切换
pageChange(index) {
this.current = index.detail.current
},
}
9. 微信小程序获取login解密信息
this.appid = "xxx";
this.secret = "xxx";
if (res.code) {
wx.request({
url: 'https://api.weixin.qq.com/sns/jscode2session?appid=' + this.appid +
'&secret=' + this.secret + '&js_code=' + res.code +
'&grant_type=authorization_code',
header: {
'content-type': 'json'
},
success: function(res) {}
})
}
10. uniapp解析微信步数
// WXBizDataCrypt.js
var crypto = require('crypto')
function WXBizDataCrypt(appId, sessionKey) {
this.appId = appId
this.sessionKey = sessionKey
}
WXBizDataCrypt.prototype.decryptData = function (encryptedData, iv) {
// base64 decode
var sessionKey = new Buffer(this.sessionKey, 'base64')
encryptedData = new Buffer(encryptedData, 'base64')
iv = new Buffer(iv, 'base64')
try {
// 解密
var decipher = crypto.createDecipheriv('aes-128-cbc', sessionKey, iv)
// 设置自动 padding 为 true，删除填充补位
decipher.setAutoPadding(true)
var decoded = decipher.update(encryptedData, 'binary', 'utf8')
decoded += decipher.final('utf8')
decoded = JSON.parse(decoded)
} catch (err) {
// throw new Error('Illegal Buffer')
}
// if (decoded.watermark.appid !== this.appId) {
// throw new Error('Illegal Buffer')
// }
return decoded
}
module.exports = WXBizDataCrypt
需要解析的步数文件
<script>
import WXBizDataCrypt from './WXBizDataCrypt.js'
//获取encryptedData（没有解密的步数）和iv（加密算法的初始向量）
getStepInfo: function(appid, session_key) {
let that = this
wx.getSetting({
success: function(res) {
// console.log(res);
// 未开启微信运动授权
if (!res.authSetting['scope.werun']) {
wx.showModal({
title: '提示',
content: '获取微信运动步数，需要开启计步权限',
success: function(res) {
if (res.confirm) {
//跳转去设置
wx.openSetting({
success: function(res) {}
})
} else {
//不设置
}
}
})
} else {
wx.getWeRunData({
success: function(res) {
var encryptedData = res.encryptedData;
var iv = res.iv;
var pc = new WXBizDataCrypt(appid, session_key);
var data = pc.decryptData(encryptedData, iv)
that.arr = data.stepInfoList.reverse()
wx.setStorageSync('bindList', data.stepInfoList.reverse())
that.loading = false
that.getUser()
},
fail: function(res) {
wx.showModal({
title: '提示',
content: '开发者未开通微信运动，请关注“微信运动”公众号后重试',
showCancel: false,
confirmText: '知道了'
})
}
})
}
}
})
},
</script>
正则
手机号
/^1(3|4|5|6|7|8|9)\d{9}$/
// 或者
/^1[3456789]d{9}$/
邮箱
// 举例：zhangsan-001@gmail.com
/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
// 杨元庆001Abc@lenovo.com.cn
^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$
身份证号
/(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}$)/
吸附
css样式：
position: sticky; // 定位方式粘粘（吸附）
top:100rpx; // 吸附位置
扫一扫
658
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
