2018-08-21 10:27:05 m0_37852904 阅读数 300
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27761 人正在学习 去看看 秦子恒
出现的问题

我们在开发移动端的时候,往往会有外跳项目的链接,而在外跳的页面进行操作返回后,本页面就需要进行数据的更新和判断操作

错误的思路

1.在中跳页面监听页面的返回键事件;

window.addEventListener('pageshow', function(event) {
    if (event.persisted) {
        更改数据操作
    }    // 如果检测到页面是从“往返缓存”中读取的
});

结果:监听不到返回键的事件
2.在外跳项目的时候建立一个缓存,之后在需要修改的页面进行缓存的读取更改数据;
结果:读取不到缓存,因为缓存的存放和读取不在同一个地方(读取的是本地缓存,而建立缓存被存放到浏览器缓存中了)

正确key

总结思维:既然我们不能对跳转时的操作和中跳页面操作时,那只剩下对原页面进行操作了。即每次进入页面就进行区分

$(function(){
        if ((/iphone|ipod|ipad.*os 5/gi).test(navigator.appVersion)) {
        // 这里是ios机型的判断
            window.onpageshow = function(event) {
                var isOrder = getCookie('isOrder');
                if (event.persisted) {
                    // 跳转操作成功后的返回操作
                }else {
                    if (isOrder == 'true') {
                        setCookie('isOrder',false);
                        // 跳转的启动时候建立缓存

                        // 这里是为了跳转后半路返回的操作
                    }else {
                    }
                }

            };
        }
        else {
            var e=$("#refreshed");
            if(e.val() == "no") {
                e.val('yes');
            }else{
                e.val('no');
                // 在这进行android的操作
            }
        }
    });

html:

<input type="hidden" id="refreshed" value="no">

希望对各位能有点小帮助~~~~

2020-01-14 14:12:07 random720 阅读数 2
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27761 人正在学习 去看看 秦子恒

项目中需要建设微信公众号平台,平台中需要用地图做一些展示功能,考虑使用开源地图框架openlayers5,将相关问题做简要记录。

通过百度地图控制中心申请百度地图浏览器端token(备用)。

1、首先测试地图加载和交互功能。

测试平台:微信开发工具以及Android系统真机

测试结果:正常

2、测试矢量图层加载,矢量数据加载,图标点击交互及进一步操作等功能

3、开发实时视频预览,热力时序变化动图等功能

2017-11-13 15:26:36 u012411480 阅读数 3407
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27761 人正在学习 去看看 秦子恒

 

自动滚动指定位置显示不准确 

我的 scroll-view自动滚动,应该滚动到底部最后一个元素roll29, 但是滚动到roll21,其他的都被遮挡了。因为我是加载一天的历史记录,所以有可能一次性加载很多数据,这样自动刷新就存在问题了。
因此要想自动滚动性能好显示正常:(1)不能一次性setData 过多数据 (2) 不能频繁setData   


2019-09-04 13:47:10 dengyao46395665 阅读数 53
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27761 人正在学习 去看看 秦子恒

本文将讲述vue-cli+vux-scroller实现移动端的上拉加载功能:

纠错声明:网上查阅资料看到很多人都将vux和vuex弄混,在这里我们先解释一下,vuex是vue框架自带的组件,是数据状态管理工具,vux是一款移动端的UI组件库;

vux(官方文档:https://doc.vux.li/zh-CN/)是基于WeUi和vue(2.x)开发的移动端的UI组件库,主要服务于微信页面。基于webpack+vue-loader+vux可以快速开发移动端页面,配合vux-loader方便你在WeUi的基础上定制需要的样式。vux-loader保证了组件按需使用,因此不用担心最终打包了整个vux的组件库代码。vux并不完全依赖于WeUi,vux在WeUi的基础上扩展了多个常用组件,但是尽量保持整体UI样式接近WeUi的设计规范。

首先我们需要安装vux的依赖包,命令如下:

      npm install vux --save  

官方文档声明了vux必须配合vux-loader一起使用,所以我们需要在build/webpack.base.conf.js里参照如下代码进行配置:

const vuxLoader = require('vux-loader')
const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig

module.exports = vuxLoader.merge(webpackConfig, {
  plugins: ['vux-ui']
})

在这里插入图片描述

vux的Scroller组件为我们提供了上拉加载和下拉刷新等功能,虽然官方文档已经声明了不再更新此组件,但是目前的版本基本满足于我们的日常开发,所以还是可以使用的;

我们在组件中使用的时候是需要引入对应组才能进行使用的;

import { Scroller  } from 'vux'

HTML视图层代码:

  //height是设置滚动区域高度,vux对该组件声明的不够详细,多次调试-170是可以使用,如有更好的算法或者理解欢迎跟博主沟通交流
  //on-scroller-bottom  滚动事件  这个事件在滚动的时候会进行多次触发
  //scroll-bottom-offst  在底部什么位置触发事件,这里配置的是距离底部200px的地方滑动就可以触发
  //ref 给scroller组件添加ref方便操作DOM,这是个小技巧,后面会用到
 <scroller  height="-170" lock-x  @on-scroll-bottom="onScrollBottom" :scroll-bottom-offst="200" ref="scrollerBottom">
  //scroller标签内部必须包裹一层div,小技巧,不然会出现滑不到底部的问题
  // 这个div的高度必须要高于底部滚动区域的高度,不然滚动不了
    <div>
      <p>滚动内容区域</p>
    </div> 
    
    //这个div是展示提示信息的
    <div>
    <div id="title" style="width:100%;text-align:center;height:30px;ling-height:30px;margin-top:20px;">上拉加载更多</div>
    </div>
 </scroller>

js数据逻辑层代码:

    // 上拉加载滑动的方法
    onScrollBottom () {
    //onFetching是个状态变量,默认值设为false来进行控制触发事件及更改提示信息
      if (this.onFetching) {
      } else {
    //默认值onFetching为false,所以提示信息首先就是加载中,我们这里用的是原生的DOM操作方法
        document.getElementById("title").innerHTML="加载中...";
     //onFetching赋值为true,下次触发的时候会触发onFetching为true的情况
        this.onFetching = true;
        setTimeout(() => {
       //此处的pageNum是当前页码,默认为1,每滑动一次都this.pageNum++然后传入参数调用接口
            this.pageNum+=1;
            this.$nextTick(() => {
            this.$refs.scrollerBottom.reset()
          })
        //后台请求接口
            this.$http({
              url:"traderecords/getPersonTradDetail",
              method:"get",
              params:{
                  pageSize:10,
          //动态的给pageNum赋值,保证每次的参数都不一样,后台传过来的数据也不一样
                  pageNum:this.pageNum,
                  brandId:this.$route.query.brandId,
                  date:this.value2
              }
          }).then((res)=>{  
              console.log(res.data.data.rowMaps);
        //如果接口请求成功
              if(res.data.code==200){
          //接口请求成功并且返回的数组的长度<10不够一页的时候
                if(res.data.data.rowMaps.length<10){
          // end是控制提示信息的,不触发滑动的时候是不展示的,默认值为false
                  this.end=true;
          //返回的数组长度不够一页的时候提示信息修改为没有更多数据
                 document.getElementById("title").innerHTML="没有更多数据了...";
                //  当数组长度小于10时,该方法禁用
                  this.$refs.scrollerBottom.disablePullup() ;
                }
                else{
          //否则提示信息为加载成功
                  document.getElementById("title").innerHTML="加载成功";
                }
            //dataList是我声明的空数组,用concat方法把新数组和后台返回的数据进行拼接然后重新赋值给dataList,这个是关键
                   this.dataList=this.dataList.concat(res.data.data.rowMaps);
                   console.log(this.dataList); 
            //加载成之后提示信息改为上拉加载更多
                   document.getElementById("title").innerHTML="上拉加载更多";
              }
          //再把onFetching的状态值改为false
              this.onFetching = false  
          })
            
        }, 500)
      }
    },

到这里,我们的上拉加载功能就实现了,一般情况下上拉加载是和下拉刷新一起用的,vux都给我们提供了组件,由于项目需要暂时只用到了上拉加载,代码看似很多,其实不是很复杂;

2016-05-10 15:23:49 nevermad 阅读数 4059
  • 微信支付开发-微信公众号开发12-微信开发php

    微信公众平台开发之微信支付开发是子恒老师《微信公众平台开发》视频教程的第12部。详细讲解了用php进行微信支付的开发。内容包含获取支付密钥,微信公众号支付开发,扫码支付,微信刷卡支付,异步处理支付结果等等。欢迎反馈,微信/QQ:68183131

    27761 人正在学习 去看看 秦子恒

<span style="font-family: Arial, Helvetica, sans-serif; background-color: rgb(255, 255, 255);">最近在微信中做一个应用,要用到滚动刷新功能,先找了个iscroll4,配合一个辅助类用的还不错,但是在android下面很卡,于是换iscroll5,结果各种坑啊,上网搜索了一下,发现这位仁兄的文章http://blog.csdn.net/cdnight/article/details/44963063,运行了一下能跑起来,但还是有问题,我总结了一下,把一些经验和大家分享一下:</span>

1.在手机微信中click事件无效

       这是由于iscroll5屏蔽了事件冒泡,如果简单的的允许事件冒泡,那么在微信中下拉就会出现微信自带下拉效果,你的自定义事件就失效了,正确方法是在option里面设置

preventDefaultException: { tagName: /^(P|B|H1|H2|DIV|A|INPUT|TEXTAREA|BUTTON|SELECT)$/ }

,这P|B|H1|H2|DIV|A就是我加的,试一试,ok!

2.下拉后没有loading效果

      我没找到文档如何设置这个,直接修改的源码,找到resetPosition函数加上一段

 

		if ( !this.hasVerticalScroll || this.y >= 60 ) {
			y = 60;
		} else if (this.y>0 && this.y < 60) {
		    y = 0;
		}
这样下拉回弹到60的时候,就可以出现loading了,当然还要写辅助代码

 myScroll.on("slideDown", function () {
            if (this.y > 60) {
                downIcon.addClass("loading");
                setTimeout(function () {
                    if (_slidedownEvent != null) {
                        _slidedownNotOver = true;
                        _slidedownEvent();
                    }
                    else {
                        _slidedownNotOver = false;
                        myScroll.scrollTo(0, 0, 200, IScroll.utils.ease.bounceEasing);
                        downIcon.removeClass("loading");
                        $("#scroller-pullUp").hide();
                    }
                }, 1000);

            }
        });
判断在60的时候出现loading图标,然后异步执行_slidedownEvent事件,做一些ajax获取数据的操作,然后再异步回来设置
 myScroll.scrollTo(0, 0, 200, IScroll.utils.ease.bounceEasing);

滚动复原,这样就ok了

3.数据太少没有滚动条的时候自动隐藏提示图片

这个需要修改momentum函数,加入一个判断即可

if (lowerMargin<0 && destination < lowerMargin ) 

最后我封装了一下这个js,使其具备ajax数据拉取的能力,js代码如下:

                JmobileExt.Listview.initializtion("activelist.ashx", null, "#activities", "#listviewdot");

初始化Listview控件,"activelist.ashx"是获取数据的url地址,null是data,post的时候用的,"#activities"是listview控件id, "#listviewdot"是dot模板

               JmobileExt.Listview.GetFirstListData();

获取第一页json数据

                JmobileExt.Listview.bindEvent(null,null,null,
                   function (sender) {
                       var data=sender.Data;
<span style="white-space:pre">			</span>sender.Cancel=true;
                   }
               );

JmobileExt.Listview.bindEvent绑定四个事件post前下拉,post前上拉,post后下拉,post后上拉,sender.Data在post前可以组织post数据,在post后可以获取服务器返回的json数据,如果设置sender.Cancel=true,那么就不会提交和显示。


我把代码整理了一下,点击打开链接 ,项目是用jmobile和dot模板开放的,必须运行在web服务器环境中,直接在文件浏览器中打开是没有效果的。


没有更多推荐了,返回首页