详见：https://ask.dcloud.net.cn/article/29

　　我们在做小程序开发时，比如说在编辑器里里面编辑了一段内容，输出网页版只需要htmlspecialchars_decode()函数就可以搞定了，但是输出小程序就并不是那么简单了，必须要使用wxParse插件才能完成。下面跟大家分享一下导入插件的使用方法：

在wxml中引入，代码如下：

{{title}}

在wcss中引入，代码如下：

@import "/wxParse/wxParse.wxss";

.title{

/ border:solid #000 1rpx; /

width: 100% ;

text-align: center;

background-color: #fff;

font-size: 30rpx;

height:80rpx;

line-height: 80rpx;

}

.content{

/ border:solid #000 1rpx; /

width: 100% ;

margin-top:20rpx;

height: 100%;

background-color: #fff;

font-size: 25rpx;

padding:20rpx;

}

在js中引入，代码如下：

// pages/helpcontent/helpcontent.js

var WxParse = require('../../wxParse/wxParse.js');

Page({

/**

• 页面的初始数据

*/

data: {

},

/**

• 生命周期函数--监听页面加载

*/

onLoad: function (options) {

var that=this

wx.request({

url: 'https://www.appsaa.com', //仅为示例，并非真实的接口地址

header: {

'content-type': 'application/json'

},

success: function (res) {

console.log(res.data.title)

that.setData({

title: res.data.title,//第一个data为固定用法，第二个data是json中的data

infos: WxParse.wxParse('infos', 'html', res.data.infos, that, 5)

})

}

})

}

　　那么到这里就结束了，大家现在可以尝试一下了，如果还是存在有不理解或者不清楚的地方，都是可以留言咨询我们的。

　　本文由专业的郑州小程序开发公司燚轩科技整理发布，原创不易，如需转载请注明出处。

down: {
height: '50px',
range: '80px',
contentdown: "下拉可以刷新", //可选，在下拉可刷新状态时，下拉刷新控件上显示的标题内容
contentover: "释放立即刷新", //可选，在释放可刷新状态时，下拉刷新控件上显示的标题内容
contentrefresh: "正在刷新...", //可选，正在刷新状态时，下拉刷新控件上显示的标题内容
//style: "circle",
color: '#f78000',
callback: downFn // 下拉执行函数
},
注释 //style: "circle",

这个方法安卓可以 ios还是有下拉的样式
可以全部注释，或者不加

该工程是Hbuilder最新IOS 5+SDK的示例demo 集成了蓝牙打印机和网口打印机
使用该工程可以直接封装HTML代码

https://github.com/qjdice/Hbuider-ios-printer

　　程序原生组件的音频播放时并没有进度条的显示，而此次在我们所接的项目中，鉴于原生的视频进度条样式太丑，产品要求做一个可拖拽的进度条满足需求。视频和音频提供的api大致是相似的，可以根据以下代码修改为与音频相关的进度条。
wxml的结构如下:

<video id="myVideo" src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400" enable-danmu danmu-btn controls="{{false}}" autoplay='{{true}}' bindtimeupdate="videoUpdate" objectFit="fill"></video>
<view class='process-container'>
<image src='{{playStates ? "../../assets/image/pause_icon.png" : "../../assets/image/play_icon.png"}}' class='video-controls-icon' bindtap='videoOpreation'></image>
<view class='slider-container'>
<slider bindchange="sliderChange" bindchanging="sliderChanging" step="1" value="{{sliderValue}}" backgroundColor="#A8A8A8" activeColor="#FFEE83" block-color="#FFEE83" />
</view>
</view>

data中初始化了sliderValue, updateState, playStates几个变量。

data: {

sliderValue: 0, //控制进度条slider的值，

updateState: false, //防止视频播放过程中导致的拖拽失效

playStates: true //控制播放 & 暂停按钮的显示

},

onReady: function () {

this.videoContext = wx.createVideoContext('myVideo');

this.setData({

updateState: true

})

},

videoUpdate在播放进度变化时触发，触发频率 250ms 一次。event.detail = {currentTime, duration}，currentTime表示当前时间，duration表示总时长，都以秒为单位

videoUpdate(e) {

if (this.data.updateState) { //判断拖拽完成后才触发更新，避免拖拽失效

let sliderValue = e.detail.currentTime / e.detail.duration * 100;

this.setData({

sliderValue,

duration: e.detail.duration

})

}

},

进度条可拖拽并指定视频跳转到相应的位置

sliderChanging(e) {

this.setData({

updateState: false //拖拽过程中，不允许更新进度条

})

},

sliderChange(e) {

if (this.data.duration) {

this.videoContext.seek(e.detail.value / 100 * this.data.duration); //完成拖动后，计算对应时间并跳转到指定位置

this.setData({

sliderValue: e.detail.value,

updateState: true //完成拖动后允许更新滚动条

})

}

},

暂停/播放视频

videoOpreation() {

this.data.playStates ? this.videoContext.pause() : this.videoContext.play();

this.setData({

playStates: !this.data.playStates

})

}
　　总结：slider的最大值为100, step的值最小为1,这会导致视频或音频播放时间过长的时候,slider滑块移动速度很慢,拖拽移动的时间间隔较大,用户体验差。如果还是有不理解的地方，可以留言咨询。

　　本文由专业的郑州小程序开发公司燚轩科技整理发布，如需转载请注明出处。

Doodoo.js -- 中文最佳实践Node.js Web快速开发框架。支持Koa.js, Express.js中间件，支持模块化，插件，钩子机制，可以直接在项目里使用 ES6/7（Generator Function, Class, Async & Await）等特性 https://www.doodooke.com

配置
doodoo配置.env 文件位于项目根目录下，作为全局默认环境配置文件。

# 应用配置  
APP_ROOT=app  
APP_PORT=3000  
APP_HOST=127.0.0.1  

# MYSQL数据库链接  
MYSQL=false  
MYSQL_HOST=127.0.0.1  
MYSQL_USER=root  
MYSQL_PASSWORD=root  
MYSQL_DATABASE=doodoo  
MYSQL_PORT=3306  
MYSQL_CHARSET=utf8mb4  

# MONGODB数据库链接  
MONGOOSE=false  
MONGOOSE_URI=mongodb://127.0.0.1:27017/doodoo  

# REDIS链接  
REDIS=false  
REDIS_HOST=127.0.0.1  
REDIS_PORT=6379  
REDIS_PREFIX=doodoo:  

# 静态资源服务  
STATIC_DIR=www  
STATIC_MAXAGE=30 * 24 * 60 * 60  
STATIC_DYNAMIC=true

支持根据不同环境加载不同的配置文件（自定义文件配置将覆盖全局默认环境配置）

# 创建docker.env文件  
touch docker.env  

# 自定义docker环境启动  
NODE_ENV=docker node app.js

快速入门
我们通过3步演示如何快速创建一个doodoo项目

第一步

# 创建doodoo-demo目录  
mkdir doodoo-demo && cd doodoo-demo  

# 初始化npm  
npm init -y  

# 安装doodoo.js  
yarn add doodooke/doodoo.js  

# 创建app.js  
touch app.js

接下来我们将以下代码copy到app.js

const Doodoo = require("doodoo.js");  

const app = new Doodoo();  
app.start();

第二步

# 创建app/hello/controller目录  
mkdir -p app/hello/controller && cd app/hello/controller  

# 创建test.js文件  
touch test.js

接下来我们将以下代码copy到test.js

module.exports = class extends doodoo.Controller {  
    async _initialize() {  
        // 控制器初始化  
        console.log("_initialize");  
    }  

    async _before() {  
        // 控制器前置  
        console.log("_before");  
    }  

    async _before_index() {  
        // 方法前置  
        console.log("_before_index");  
    }  

    async index() {  
        console.log("index");  
        this.success("Hello Doodoo.js");  
    }  

    async _after_index() {  
        // 方法后置  
        console.log("_after_index");  
    }  

    async _after() {  
        // 控制器后置  
        console.log("_after");  
    }  
};

第三步

进入doodoo-demo根目录

cd ../../../

启动项目

node app.js

通过命令行可以看到如下信息表示启动成功

[doodoo] Version: 1.0.3
[doodoo] Website: 127.0.0.1
[doodoo] Nodejs Version: v10.10.0
[doodoo] Nodejs Platform: darwin x64
[doodoo] Server Enviroment: development
[doodoo] Server Startup Time: 36ms
[doodoo] Server Current Time: 2018-10-09 20:26:40
[doodoo] Server Running At: http://127.0.0.1:3000

通过浏览器访问以下链接可以看到如下提示

http://127.0.0.1:3000/hello/test/index

{
errmsg: "ok",
errcode: 0,
data: "Hello Doodoo.js"
}

源码
按照传统，所有课程源代码基于 MIT 开源，托管于 GitHub ：https://github.com/doodooke/doodoo-demo

uni-app的web-view组件，支持加载远程网页，在app环境下，还支持加载本地HTML页面。

在web-view加载页面中，会涉及wx、plus、uni等对象的使用。

• 在小程序下使用wx的api，需要引入微信提供的https://res.wx.qq.com/open/js/jweixin-1.4.0.js。
• 在app下默认有plus对象，不需要引入js文件。
• 不管是在小程序下还是在app下，使用uni的api，需要引入https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js

本文会详述在webview里的uni对象的使用方式，以及和vue页面的通讯方式。

HBuilderX 1.0.0 版本开始，uni-app 支持在 web-view 中调用 uni 的 API。

引用依赖的文件

在 web-view 加载的 HTML 中调用 uni 的 API，需要在 HTML 中引用必要的 JS-SDK。

<!-- 微信 JS-SDK 如果不需要兼容小程序，则无需引用此 JS 文件。 -->  
<script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>  
<!-- uni 的 SDK，必须引用。 -->  
<script type="text/javascript" src="//js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js"></script>

Tips

• 这些 JS 文件是在 web-view 加载的那个 HTML 文件中引用的，而不是 uni-app 项目中的文件。
• 如果不考虑微信小程序，则无需引入微信的 JS-SDK。
• 两个文件同时引入时，注意引入的顺序，微信的需要在前。

调用的时机

在引用依赖的文件后，需要在 HTML 中监听 UniAppJSBridgeReady 事件触发后，才能安全调用 uni 的 API。

document.addEventListener('UniAppJSBridgeReady', function() {  
    uni.getEnv(function(res) {  
        console.log('当前环境：' + JSON.stringify(res));  
    });  
});

页面跳转

支持调用所有的 uni 路由方法，可以实现从 HTML 重新跳转回应用内的页面。

在 UniAppJSBridgeReady 后，调用路由方法跳转到应用内的页面。

document.addEventListener('UniAppJSBridgeReady', function() {  
    document.querySelector('.btn-list').addEventListener('click', function(evt) {  
        var target = evt.target;  
        if (target.tagName === 'BUTTON') {  
            var action = target.getAttribute('data-action');  
            if(action === 'navigateTo') {  
                uni.navigateTo({  
                    url: '/pages/component/button/button'  
                });  
            }  
        }  
    });  
});

发送消息

可以通过 uni.postMessage 在 HTML 中向应用发送消息。要实现此功能，需要完成以下两步工作。

监听 web-view 的 message 事件

监听 web-view 组件的 message 事件，然后在事件回调的 event.detail.data 中接收传递过来的消息。

<template>  
    <view>  
        <web-view src="http://192.168.1.1:3000/test.html" @message="handleMessage"></web-view>  
    </view>  
</template>  

<script>  
    export default {  
        methods: {  
            handleMessage(evt) {  
                console.log('接收到的消息：' + JSON.stringify(evt.detail.data));  
            }  
        }  
    }  
</script>

从 HTML 向应用发送消息

uni.postMessage 中的参数格式，必须是 data: {}。也就是说，传递的消息信息必须在 data 这个对象中。

document.addEventListener('UniAppJSBridgeReady', function() {  
    uni.postMessage({  
        data: {  
            action: 'postMessage'  
        }  
    });  
});

每次执行 postMessage 后，传递的消息会以数组的形式存放。因此，在 web-view 的 message 事件回调中，接收到的 event.detail.data 的值是一个数组。

获取当前环境信息

HTML 在不同的环境下，可能需要执行不同的操作或传递不同的消息。可以通过 uni.getEnv() 方法，来获取当前的环境信息。

document.addEventListener('UniAppJSBridgeReady', function() {  
    uni.getEnv(function(res) {  
        if (res.plus) {  
            console.log('当前环境为【5+App】');  
        } else if (res.miniprogram) {  
            console.log('当前环境为【微信小程序】');  
        }  
    });  
});

本地 HTML

自 HBuilderX v1.1.0 起，在 5+App 平台下 web-view 支持加载应用内的 HTML 资源。
本地的 HTML 资源，必须存放在规定的目录下，即 uni-app 项目->hybrid->html 目录。

├─common      
├─components        
├─hybrid  
│  └─html  
│          test.html        
├─pages              
├─static  
│  App.vue  
│  main.js  
│  manifest.json  
│  pages.json

与 html 文件相关的 css、js 等本地资源，同样放在这个 hybrid->html 目录下。
这个hybrid目录不会被编译器编译，所以这里的不能放vue文件，而其他目录也不能放本地HTML文件。
未来hybrid目录还会支持其他语言在uni-app的中的混合使用。

注意：在本地 HTML 中引入网络资源时，必须补全协议。比如：https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.0.1.52.js

运行体验

示例中 web-view 加载的是一个本机的测试地址，这个测试 HTML 见附件。

• 加载网络地址的话，需要在本机启动一个服务将此 HTML 放进去，然后修改 hello uni-app 中的 web-view 例子的 src 地址为可访问的局域网地址。

• 如果是加载本地 HTML 的话，就直接新建目录将此 HTML 放进去，然后修改 web-view 的 src 为 /hybrid/html/test.html 即可。

• 参考文档：web-view

web-view组件在app中的窗体关系和plus.webview操作方式

uni-app的vue页面本身是一个webview，vue页面里的web-view组件，其实是一个子webview。
但一个vue页面不能放多个web-view组件，这个组件默认是全屏的（不会覆盖原生头和原生导航）。
使用plus代码获得当前webview的对象后（参考此文https://ask.dcloud.net.cn/article/35036），再获取子webview，其实也可以得到web-view组件所对应的plus的webview对象，进而再使用plus.webview的丰富api。
获取子webview时注意时机，获取方法执行太早可能获取不到。

移动端【破茧成蝶】场景请用微信扫描二维码访问（温馨提示：H5案例有声音，请打开声音体验）：

案例：

<!DOCTYPE HTML>  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title>无标题文档</title>  
<meta name="viewport" content="width=640, user-scalable=no,target-densityDpi=device-dpi">  
<style>  
*{ margin:0; padding:0;}  
html{ overflow:hidden;}  
li{ list-style:none;}  
#main{ width:640px; height:auto; position:relative; overflow:hidden;}  
#c1{ width:100%; height:100%; position:absolute; left:0; top:0; z-index:10;}  
#list{}  
#list > li{ width:100%; height:100%; background-repeat:no-repeat; position:absolute; left:0; top:0; background-size:cover; z-index:5; display:none;}  
#list > li.zIndex{ z-index:6;}  
#list > li:nth-of-type(1){ background-image:url(img/b.png); display:block;}  
#list > li:nth-of-type(2){ background-image:url(img/c.png);}  
#list > li:nth-of-type(3){ background-image:url(img/d.png);}  
#list > li:nth-of-type(4){ background-image:url(img/e.png);}  
#list > li:nth-of-type(5){ background-image:url(img/ad1.png);}  
#list > li:nth-of-type(6){ background-image:url(img/ad2.png);}  
#list > li:nth-of-type(7){ background-image:url(img/ad3.png);}  
#list > li:nth-of-type(8){ background-image:url(img/ad4.png);}  
</style>  
<script src="jquery-2.1.3.min.js"></script>  
<script>  
$(document).on('touchmove',function(ev){  
    ev.preventDefault();  
});  
$(function(){  
    var $main = $('#main');  
    var $list = $('#list');  
    var $li = $list.find('>li');  
    var viewHeight = $(window).height();  
    $main.css('height',viewHeight);  
    slideCanvas();  
    slideImg();   
    function slideCanvas(){  
        var $c = $('#c1');  
        var gc = $c.get(0).getContext('2d');  
        var img = new Image();  
        var bBtn = true;  
        $c.attr('height',viewHeight);  
        img.src = 'img/a.png';        
        img.onload = function(){  
            gc.drawImage(img,(640 - nowViewWidth())/2,0,nowViewWidth(),viewHeight);  
            gc.strokeStyle = 'blue';  
            gc.lineWidth = 60;  
            gc.lineCap = 'round';  
            gc.globalCompositeOperation = 'destination-out';  
            $c.on('touchstart',function(ev){      
                var touch = ev.originalEvent.changedTouches[0];  
                var x = touch.pageX - $(this).offset().left;  
                var y = touch.pageY - $(this).offset().top;  
                /*gc.arc(x,y,100,0,360*Math.PI/180);  
                gc.fill();*/  
                if(bBtn){  
                    bBtn = false;  
                    gc.moveTo(x,y);  
                    gc.lineTo(x+1,y+1);  
                }  
                else{  
                    gc.lineTo(x,y);  
                }  
                gc.stroke();  
                $c.on('touchmove.move',function(ev){      
                    var touch = ev.originalEvent.changedTouches[0];  
                    var x = touch.pageX - $(this).offset().left;  
                    var y = touch.pageY - $(this).offset().top;  
                    gc.lineTo(x,y);  
                    gc.stroke();                      
                });  
                $c.on('touchend.move',function(ev){  
                    var imgData = gc.getImageData(0,0,640,viewHeight);  
                    var allPx = imgData.width * imgData.height;  
                    var num = 0;  
                    for(var i=0;i<allPx;i++){  
                        if( imgData.data[4*i+3] == 0 ){  
                            num++;  
                        }  
                    }  
                    if( num > allPx/2 ){  
                        $c.animate({opacity:0},1000,function(){  
                            $(this).remove();  
                        });  
                    }  
                    $c.off('.move');  
                });  
            });   
        };  
    }     
    function slideImg(){  
        var startY = 0;  
        var step = 1/4;  
        var nowIndex = 0;  
        var nextorprevIndex = 0;  
        var bBtn = true;  
        $li.css('backgroundPosition', (640 - nowViewWidth())/2 +'px 0');  
        $li.on('touchstart',function(ev){  
            if(bBtn){  
                bBtn = false;  
                var touch = ev.originalEvent.changedTouches[0];  
                startY = touch.pageY;  
                nowIndex = $(this).index();  
                $li.on('touchmove.move',function(ev){  
                    var touch = ev.originalEvent.changedTouches[0];  
                    $(this).siblings().hide();  
                    if( touch.pageY < startY ){   //↑  
                        nextorprevIndex = nowIndex == $li.length-1 ? 0 : nowIndex + 1;  
                        $li.eq(nextorprevIndex).css('transform','translate(0,'+( viewHeight + touch.pageY - startY )+'px)');                      
                    }  
                    else{   //↓  
                        nextorprevIndex = nowIndex == 0 ? $li.length-1 : nowIndex - 1;  
                        $li.eq(nextorprevIndex).css('transform','translate(0,'+( -viewHeight + touch.pageY - startY )+'px)');                     
                    }  
                    $li.eq(nextorprevIndex).show().addClass('zIndex');  
                    //Math.abs((touch.pageY - startY))/viewHeight -> 最大值 -viewHeight~viewHeight  
                    $(this).css('transform','translate(0,'+ (touch.pageY - startY)*step +'px) scale('+(1 - Math.abs((touch.pageY - startY))*step/viewHeight )+')');  

                });       
                $li.on('touchend.move',function(ev){  
                    var touch = ev.originalEvent.changedTouches[0];  
                    if( touch.pageY < startY ){   //↑  
                        $li.eq(nowIndex).css('transform','translate(0,'+(-viewHeight * step)+'px) scale('+(1 - step)+')');  
                    }  
                    else{  //↓  
                        $li.eq(nowIndex).css('transform','translate(0,'+(viewHeight * step)+'px) scale('+(1 - step)+')');  
                    }  
                    $li.eq(nowIndex).css('transition','.3s');  
                    $li.eq(nextorprevIndex).css('transform','translate(0,0)');  
                    $li.eq(nextorprevIndex).css('transition','.3s');  
                    $li.off('.move');  
                });  
            }  
        });  
        $li.on('transitionEnd webkitTransitionEnd',function(){  
            resetFn();  
        });  
        function resetFn(){  
            $li.css('transform','');  
            $li.css('transition','');  
            $li.eq(nextorprevIndex).removeClass('zIndex').siblings().hide();  
            bBtn = true;  
        }  
    }  
    function nowViewWidth(){  
        var w = 640 * viewHeight / 960;  
        w = w > 640 ? w : 640;  
        return w;  
    }     
});  
</script>  
</head>  
<body>  
<div id="main">  
    <canvas id="c1" width="640" height="960"></canvas>  
    <ul id="list">  
        <li></li>  
        <li></li>  
        <li></li>  
        <li></li>  
        <li></li>  
        <li></li>  
        <li></li>  
        <li></li>  
    </ul>  
</div>  
</body>  
</html>

一、什么是微信场景应用

三、场景运行环境
1) 微信内嵌的浏览器
2) Chrome自带移动端Emulation(模拟器)

四、场景一功能
1) 加载，刮开，划屏，动画，音乐等

五、jQuery
1) 版本2.1.3

六、手机分辨率
1) 屏幕
2) 设备

七、主流屏幕分辨率
1) 640 960
2) 640 1136

八、viewport
1) 默认视口
2) width=device-width , user-scalable=no
3) target-densityDpi=device-dpi
4) 固定值640即可

九、设置高度
1) 通过JS动态设置
2) background-size : cover

十、刮开效果
1) canvas
2) globalCompositeOperation
a. source-over
b. destination-over
c. destination-out

十一、移动端事件
1) touchstart
2) touchmove
3) touchend
4) 原生event
a. originalEvent
b. changedTouches
5) 阻止默认touchmove
a. preventDefault

十二、划屏切换
1) css3
2) 运动实现
3) transform
a. translate
b. scale
c. transition
d. transitionEnd事件

十三、提示箭头
1) css3
a. animation
b. 名字
c. 时间
d. 执行次数
e. infinite
2) @keyframes
a. 帧

十四、入场动画
1) 文字样式
2) css3+js
a. transform
b. transition
3) 图标
a. 可以用图片
b. 也可以用字体库，Font Awesome

十五、音乐
1) audio
a. play()
b. pause()
十六、加载
1) css3
2) 控制scale
3) animation-delay
4) js
5) new Image

十七、查看场景二效果
1) 声音，音乐，加载，3D魔方，3D划屏，粒子操作

十八、适配
1) 第二种模式方案

十九、音乐
1) audio
2) play()
3) pause()

二十、3D魔方
1) perspective
2) preserve-3d
3) transform-origin

二十一、3D划屏
1) translateZ

二十二、粒子操作
1) canvas像素级操作
2) canvas运动模式

二十三、加载
1) linear-gradient

　　在网站前端编程开发中，我们经常会遇到需要将图片设置为背景图，当鼠标移入时利用setTimeout定时器去控制改变background-position使得图片逐帧向上移动，鼠标移除则控制向下移动，但要注意在鼠标移入和移出时要相互关闭定时器。具体如何来实现呢?下面就来为各位分析解答一下吧。

　　var positionC=['0','-75','-150','-225','-300','-375','-450','-525','-600','-675','-750','-825','-900','-975','-1050','-1125','-1200','-1275','-1350','-1425','-1500','-1575','-1650',"-1800"];

　　// var positionC=['0','-180','-360','-540','-720','-900','-1080','-1260','-1440','-1620','-1500','-1650',"-1800",];

　　var iconC=0;

　　var t1;

　　var i1;

　　$(".bgk1").mousemove(function () {

　　clearTimeout(i1);

　　iconABC();

　　})

　　$(".bgk1").mouseout(function () {

　　iconBC();

　　})

　　function iconABC(){

　　$(".bgk1").css("background-position" , 0+"px "+positionC[iconC]+"px");

　　iconC++;

　　if(iconC>positionC.length){

　　iconC=positionC.length;

　　return;

　　}

　　t1=setTimeout(iconABC,80);

　　console.log("sdd"+iconC)

　　}

　　function iconBC(){

　　clearTimeout(t1);

　　iconC--;

　　if(iconC<0){

　　iconC=0;

　　return;

　　}

　　$(".bgk1").css("background-position" , 0+"px "+positionC[iconC]+"px");

　　i1=setTimeout(iconBC,20);

　　console.log("--"+iconC)

　　}

　　好了，现在是不是就可以实现了呢?如果大家还是存在不理解的地方，或者总是有出错的地方，都是可以留言咨询的。

　　本文由专业的郑州app开发公司燚轩科技整理发布，原创不易，如需转载请注明出处。

之前是一次性加载所有数据，最近研究了下拉刷新分页展示。期间踩的坑 哎 不说了 直接发demo

请求后台接口改成自己的即可，

<div class="mui-content" style="margin-top:2.5rem;">
<div>
<div id="item1" class="mui-control-content mui-active">
<div id="scroll" class="mui-scroll-wrapper">
<div id="pullrefresh" class="mui-scroll">
<ul class="mui-table-view">
<!--数据展示区-->
</ul>
</div>
</div>
</div>
</div>
</div>

mui.init({
swipeBack:true, //启用右滑关闭功能
pullRefresh: {
container: '#pullrefresh',
down:{
auto:true,
contentrefresh: '',
style:'circle',
callback: pulldownRefresh
}
}
});

var count = 0;
var isOver = false;//是否加载完
function addData() {
var userid = localStorage.getItem('Userid');
var pageSize = 10;//条数
var Limit = count*pageSize;

mui.ajax(serverhost+'/getmyfeedback/myfeedbacklist',{  
    data:{pageStart:Limit,userid},  
    dataType:'json',  
    type:'GET',  
    timeout:5000,  
    success:function(res){  
        if(res.return_code==0){  
            var data = res.data;  
            var table = document.body.querySelector('.mui-table-view');  

            for (var i=0;i< data.length;i++) {  
                if(data[i].text ==''){  
                    data[i].text = '问题确认中';  
                }  
                var li = document.createElement('li');  
                li.className = 'mui-table-view-cell';  
                li.innerHTML = '<h5>'+data[i].title+'</h5>'+  
                                '<h5>'+data[i].ftext+'</h5>'+  
                                '<p style="color:red;font-weight:bold;">'+data[i].text+'</p>';  
                //下拉刷新，纪录插入；  
                table.insertBefore(li, table.firstChild);  
            }  
            if(data.length < pageSize){  
                isOver = true;  
            }else{  
                count++;  
            }  
        }  
    },error: function(xhr, type, errorThrown) {  
        mui.toast('网络异常，请稍后再试');  
    }  
})  

}

/**

• 下拉刷新具体业务实现
  */
  function pulldownRefresh() {
  setTimeout(function() {
  if(isOver == true){
  mui.toast("我是有底线滴~");
  mui('#pullrefresh').pullRefresh().endPulldown((isOver));
  return false;
  }else{
  addData();
  mui('#pullrefresh').pullRefresh().endPulldown((isOver));
  }
  },800);
  }

结束了一周为祖国母亲庆生的活动，各位同学陆续回到各自的岗位开始了新的一周工（摸）作（鱼）。

热门话题

近期最热门的话题，当属 uni-app 无疑。

• uni-app 什么时候支持离线（本地）打包？相关工作已经初步完成，详见：HTML5+ SDK 中的说明。
• uni-app 是否支持 npm 直接安装第三方包？本周更新的 HBuilderX 中，包含了此重大功能。参考文档：NPM支持。
• uni-app 是否支持热更新？相关的工作已经在计划中，鉴于目前重点工作是框架的稳定以及完善，待稳定后诸如此类工作开展起来就方便许多，还望各位同学能够理解。
• 云端打包怎么又排队了。伴随着 uni-app 的发布及用户的持续增长，每日打包的人数也随着增长。尤其是周四周五，是打包的高峰，排队不可避免地就出现了。如果出现排队的情况，请大家不要惊慌，耐心等待即可。我们也在不断做优化，以期给大家提供更加优质的服务。

uni-app & iOS

• uni-app内置了vuex，使用的时候改怎么使用：社区单独有一篇文章简述了使用方法，并且登录模板示例中也有更加具体的用法。
• uni-app navigator中参数要如何绑定：在 uni-app 中需要使用 Vue 的规范在模板属性上绑定数据，这位同学的情况是熟悉小程序的开发规范，可能对于 Vue 的不太熟悉。
• 获取APP的版本信息Version不正确：uni.getSystemInfo 中获取的 version 是引擎的版本号，而非应用自身的版本，之前的文档描述有误已经修复。获取应用的版本号，需要调用 plus.runtime.version。
• 图像/文件本地保存路径不正确：本周更新修复，unifile:// 协议将会取消，直接返回各平台原始的值。
• 请问下如何限制只能ios10及以上才能运行呢？：manifest.json 中可以进行配置，详见回复。
• IOS审核因为定位权限被拒绝：老问题了，获取定位权限的描述，一定要写清楚具体的业务行为，而不是笼统地说我要获取定位在应用里面用。
• 关于 iOS12 的更新，新系统的一些适配工作也在不停地进行，如果大家遇到问题，请及时向我们反馈。

开源与分享

• uniapp自定义底部导航,带凸起 @七月_
• swiper + scroll-view 实现下拉刷新 @杨大宝
• uni-app全局变量的几种实现方式：内置 vuex 的简单使用，示例中也有演示。
• uni-app中类似mui中的chat、im（聊天窗口）实现 @xcecd@qq.com
• UNI-Chat [不支持打包小程序] 简单配置 实现即时通讯 @健健
• HBuilder X对vue的支持有多强？：极致的 Vue 开发体验，就在 HBuilderX。
• 环信IM SDK 移植分享 @诗小柒

更多分享，请前往 精华区 查看。

欢迎更多的同学参与进来，分享自己的经验心得。

结束

本期周报就到这里，感谢大家的阅读。新的一周，祝大家工作顺利。