js中const,var,let区别

1.const定义的变量不可以修改,而且必须初始化。

const b = 2;//正确
 // const b;//错误,必须初始化 
console.log('函数外const定义b:' + b);//有输出值
// b = 5;
// console.log('函数外修改const定义b:' + b);//无法输出 
2.var定义的变量可以修改,如果不初始化会输出undefined,不会报错。

var a = 1;
// var a;//不会报错
 console.log('函数外var定义a:' + a);//可以输出a=1
 function change(){
 a = 4;
 console.log('函数内var定义a:' + a);//可以输出a=4
 } 
 change();
 console.log('函数调用后var定义a为函数内部修改值:' + a);//可以输出a=4
3.let是块级作用域,函数内部使用let定义后,对函数外部无影响。

let c = 3;
console.log('函数外let定义c:' + c);//输出c=3
function change(){
let c = 6;
console.log('函数内let定义c:' + c);//输出c=6
} 
change();
console.log('函数调用后let定义c不受函数内部定义影响:' + c);//输出c=3

微信小程序上拉加载,下拉刷新实现方法

微信小程序下拉刷新上拉加载的两种实现方法

方法1

利用”onPullDownRefresh”和”onReachBottom”方法实现小程序下拉刷新上拉加载

设置window中属性enablePullDownRefresh为true
属性 类型 描述
enablePullDownRefresh Boolean 是否开启下拉刷新,详见页面相关事件处理函数。
设置注册页面中Page中函数
属性 类型 描述
onPullDownRefresh Function 页面相关事件处理函数–监听用户下拉动作
onReachBottom Function 页面上拉触底事件的处理函数
onPullDownRefresh: 下拉刷新说明
  1. 监听用户下拉刷新事件。
  2. 需要在config的window选项中开启enablePullDownRefresh。
  3. 当处理完数据刷新后,wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
  4. 4.
代码示例

代码


onPullDownRefresh(){
console.log('--------下拉刷新-------')
wx.showNavigationBarLoading() //在标题栏中显示加载

wx.request({
url: 'https://URL',
data: {},
method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 设置请求的 header
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
wx.hideNavigationBarLoading() //完成停止加载
wx.stopPullDownRefresh() //停止下拉刷新
}
})

方法2

在scroll-view里设定bindscrolltoupper和bindscrolltolower实现微信小程序

属性 类型 描述
bindscrolltoupper EventHandle 滚动到顶部/左边,会触发 scrolltoupper 事件
bindscrolltolower EventHandle 滚动到底部/右边,会触发 scrolltolower 事件

Wxml文件

<scroll-view scroll-top="{{scrollTop}}" scroll-y="true" style="height:{{scrollHeight}}px;" bindscrolltolower="bindDownLoad" bindscroll="scroll">
    <block wx:for="{{goodsList}}" wx:key="item" >
            <view>
                <image src="{{item.goods_img}}" alt=""></image>
            </view>
            <view>{{item.name}}</view>
            <view><text>¥<text>{{item.price}}</text></text><text>¥{{item.oldprice}}</text></view>
   </block>
</scroll-view>

根据官方文档得知,scroll-view就是里面内容有各种滑动触发事件的DIV容器,比如滚动条滚动、触底、触顶着三个事件。

其中的三个属性 
scroll-top:设置滚动条的位置

scroll-y:是否允许竖向滑动,height:是组件的高度

Bindscrolltolower是绑定触底触发的事件

Bindscroll 是滚动触发的时间

Bindscrolltoupper 触顶触发的事件,由于是触顶触发事件,所以不合适用来当做下拉刷新

一般来说 对于组件的属性,都是通过JS来动态控制的。

js

//获取应用实例
var app = getApp()
//首页上拉加载功能函数
var page = 0;
var url = 'https:www.shop.com/home/index/index
';
var GetList = function(that){
  wx.request({
    url: url,
    data: {
        page:page,
    },
    success: function(res){
      var goodsList = that.data.goodsList;
      for(var i = 0;i<res.data.info.length;i++){
          goodsList.push(res.data.info[i]);
      }
      that.setData({
          goodsList:goodsList
      });
      page ++;
      that.setData({
          hidden:true
      });
    }
  });
}
Page({
    data: {
        goodsList:[],
        scrollTop : 0,
        scrollHeight:0,
    },
    //下拉刷新
    onPullDownRefresh:function(){
        this.onLoad()
    },
    onLoad: function () {
         var that = this;
            wx.getSystemInfo({
                success:function(res){
                    that.setData({
                        scrollHeight:res.windowHeight
                    });
                }
            });
        //首页商品
        wx.request({
          url: 'https:www.shop.com/home/product/search',
          data: {},
          method: 'GET',
          success: function(res){
                that.setData({
                goodsList: res.data.info,
            })
          },
        })
},
    //   该方法绑定了页面滑动到底部的事件
    bindDownLoad:function(){
        var that = this;
        GetList(that);
    },
    //   该方法绑定了页面滚动时的事件
    scroll:function(event){
        this.setData({
            scrollTop : event.detail.scrollTop
        });
    },
})

当初次加载页面的时候,执行onLoad函数,

onLoad: function () {
    var that = this;
    wx.getSystemInfo({
        success:function(res){
            that.setData({
                scrollHeight:res.windowHeight
            });
        }
    });
    //首页商品
        wx.request({
          url: 'https:www.shop.com/home/product/search',
          data: {},
          method: 'GET',
          success: function(res){
                that.setData({
                goodsList: res.data.info,
            })
          },
        })
}

这里的onLoad有两个功能

一、获取设备接口用户手机屏幕高度

二、向服务器发送请求,获取数据

其中,wx.getSystemInfo接口可以获取到手机型号、设备像素比、窗口宽度和高度、设备语言、操作系统版本号和客户端平台,最常用的就是获取设备窗口的宽度和高度。

Wx.request()是发送请求,为了保持良好习惯,需要把请求的数据(GET、POST)都要放在data{}中

小程序封装了一个下拉刷新的API,onPullDownRefresh监听下拉事件,所以

onPullDownRefresh:function(){
    this.onLoad()
},

当下拉事件触发的时候,重新执行onLoad()就可以实现刷新效果了

当下拉事件触发的时候,重新执行onLoad()就可以实现刷新效果了

上拉加载

var page = 0;
var url = app.globalData.domain+'/index.php';
var GetList = function(that){
  that.setData({
      hidden : false
  });
  wx.request({
    url: url,
    data: {
        page:page,
    },
    success: function(res){
      var goodsList = that.data.goodsList;
      for(var i = 0;i<res.data.info.length;i++){
          goodsList.push(res.data.info[i]);
      }
      that.setData({
          goodsList:goodsList
      });
      page ++;
      that.setData({
          hidden:true
      });
    }
  });  
}
//   该方法绑定了页面滑动到底部的事件
bindDownLoad:function(){
    var that = this;
    GetList(that);
},
//   该方法绑定了页面滚动时的事件
scroll:function(event){
    this.setData({
        scrollTop : event.detail.scrollTop
    });
},

bindDownLoad:每次触底都会触发GetList,去获取数据

Scroll:每次滚动的时候,都重新设置滚动条的位置

var page = 0; 设置当前所请求的页数,这里我请求的方式类似于分别请求

url 请求的url

var GetList = function(){}; 是JS中设置函数的一种方式,先设置一个匿名函数,然后将这个匿名函数赋值给GetList这个变量,相当于这个变量代表了这个函数

wx.request() 发送请求

success 请求成功以后,对数据进行操作

var goodsList = that.data.goodsList; that是调用函数的时候,传递过来的,是this,代表当前页面Page()的实例化对象

that.data.goodsList 就是获取当前goodsList的值

每次执行这个函数的时候,都会page++,然后根据这个page的值去服务器获取数据,将新得到的数据,通过循环push,添加到这个goodsList,然后再通过that.setData覆盖掉原来的goodsList,这样Page中的goodsList就是最新的数据,可以展现在前端页面了。

下拉刷新: 
1.触底,触发时间 
2.调用函数,获取数据 
3.将数据添加到所在页面js中

后端PHP代码:

public function index(){
    $page = I('get.page')?I('get.page'):0;
    $goods_list = D('Goods')->where(array('status'=>1))->limit($page*10,'10')->order('id desc')->select();
    $this->success($goods_list,'',true);
}


微信小程序-原生下拉刷新

小程序中的json文件是配置文件,用来配置小程序页面.

app.json

是对整个小程序的全局配置,我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口背景色,配置导航条样式,配置默认标题。

page.json

每一个小程序页面也可以使用.json文件来对本页面的窗口表现进行配置。 页面的配置比app.json全局配置简单得多,只是设置 app.json 中的 window 配置项的内容,页面中配置项会覆盖 app.json 的 window 中相同的配置项。

app.json
{
  "pages": [
    //注册小程序中的页面
  ],
  "window": {
    //设置小程序的状态栏、导航条、标题、窗口背景色
  },
  "tabBar": {
    //指定 tab 栏的表现,以及 tab 切换时显示的对应页面
  },
  "networkTimeout": {
    //设置各种网络请求的超时时间
  },
  "debug": true//可以在开发者工具中开启 debug 模式
}


page.json//page.json相当于app.json中的window
{
  "navigationBarBackgroundColor": "#ffffff",//导航栏背景颜色
  "navigationBarTextStyle": "black",//导航栏标题颜色,仅支持 black/white
  "navigationBarTitleText": "微信接口功能演示",//导航栏标题文字内容
  "backgroundColor": "#eeeeee",//窗口的背景色
  "backgroundTextStyle": "light"//下拉背景字体、loading 图的样式,仅支持 dark/light
  "enablePullDownRefresh": true//是否开启下拉刷新
  "disableScroll": false//设置为 true 则页面整体不能上下滚动;只在 page.json 中有效,无法在 app.json 中设置该项
}


下拉刷新

  1. 在json文件中配置enablePullDownRefresh为true(app.json中在window中设置enablePullDownRefresh,此效果作用于全局),下面两种设置方法只写一个就行了
app.json
{
 "window": {
   "enablePullDownRefresh":true
 },
}


page.json
{
  "enablePullDownRefresh": true
}
在js文件中实现onPullDownRefresh方法,在网络请求完成后调用wx.stopPullDownRefresh()来结束下拉刷新




page.js
Page({
 onPullDownRefresh: function(){
     console.log('--------下拉刷新-------')
   wx.showNavigationBarLoading() //在标题栏中显示加载
     wx.request({
         url: '',
         data: {},
         method: 'GET',
         success: function (res) {},
         fail: function (res) {},
         complete: function (res) {
             // complete
            wx.hideNavigationBarLoading() //完成停止加载
            wx.stopPullDownRefresh() //停止下拉刷新
         }
     })
 }
})



bug处理

在使用时遇到了一个bug,下拉时的三个圆点没有显示

原因

分析之后发现是因为圆点的颜色与背景色一样,影响了显示

处理方法

在json文件中配置backgroundTextStyle来设置下拉背景字体、loading 图的样式为dark

app.json
{
  "window": {
    "backgroundTextStyle": "dark"
  },
}
pags.json
{
  "backgroundTextStyle": "dark"
}





微信小程序 CSS 清除浮动 flexfix

很多同学都在使用下面的骨灰级解决办法:

.clear{
    clear:both;
    height:0;
    overflow:hidden;
}

上诉办法是在需要清除浮动的地方加个div.clear或者br.clear,我们知道这样能解决基本清浮动问题。

但是这种方法的最大缺陷就是改变了html结构,虽然只是加个div。

最优浮动闭合方案(这是我们推荐的):

.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

用法很简单,在浮动元素的父云素上添加class=”demo clearfix”。

你会发现这个办法也有个弊端,但的确是小问题。改变css写法就ok了:

很拉轰的浮动闭合办法:

.clearfix {
  overflow: auto;
  _height: 1%;
}

这种办法是我看国外的一篇文章得到的方案,测试了,百试不爽,真的很简单,很给力。喜欢的同学也可以试试这个办法。

这种方法是端友radom提供的,测试通过:

.clearfix{overflow:hidden;_zoom:1;}

以上为转载  我用的是拉轰的浮动闭合  直接解决浮动不占位的问题。

踩一踩微信小程序开发的坑---tabBar

1. 书写,正确书写时tabBar,不要写成tabbar


2. 在配置中加入index目录,不在pages中添加index目录,也会导致tabBar不显示


3. tabBar属性的要求,官方教程微信小程序官方教程

画重点,tabBar中list的个数最少2个,最多5个。list中每个对象的属性值iconPath和selectedIconPath试了一下,可以不填写

4,这个就是随手一按解决的(shift+【   键),这个坑隐藏的很深,第一个目录中的.json中,不管配置不配置其它数据,必须要加一个{}



读书笔记-简约至上 交互设计四策略

这是一本经典之作,很多设计师都做过笔记,但流水账一般罗列重点很容易被遗忘,我的笔记更多的是挑选一些重点、用现有的网站或APP来举例解释,帮助大家快速理解并记忆。

这本书的作者是Giles Colborne,他是一位有着二十多年经验的交互设计与可用性专家。

这本书用三个重点来概括:

  • 为主流用户而设计
  • 简约却并不简单
  • 简约四策略:合理删除、分层组织、适时隐藏、巧妙转移

接下来详细分析一下这本书里的内容

一、为主流用户而设计

在本书中,根据用户本身所属的人群,将用户分为三种类型:

随意型用户:可能使用过类似产品,使用新产品的意愿不强烈,除非你的产品足够简单,他们才愿意一试,这类用户非常少,大约占20%

- 阅读剩余部分 -

Vue.js 入门教程

什么是 Vue.js?

Vue.js 是用于构建交互式的 Web 界面的库。

Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统,具有简单、灵活的 API。

Vue.js 安装

独立版本

直接下载并用 <script> 标签引入,Vue 会被注册为一个全局变量。

创建第一个 Vue 应用

接下来我们创建第一个 Vue 应用。

View 层 - HTML 代码如下:

<div id="app">
  {{ message }}
</div>

Model 层 - JavaScript 代码如下(需放在指定的HTML元素之后):

new Vue({
    el:'#app',
    data: {
        message:'Hello World!'
    }
});

- 阅读剩余部分 -

阿里云ECS主机放多个网站 附配置教程

如何在一台阿里云ECS虚拟主机上安装多个独立网站,网站运行环境Apache+MySQL,网站程序PHP语言开发。

方法/步骤

1. 打开flashfxp,填写你的阿里云ECS主机IP地址;00.00.00;填写你的主机的用户名:root ;输入密码;xxxxxxxx。链接

- 阅读剩余部分 -

PHP的PDO类教程

POD扩展是在PHP5中加入,该扩展提供PHP内置类 PDO来对数据库进行访问,不同数据库使用相同的方法名,解决数据库连接不统一的问题。
PDO的目标

提供一种轻型、清晰、方便的 API
统一各种不同 RDBMS 库的共有特性,但不排除更高级的特性。
通过 PHP 脚本提供可选的较大程度的抽象/兼容性。

- 阅读剩余部分 -