自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+

黑猫中校的燃烧战场

前端开发coder

  • 博客(37)
  • 收藏
  • 关注

原创 JavaScript之BOM(1)

ECMAscript是JavaScript的核心,如果在web中使用JavaScript,那么BOM(浏览器对象模型)无疑才是真正的核心。window对象1 全局作用域window对象在ECMAscript扮演着global对象的角色,因此所有在全局作用域中声明的变量、函数都会变成window对象的属性和方法。var name = "黑猫";function say(){ co

2018-01-14 15:54:30 282

原创 Bootstrap Table (1)

Bootstrap中文网:http://www.bootcss.com/Bootstrap Github:https://github.com/twbs/bootstrap/tree/masterBootstrap Table:http://bootstrap-table.wenzhixin.net.cn/zh-cn/引入Bootstrap文件

2018-01-12 08:32:06 357

原创 微信小程序开发-引入阿里巴巴矢量icon图标库

先在阿里巴巴图标库下载icon图标并保存到项目里,然后下载到本地。此步骤的压缩文件命名为压缩1文件。解压下载文件,打开转换网址https://transfonter.org/,点击 Add fonts按钮将iconfont.ttf文件上传上去,按图操作就好。此步骤的压缩文件命名为压缩2文件。解压下载后的文件,将文件内容复制,粘贴到压缩1文件里面的icon

2017-12-28 22:27:04 4373 2

原创 React:组件API

React 组件实例在渲染的时候(实例化)创建,这些实例在接下来渲染中会被重复使用。要调用组件上的API,首先需要获取对组件的引用。在组件方法内部可以通过this访问,在组件外唯一访问组件方法就是通过React.render的返回值,在其它组件内访问组件,可以使用refs获得对组件的引用。1、设置状态:setState2、替换状态:replaceState3、设置属性setProps

2017-12-28 17:06:17 261

原创 React:组件的状态和属性

ES6中react的属性和状态---https://babeljs.io/blog/2015/06/07/react-on-es6-plus组件把状态与结果一一对应起来,组件中有state与prop(状态与属性)。    1、 属性是由父组件传递给子组件的    2、状态是子组件内部维护的数据,当状态发生变化的同时,组件也会进行更新。当状态发生转换时会触发不同的钩子函数,从而让开发者有

2017-12-28 15:41:57 841

原创 React:组件

组件组件自身定义了一组props作为对外接口,展示一个组件时只需要指定props作为XML节点的属性。组件很少需要对外公开方法,唯一的交互途径就是props。这使得使用组件就像使用函数一样简单,给定一个输入,组件给定一个界面输出。当给予的参数一定时,那么输出也是一定的。而传统控件通常提供很多方法让你在外部改变控件的状态和行为,当控件的状态在不同场景不同逻辑中可以被随意控制时,开发和调试也会变得

2017-12-28 14:54:05 198

原创 React:JSX

新建的react demo项目结构如下:node_modules: 这里面包含了react项目中会用到的一些组件,install的时候下载下来的,你可以进去看看,有一些如base64之类的我们可能会用到的组件;public:里面包含了我们项目中的启动页面,react比较适合单页面项目应用开发,所以暂时只包含一个index.html,并且这也是react工程的入口页面,入口页面怎么理解,

2017-12-28 13:16:48 770

原创 React:安装

确定你的电脑里面有node,如果没有,下载地址:https://nodejs.org/en/download/下面来安装react:在国内用cnpm比npm速度更快,所以我们先安装cnpm$ npm install -g cnpm --registry=https://registry.npm.taobao.org$ npm config set registry https://r

2017-12-27 21:18:10 315

转载 前端SEO技巧

转自 :https://www.cnblogs.com/EnSnail/p/5671345.html一、搜索引擎工作原理  当我们在输入框中输入关键词,点击搜索或查询时,然后得到结果。深究其背后的故事,搜索引擎做了很多事情。  在搜索引擎网站,比如百度,在其后台有一个非常庞大的数据库,里面存储了海量的关键词,而每个关键词又对应着很多网址,这些网址是百度程序从茫茫的互联网上一点一点下载收

2017-12-22 17:08:37 854

原创 vue.js2.0实战:搭建开发环境及构建项目

首先搭建node环境,关于node环境搭建我就不详细叙述了,,不过推荐用淘宝镜像,优势在于快快快!DOS命令运行:cnpm install -g vue-cli 新建项目并进入到项目文件当中:

2017-12-22 16:55:50 306

原创 flex布局

<!-- display:指定HTML元素盒子类型/block/inline/inline-block/flex flex-direction:指定弹性容器中子元素排列方式 row:横向,从左到右(默认) row-reverse:反转横向排列(右对齐,从后往前排),最后一项在最前面 column:纵向排列 column-reverse:反纵向排列,最后一项排在最上面

2017-12-22 15:53:05 250

原创 高德地图API之定位API

关于定位,分为GPS定位和网络定位2种。GPS定位,精度较高,可达到10米,但室内不可用,且超级费电。网络定位,分为wifi定位和基站定位,都是通过获取wifi或者基站信息,然后查询对应的wifi或者基站位置数据库,得到的定位地点。定位数据库可以不断完善不断补充,所以,越定位越准确。如果使用高德API来实现位置定位、城市定位的方法,包含了IP定位,浏览器定位,检索定位等多种网络定位方法。当然,如果

2017-12-19 19:45:05 10740

原创 JSON的初步理解

JSON是一种数据格式,而不是一种变成语言。它并不从属于javascript,而且并不是只有js才使用JSON。很多语言都有针对JSON的解析器和序列化器。语法JSON语法可以表示以下三种类型的值:1、简单值:使用与js相同的语法,可以再json中表示字符串、数值、布尔值、和null,但是不能表示undefined;2、对象:对象作为一种复杂的数据类型,表示的是一组无序的键值对儿。

2017-12-17 17:15:34 222

原创 jQuery中的ajax

常用的jq-ajax方法通常有以下四种:1、$.load();2、$.post();3、$.get();4、$.ajax();那么,我们开始学习这四种方法。首先引入jq文件:1、load()$(selector).load(URL,data,callback);从服务器加载数据,并把返回的数据放入被选元素中。$("#divTip1").load(

2017-12-10 19:52:21 213

转载 浏览器兼容性处理

转载自:https://www.cnblogs.com/0351jiazhuang/p/4525354.html?utm_source=tuicool&utm_medium=referral1、居中问题div里的内容,IE默认为居中,而FF默认为左对齐,可以尝试增加代码margin: 0 auto;2、高度问题两上下排列或嵌套的div,上面的div设置高度(height

2017-12-05 16:21:46 225

原创 sessionStorage的理解和使用

Web Storage 包含如下两种机制:sessionStorage 为每一个给定的源(given origin)维持一个独立的存储区域,该存储区域在页面会话期间可用(即只要浏览器处于打开状态,包括页面重新加载和恢复)。localStorage 同样的功能,但是在浏览器关闭,然后重新打开后数据仍然存在。这两种机制是通过 Window.sessionStorage 和 Wind

2017-12-05 15:56:19 5241

原创 微信小程序开发-五星评价

今天在做自己的小程序的时候做到一个对店铺的评价,文字什么的都很easy,遇到一个有趣的五星评价。先想到一个直接选择12345星的五星评价,以后有3星半的评价的效果再继续补充。开始撸代码。。。。。首先上个wxml代码: 描述相符 = 1 ? img.selected:img.normal}}' bindtap="changeColor1">

2017-12-04 23:08:06 591

原创 微信小程序开发-高德地图api

第一步:既然是高德地图的使用,那么我们首先进入高德地图开放平台:高德地图注册之后在应用管理新建一个应用获取key获取key之后我们去高德地图API看看高德对API的介绍,相关下载那有sdk的下载链接,参考文档有相关的方法介绍。第二步:登录微信开发者平台,在设置里面获取appid,另外在服务器域名设置里面将https://restapi.ama

2017-11-22 17:07:21 14207 2

原创 Vue学习日志:事件处理器(8)

监听事件可以用v-on指令监听DOM事件来触发一些javascript代码。例如: 增加 1 这个按钮被点击了 {{ counter }} 次。 var app = new Vue({ el: '#app', data: { counter: 0 } })方法事件处理器许多事件处理的逻辑都很复杂,所以直接把 Jav

2017-11-17 15:36:31 297

原创 Vue学习日志:列表渲染(7)

v-for我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名。1、基本用法 {{ item.message }}var example1 = new Vue({ el: '#example-1', data: {

2017-11-17 14:34:39 883

原创 Vue学习日志:条件渲染(6)

v-if在字符串模板中,如 Handlebars ,我们得像这样写一个条件块:{{#if ok}} Yes{{/if}}在 Vue.js ,我们使用 v-if 指令实现同样的功能:Yes也可以用 v-else 添加一个 “else” 块:YesNo1、template v-if因为 v-if 是一个指令,需要将它添加到一个元素上。但是如果我们想切换多个元素呢

2017-11-17 14:25:30 213

原创 Vue学习日志:Class 与 Style 绑定(5)

数据绑定一个常见需求是操作元素的 class 列表和它的内联样式。因为它们都是属性 ,我们可以用v-bind 处理它们:只需要计算出表达式最终的字符串。不过,字符串拼接麻烦又易错。因此,在v-bind 用于 class 和 style 时, Vue.js 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。绑定 HTML Class1、对象语法我们可以传给v-bind

2017-11-16 22:39:46 201

原创 Vue学习日志:计算属性(4)

计算属性在模板中绑定表达式是非常便利的,但是它们实际上只用于简单的操作。在模板中放入太多的逻辑会让模板过重且难以维护。例如: {{ message.split('').reverse().join('') }}在这种情况下,模板不再简单和清晰。在实现反向显示 message 之前,你应该确认它。这个问题在你不止一次反向显示 message 的时候变得更加糟

2017-11-16 20:50:32 283

原创 Vue学习日志:模板语法(3)

一、模板语法Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue实例的数据。所有 Vue.js 的模板都是合法的 HTML ,所以能被遵循规范的浏览器和 HTML 解析器解析。在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

2017-11-16 20:00:05 420

原创 Vue学习日志:Vue实例(2)

一、创建一个Vue的实例每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的:var vm = new Vue()二、数据和方法当一个 Vue 实例被创建时,它向 Vue 的**响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,视图将会产生“响应”,即匹配更新为新的值。var data = {a:1};var vm = n

2017-11-15 13:30:41 304

原创 Vue学习日志:初识VUE(1)

一、概念Vue.js(读音 /vjuː/,类似于 view) 是一套构建用户界面的渐进式框架。与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层,它不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与单文件组件和 Vue 生态系统支持的库结合使用时,Vue 也完全能够为复杂的单页应用程序提供驱动。二、简单介绍1、声明式渲染

2017-11-14 23:17:03 370

原创 微信小程序-兼容

说到兼容,那么我们先获取系统信息看看。wx.getSystemInfo(OBJECT)获取系统信息同步:wx.getSystemInfo({ success: function(res) { console.log("异步获取系统信息:"); console.log(res); }, })异步:try {

2017-11-12 22:08:37 2259

原创 微信小程序开发-导航条

在小程序开发中,导航条的设置方法有几种。One:在app.js的window中设置,如果其他地方没有单独设置的话,这里的设置会运用到所有页面。"window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText":

2017-11-12 20:29:38 553

原创 微信小程序开发-交互反馈

官网文档链接:交互反馈共用的wxml:showToastshowLoadinghideToasthideLoadingshowModalshowActionSheetwx.showToast(OBJECT)显示消息提示框showToastView:function(){ wx.showToast({ title: 'showToast',

2017-11-12 16:19:55 1787

原创 微信小程序开发-图片(媒体)

相关官方文档链接:媒体-图片对于选择图片,别的不说,先来一波代码再分析。wxml:buttonbindtap='chooseImg'type='primary'>选择图片button>viewclass="imgView"style='width:100px;height:100px;margin:10px auto;border:1px solid #00

2017-11-11 22:32:25 311

原创 微信小程序开发-网络请求

首先我们看下官方文档,然后再说说自己的理解和demo官方文档链接:官方文档-网络请求我们有几个需要注意的地方:1、header不能设置referer;2、method的有效值要大写;3、数据类型是json(默认json)会做一次JSON.prase;4、success返回参数里面的header最低版本是1.2.0,必要的时候需要进行兼容处理;5、网络请求返回值时

2017-11-11 21:27:21 814

原创 微信小程序开发-列表渲染和条件渲染

数据绑定我就不说,看看官方文档就行了,主要就注意下this.setData({})改变数据值就行。一、列表渲染在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 itemblock并不会渲染出来wx:key项目的唯一标识符,一般来说最好设置一个挺不错的,免得报wa

2017-11-11 16:32:04 1784

原创 微信小程序-模块化

wxml、js、wxss三类都可以模块化!!!一、js类可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。Tip:首先先要了解一点,每个js里定义的变量、函数,只在当前的文件里有效,也就是说每个js文件的作用域只在文件内部模块文件:function sayHi(name)

2017-11-11 15:23:04 1933

原创 微信小程序开发-路由

我们先看看官网是怎么介绍页面路由的。页面路由在小程序中所有页面的路由全部由框架进行管理。页面栈框架以栈的形式维护了当前的所有页面。 当发生路由切换的时候,页面栈的表现如下:路由方式页面栈表现初始化新页面入栈打开新页面新页面入栈页面重定向当前页面出栈,新页面入栈页面返回页面不断出栈,直

2017-11-11 14:39:30 320

原创 微信小程序开发-配置

首先我要吐槽下,我也是最近才学微信小程序,遇到问题网上看了很多资料,要么不全,要么就是照搬官网教程。我花点时间自己按照官网的介绍重新学习一边并且写成教程。有不足的地方希望各位大神看到了评论说一下。。。。Zzzz配置:app.json文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。几个当中pages是必填的!!!!

2017-11-11 03:56:35 848

原创 微信小程序-参数传递

1、列表index下标取值实现方式:data-index="{{index}}"挖坑及e.currentTarget.dataset.index来填坑即可wxml:view wx:for="{{adress}}" bindtap='delete' wx:key="{{adress}}" data-index="{{index}}">text>{{

2017-11-10 16:12:38 365

原创 微信小程序-tab选项卡

目的:tab选项卡知识点: 1、flex布局; 2、数据绑定; 3、条件渲染; 4、列表渲染; 5、事件;

2017-11-08 18:47:30 1128 2

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除