uniapp功能实现

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

			},

正则

手机号

/^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; // 吸附位置

打开另一个小程序

uni.navigateToMiniProgram(OBJECT)

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>

可以左右滑动的分页

<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
			},
		}