最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • 微信小程序

    正文概述 掘金(luyanran)   2021-01-11   557

    1.1 默认登录页面

    entryPagePath 指定小程序的默认启动路径(首页),常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填,将默认为 pages 列表的第一项。不支持带页面路径参数。

    1.2 头部 去掉 json文件

    "navigationStyle":"custom"

    1.3 轮播顺序的问题

     属性 circular 	是否采用衔接滑动	
    

    1.3 防止多次提交

    创建一个公共的js问问文件用来存储公共的方法 until.js

    // 重复点击   
    function isClicked(self) {
      self.setData({
          isClicked: true,
    
      })
      console.log('111111')
      console.log(self.data.isClicked)
      setTimeout(function () {
          self.setData({
              isClicked: false
          })      
      console.log('22222')
      console.log(self.data.isClicked)
      }, 500)
    
      console.log('3333')
      console.log(self.data.isClicked)
    }
    //导出
    module.exports = { 
      isClicked: isClicked,
    }
    

    使用页面 index.wxml

    <button bindtap ="{{!isClick? 'submit':''}}">提交</button>
    

    index.js

     //导入变量
     var util = require('../../until.js');
     //使用方法
     submit(){
        util.isClicked(this);
      }
    

    1.4 使用页面加载的事件 配套停止加载事件

    创建一个公共的js问问文件用来存储公共的方法 until.js

      // 加载框 
      function showLoading(message) {
        if (wx.showLoading) {
            // 基础库 1.1.0 微信6.5.6版本开始支持,低版本需做兼容处理
            wx.showLoading({
                title: message,
                mask: true
            });
        } else {
            // 低版本采用Toast兼容处理并将时间设为20秒以免自动消失
            wx.showToast({
                title: message,
                icon: 'loading',
                mask: true,
                duration: 20000
            });
        }
      }
      // 隐藏加载框
      function hideLoading() {
        if (wx.hideLoading) {
            // 基础库 1.1.0 微信6.5.6版本开始支持,低版本需做兼容处理
            wx.hideLoading();
        } else {
            wx.hideToast();
        }
      }
     module.exports = {
      showLoading: showLoading, 
      hideLoading: hideLoading, 
    }
    

    使用页面

    //导入
     var util = require('../../until.js');
     
    

    在使用的方法请求的前面输入

     util.showLoading("加载中...");
    

    在使用方法的后面使用

    util.hideLoading();
    

    1.5 手机号校验

    创建一个公共的js问问文件用来存储公共的方法 until.js

    function isPhone(value) {
      if (!/^1(3|4|5|7|8)\d{9}$/.test(value)) {
          return false
      } else {
          return true
      }
    }
    
    //验证码六位数校验
    function isSixNum(value) {
      if (!/^\d{6}$/.test(value)) {
          return false
      } else {
          return true
      }
    }
    
    module.exports = { 
      isPhone:isPhone,
      isSixNum:isSixNum, 
    }
    

    使用页面 login.wxml

             <input type="number" placeholder="请输入手机号" placeholder-class="placeholderStyle" maxlength="11"
              value="{{phone}}" bindinput="phone" confirm-type="done" bindconfirm="submit"></input>
    

    login.js

      phone: function (e) {
        this.setData({ 
          phone: e.detail.value,
    
        });
      },
      
    

    使用的接口中

    手机号

     //phone 为文本框获取的手机号码
     var result = util.isPhone(phone);
    
    if (!result) {
      wx.showToast({
        title: '请输入正确的手机号',
        icon: 'none',
        duration: 1500,
      });
      return false;
    }
    

    验证码

    //获取验证码

    code: function (e) {
       util.isClicked(this);
       var phone = this.data.phone;
        if (phone == "") {
          wx.showToast({
            title: '请输入手机号',
            icon: 'none',
            duration: 1500,
          }); 
          return false;
        }
    	var result = util.isPhone(phone); 
        if (!result) {
          wx.showToast({
            title: '请输入正确的手机号',
            icon: 'none',
            duration: 1500,
          }); 
          return false;
        } 
    	 },
         
    

    1.6 下拉刷新加载当前页面

    创建一个公共的js问问文件用来存储公共的方法 until.js

        function getCurrentPageUrlWithArgs() {
            const pages = getCurrentPages()
            const currentPage = pages[pages.length - 1]
            const url = currentPage.route
            const options = currentPage.options
            let urlWithArgs = `/${url}?`
            for (let key in options) {
                const value = options[key]
                urlWithArgs += `${key}=${value}&`
            }
            urlWithArgs = urlWithArgs.substring(0, urlWithArgs.length - 1)
            return urlWithArgs
        }
           module.exports = { 
            progressiveLoad:progressiveLoad,
        } 
    

    使用页面

        onPullDownRefresh: function () {
          util.showLoading("刷新中...");
          let res = util.getCurrentPageUrlWithArgs();
          setTimeout(function () {
            wx.redirectTo({
              //加载页面地址
              url: res,
              success: function (res) {
                util.hideLoading();
                wx.stopPullDownRefresh();
              }
            })
          }, 1500);
        }
    

    1.3 微信动画

    1.1 index.wxml,一个helloworld,一个按钮

      <view class="container">
       <view class="usermotto" animation="{{ani}}">
        <text class="user-motto">{{motto}}</text>
       </view>
       <button bindtap='start'>动画</button>
      </view>
      
      
    

    1.2 index.wxss

    设计样式

     .usermotto {
       margin-top: 100px;
       border: solid;
      }
    

    1.3 index.js

    Page({
     data: {
      motto: 'Hello World',
     },
     start:function(){
      var animation = wx.createAnimation({
       duration: 4000,
       timingFunction: 'ease',
       delay: 1000
      });
      animation.opacity(0.2).translate(100, -100).step()
      this.setData({
       ani: animation.export()
      })
     }
    })
    
      duration: 动画持续多少毫秒
      timingFunction: “运动”的方式,例子中的 'ease'代表动画以低速开始,然后加快,在结束前变慢  
      delay: 多久后动画开始运行
    
      opacity(0.2) 慢慢变透明
    
      translate(100, -100) 向X轴移动100的同时向Y轴移动-100
    
      step(): 一组动画完成,例如想让上例中的HelloWorld向右上方移动并变透明后,再次向左移动50可以继续写 animation.translateX( -50).step() , 作用就是向右上方移动和变透明是同时进行, 这两种变化完成之后才会进行向左运行的一步。
    

    eg:淡入淡出

    默认图片的淡入淡出

    index.wxml

    <view class="logo" animation="{{animationData}}">
       <image src="{{logo}}"></image>
    </view> 
    <view class="button" animation="{{animationInput}}">
     <view class="input_div">
      <view class="input_content">
        <view class="content_list content_border">
          <view class="content_left">
            <image src="{{user}}"></image>
          </view>
          <view class="content_right">
            <input type="number" placeholder="请输入手机号" placeholder-class="placeholderStyle" maxlength="11"
              value="{{phone}}" bindinput="phone" confirm-type="done" bindconfirm="submit"></input>
          </view>
        </view>        
       </view>
      </view> 
     </view>
     
    

    index.js

     data: { 
      logo: "https://img.qiyuandi.com/images/5/wxxcxhjhoszwmjyj.jpg",
      user: "https://img.qiyuandi.com/images/5/wxxcx10aeo0btgtl.jpg",
      animationData: {},      
      animationInput:{},      
      phone: "",
    },
    
     // 执行方法
    showLogo: function () {
    //隐藏
        var animation = wx.createAnimation({
          duration: 0,
          timingFunction: 'linear',
        })
        animation.opacity(0).step();
        this.setData({
          animationData: animation.export()
        })
    //显示
        animation = wx.createAnimation({
          duration: 2000,
          timingFunction: 'linear',
        })
        animation.opacity(1).step()
        this.setData({
          animationData: animation.export()
        })
    //显示之后继续执行下一个方法
        setTimeout(()=>{
          this.showInput();
        },1000)
     },
     
     //从底部向上淡出
      showInput:function(){
          var animation = wx.createAnimation({
            duration: 2000,
            timingFunction: 'ease',
          })
          animation.translateY(-350).step();
          this.setData({
            animationInput: animation.export()
          })
     },
     
     
     
    

    起源地下载网 » 微信小程序

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元