基于wepy快速开发微信小程序,适合新手入门,集合n多工具!

基于wepy快速开发微信小程序,适合新手入门,集合n多工具!由小鱼微信小程序精心整理,并分享给大家。喜欢该资源的小伙伴请下载使用,注册、回复、每日签到、点赞送大量积分,满足您免费下载的愿望

从第一次发布成功到现在小程序又重新大改了一遍,集合n多小工具,武侯的猫终于迭代完了,这是一个练手项目,基本覆盖所有组件(echarts,video,canvas)。组件及交互效果借鉴了很多开源项目,基本按功能全部拆分出组件,主要是了解基本的一些写法,后期可能会把后端补上。


预览地址:基于wepy快速开发微信小程序,适合新手入门,集合n多工具!

一、滑动tab页
基于wepy快速开发微信小程序,适合新手入门,集合n多工具!  

[JavaScript]
<template>[/align]   <view class='mark' wx:if="{{showMark}}">     <view animation="{{animationData}}" class="animCat">       <image src="http://osk1hpe2y.bkt.clouddn.com/18-5-30/34559443.jpg"></image>     </view>     <button open-type="getUserInfo" lang="zh_CN" @getuserinfo="onGotUserInfo" class="css-button">开始吧!</button>   </view>   <!-- test-tab -->   <view>     <scroll-view scroll-x="true" class="tab-h" scroll-left="{{scrollLeft}}">       <view class="tab-item {{currentTab==0?'active':''}}" data-current="0" bindtap="swichNav">快递</view>       <view class="tab-item {{currentTab==1?'active':''}}" data-current="1" bindtap="swichNav">身份证</view>       <view class="tab-item {{currentTab==2?'active':''}}" data-current="2" bindtap="swichNav">银行卡号</view>       <view class="tab-item {{currentTab==3?'active':''}}" data-current="3" bindtap="swichNav">手机号码</view>       <view class="tab-item {{currentTab==4?'active':''}}" data-current="4" bindtap="swichNav">身材计算</view>     </scroll-view>     <swiper class="tab-content" current="{{currentTab}}" duration="300" bindchange="switchTab" style="height:{{winHeight}}rpx">       <!-- 快递查询 -->       <swiper-item wx:for="{{[0,1,2,3,4]}}" wx:key="*this">         <scroll-view scroll-y="true" class="scoll-h" wx:if="{{index==0}}">           <ForexpressItem :history.sync = 'history'></ForexpressItem>         </scroll-view>         <scroll-view scroll-y="true" class="scoll-h" wx:elif="{{index==1}}">            <PeoPleCard></PeoPleCard>         </scroll-view>         <scroll-view scroll-y="true" class="scoll-h" wx:elif="{{index==2}}">            <IdCard></IdCard>         </scroll-view>         <scroll-view scroll-y="true" class="scoll-h" wx:elif="{{index==3}}">            <MobileHome></MobileHome>         </scroll-view>         <scroll-view scroll-y="true" class="scoll-h" wx:elif="{{index==4}}">            <Figure></Figure>         </scroll-view>       </swiper-item>     </swiper>   </view>  </template>  <script> import wepy from 'wepy'; import ForexpressItem from '@/components/express/index' import IdCard from '@/components/querys/idCard' import Figure from '@/components/querys/figure' import MobileHome from '@/components/querys/mobileHome' import PeoPleCard from '@/components/querys/peoPleCard' import { formatTime } from '@/utils/util';  export default class Forexpress extends wepy.page {   config = {     navigationBarTitleText: '快递查询'   };   components = {     ForexpressItem,     IdCard,     Figure,     MobileHome,     PeoPleCard       }      data = {     showMark: false,     winHeight: '', //窗口高度     currentTab: 0, //预设当前项的值     scrollLeft: 0, //tab标题的滚动条位置,     searchArr:['快递','身份证','银行卡号','手机号码','身材'],     history:[]   };    methods = {     switchTab: function(e) {       let title = `${this.searchArr[e.detail.current]}查询`          wx.setNavigationBarTitle({         title: title       });       this.currentTab = e.detail.current;       this.$apply();       this.methods.checkCor.call(this);     },     // 点击标题切换当前页时改变样式     swichNav: function(e) {       let title = `${this.searchArr[e.detail.current]}查询`       wx.setNavigationBarTitle({         title: title       });       var cur = e.target.dataset.current;       if (this.data.currentTaB == cur) {         return false;       } else {         this.currentTab = cur;       }     },     //判断当前滚动超过一屏时,设置tab标题滚动条。     checkCor: function() {       if (this.data.currentTab > 3) {         this.scrollLeft = 300;       } else {         this.scrollLeft = 0;       }     },     onShareAppMessage() {       return {         title: '武侯的猫-打造最简小工具',         path: 'pages/forexpress',         success(res) {           console.log(res);         },         fail(res) {           console.log(res);         }       };     },     onGotUserInfo(e) {       if (e.detail.userInfo) {         this.showMark = false;         wx.setStorage({           key: 'user',           data: e.detail.userInfo         });       }     }   };   onLoad() {     let that = this;     //动画     var animation = wx.createAnimation({       duration: 1200,       timingFunction: 'linear'     });      this.animation = animation;      // animation.scale(2, 2).rotate(45).step()      this.setData({       animationData: animation.export()     });     try {       var res = wx.getSystemInfoSync();       //start       var clientHeight = res.windowHeight,               clientWidth = res.windowWidth,         rpxR = 750 / clientWidth;       var calc = (clientHeight - 1/rpxR*80)*rpxR;       console.log(calc);       this.winHeight = calc;       //end     } catch (e) {       console.log('获取设备信息失败' + e);     }   }    onShow() {     let self = this;     try {       var res = wx.getStorageSync('user');       console.log(res);       if (res) this.showMark = false;       if (!res) this.showMark = true;       self.$apply();     } catch (e) {       this.showMark = true;     }     //快递历史     this.history = wx.getStorageSync('saveList');     this.$apply();   } } </script>

二、wx-echarts

[AppleScript]
<template>   <view class="wrap">     <view class="container" >       <echarts  :ec="ec" />     </view>   </view> </template>  <script>   import wepy from 'wepy'   import Echarts from '../../components/echart';    export default class planT extends wepy.page {     config = {       navigationBarTitleText: '计划统计'     }      components = {       echarts: Echarts,     }      data = {         ec: {         option: {             backgroundColor: '#ffffff',             color: ['#37A2DA', '#FF9F7F'],             tooltip: {},             xAxis: {                 show: false             },             yAxis: {                 show: false             },             radar: {                 // shape: 'circle',                 indicator: [{                     name: '阅读',                     max: 500                 },                 {                     name: '运动',                     max: 500                 },                 {                     name: '学习',                     max: 500                 },                 {                     name: '游戏',                     max: 500                 },                 {                     name: '绘画',                     max: 500                 },                 {                     name: '休息',                     max: 500                 }                 ]             },             series: [{                 name: '计划 vs 实际',                 type: 'radar',                 data: [{                     value: [500, 500, 500, 500, 500, 500],                     name: '计划'                 },                 {                     value: [50, 50, 50, 50, 50, 50],                     name: '实际'                 }                 ]             }]         }     }     }     methods = {       goTo(path){         console.log(path)         this.$navigate(path)       },       showTitle(title){           wx.showToast({             title: title,             icon: 'none'           })       }     }

三、卡片式动画
基于wepy快速开发微信小程序,适合新手入门,集合n多工具!

四、加速器模仿微信手机摇一摇
基于wepy快速开发微信小程序,适合新手入门,集合n多工具!

五、video视频播放类
基于wepy快速开发微信小程序,适合新手入门,集合n多工具!

踩坑:video层级比较高,配合图片点击显隐来加载在scroll-view中

复杂的业务逻辑没有涉及,数据存储全部做了模拟提交提示,好吧,数据全部存在本地。

基于wepy快速开发微信小程序,适合新手入门,集合n多工具!

wxxcx-master.zip

1.45 MB, 下载次数: 43

源码

小鱼源码网www.51xyyx.com

轻松一刻:

今天女朋友带我去她闺蜜家玩。 大门一开,她闺蜜就跑过来拉着我的手对女朋友说:“来就来嘛,还带什么礼物,我又不是缺男人。”
本文章内容归小鱼源码网所有,未经允许私自转载者必将追究责任
小鱼源码下载网,商业源码,专业客服,质量保证 » 基于wepy快速开发微信小程序,适合新手入门,集合n多工具!

发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据

精品源码,商业服务,发布得积分,VIP免费下

开通会员 发布资源