微信小程序 （六）模块化详细介绍

2017年02月06日 39 阅读

模块化也就是将一些通用的东西抽出来放到一个文件中，通过module.exports去暴露接口。我们在最初新建项目时就有个util.js文件就是被模块化处理时间的 /** * 处理具体业务逻辑 */function formatTime（date） { //获取年月日 var year = date.getFullYear（） var month = date.getMonth（） + 1 var day = date.getDate（） //获取时分秒 v...

微信小程序 （七）数据绑定详细介绍

2017年02月06日 39 阅读

数据绑定有一部分前几个看着还行，后面的几个可能有几个不理解，界面展示的数据有的也因为条件没法显示。看不懂的可以先记着，后面真正用到时就会明白，反正我是这样想的。这里先记录下data.wxml<！--数据绑定使用对象---内容--><view>{{message}}</view><！--数据绑定使用对象---组件属性---需要在双引号之内--><view id="item-{{id}}">组件属性&...

微信小程序 （八）View组件详细介绍

2017年02月06日 38 阅读

刚看到这个效果的时候还真是和ReactNative的效果一致，属性也基本的一样. view这个组件就是一个视图组件使用起来非常简单。主要属性：flex-direction： 主要两个特性”row”横向排列”column”纵向排列justify-content 主轴的对齐方式（如果flex-direction为row则主轴就是水平方向）可选属性 （‘flex-start", ‘flex-end", ‘center", ‘space-between", ‘sp...

微信小程序（九）scroll-view组件详细介绍

2017年02月06日 37 阅读

scroll-view为滚动视图，分为水平滚动和垂直滚动。注意滚动视图垂直滚动时一定要设置高度否则的话scroll-view不会生效。滚动视图常用的地方一般都是Item项比较多的界面，比如我的模块主要属性：使用演示：wxml<！--垂直滚动，这里必须设置高度--><scroll-view scroll-y="true" style="height: 200px"><view style="background: red; wi...

微信小程序（十）swiper组件详细介绍

2017年02月06日 37 阅读

Android写过轮播图的痛楚只有写过的知道，相对还是比较麻烦的，并没有一个轮播图组件，有个ViewPage也需要自己定制，IOS则多用UIScrollerView去实现，这个swiper封装的相对还是方便的，使用方式也相对那俩容易些。主要属性：属性只需要设置就行了 也可以抽到js文件的data中进行数据绑定，监听使用bindchange，在js中做业务处理。wxml<！--是否显示圆点，自动播放， 间隔时间， 监听滚动和点击事件--><...

微信小程序（十一）icon组件详细介绍

2017年02月06日 42 阅读

这些是提供的所支持的图标样式，根据需求在此基础上去修改大小和颜色。主要属性：使用方式：wxml<！--成功图标--><icon type="success" size="40"/><！--安全成功标志图标--><icon type="safe_success" size="40"/><！--提示信息图标--><icon type="info" size="40"/><！--带圆的...

通过JS获取Request.QueryString（）参数的值实现方法

2017年02月06日 40 阅读

如下所示：function getArgs（strParame） {var args = new Object（ ）;var query = location.search.substring（1）; // Get query stringvar pairs = query.split（"&"）; // Break at ampersandfor（var i = 0; i < pairs.length; i++） {var pos = pairs[i...

JSON与String互转的实现方法（Javascript）

2017年02月06日 39 阅读

JSON => String:jsonToString: function（obj）{ var THIS = this;switch（typeof（obj））{ case "string": return """ + obj.replace（/（["\]）/g, "\$1"） + """; case "array": return "[" + obj.map（THIS.jsonToString）.join（","） + "]"; case "obje...

js转html实体的方法

2017年02月06日 37 阅读

方法一： 用的浏览器内部转换器实现转换，方法是动态创建一个容器标签元素，如DIV，将要转换的字符串设置为这个元素的innerText，然后返回这个元素的innerHTML，即得到经过HTML编码转换的字符串。 function HTMLEncode （ input ） { var converter = document.createElement（"DIV"）; converter.innerText = input; var output = conv...

Javascript json object 与string 相互转换的简单实现

2017年02月06日 38 阅读

Javascript json object 与string 相互转换的简单实现function obj2str（o）{var r = [];if（typeof o == "string" || o == null） { return o;}if（typeof o == "object"）{ if（！o.sort）{r[0]="{"for（var i in o）{ r[r.length]=i; r[r.length]=":"; r[r.length]=ob...

JS不完全国际化&本地化手册 之 理论篇

2017年02月06日 40 阅读

前言 最近加入到新项目组负责前端技术预研和选型，其中涉及到一个熟悉又陌生的需求——国际化＆本地化。熟悉的是之前的项目也玩过，陌生的是之前的实现仅仅停留在"有"的阶段而已。趁着这个机会好好学习整理一下，为后面的技术选型做准备。 本篇将阐述国际化和本地化的概念，以及其中一个很重要的概念——Language tag（也叫Language code 或 Culture）。何为国际化？ 国际化我认为就是应用支持多语言和文化习俗（数...

微信小程序（十二）text组件详细介绍

2017年02月06日 39 阅读

通常文本设置要不在wxml中设置，再要不就是通过weml绑定在js中设置文字。wxml<view > <text>我是文本组件</text></view><text>{{text}}</text>jsPage（{ /*** 初始化数据*/ data:{ text:"我是在js文件中绑定的文本" }, onLoad:function（options）{ // 页面初始化 options为...

微信小程序（十三）progress组件详细介绍

2017年02月06日 39 阅读

进度条描述的是一种加载的状态，比如软件升级下载进度， 视频，图片下载进度…主要属性：wxml<progress percent="80"show-info="true" stroke-width="5"color="red"active="true"/>...

微信小程序（十四）button组件详细介绍

2017年02月06日 40 阅读

button按钮用的算是最普遍的组件之一。主要属性：wxml<！--按钮默认样式，点击事件--><button type="defaule" bindtap="clickButton">Defalut</button><！--原始颜色，不可点击状态， 正在加载状态--><button type="primary" disabled="true" loading="true">Primary<...

jQuery实现图片轮播效果代码

2017年02月06日 43 阅读

整理以前用jQuery实现的图片轮播效果。1. 不做操作时，自动轮播2. 鼠标悬浮在图片上时，停止自动轮播，隐藏在图片左右的箭头会显示出来3. 手动轮播1：鼠标指向图片底部的小标按钮，可以切换对应的图片4. 手动轮播2：点击左右箭头也可以切换图片效果图：（PS：用软件捕捉的，不太会弄，感觉图片都失真了）下面是代码区域：**inde.html部分代码**<div class="box"> <ul class="img"><li ...

微信小程序（十五）checkbox组件详细介绍

2017年02月06日 41 阅读

不得不吐糟下checkbox默认样式真是有点略丑！！！checkbox组件为一个多选框被放到checkbox-group组中，并在checkbox-group（只能包含checkbox）中设置监听事件。checkbox-group监听方法：checkbox多选属性：wxml<！--checkbox-group就是一个checkbox组 有个监听事件bindchange，监听数据选中和取消--><checkbox-group bindcha...

jQuery实现右键菜单、遮罩等效果代码

2017年02月06日 41 阅读

最近要做个某管理系统的界面，然后涉及到右键菜单，因为之前没有做过所以就做了一下~感觉还可以，不过我个人不是很喜欢右键菜单的这种形式。操作：在固定区域内点击鼠标右键出现菜单，然后选择任意一项后进行对应页面的跳转。刚开始的想法是用catch..case..的方法，对应不同的选项，只改变弹出层里的内容，但是内容都要用jQuery生成拼接，所以选用了比较简单的页面跳转。下面就只贴上一个示例页面的相关代码。先上效果图:**index.html主要代码**<di...

微信小程序（十六）form组件详细介绍

2017年02月06日 40 阅读

form表单组件 是提交form内的所有选中属性的值，注意每个form表单内的组件都必须有name属性指定否则提交不上去，button中的type两个submit，reset属性分别对应form的两个事件主要属性： wxml<form bindsubmit="listenFormSubmit" bindreser="listenFormReser" > <checkbox-group name="checkbox" bindchange=...

js仿支付宝多方框输入支付密码效果

2017年02月06日 39 阅读

上次看到别人说写一个类似支付宝支付密码的输入框效果，今天就想自己写了试试看，大体功能是实现了。已实现部分： 1. 焦点会随着输入数值往后推移 2. 如果输入的非0-9，则会出现提示 3. 按Backspance回车可以对应格子焦点往前推移 4. 按回车或者点击按钮可以触发按钮点击事件，获得输入值未完善部分： 1. 在控制输入类型的时候，只有0-9、非0-9以及回车、回删几个键盘事件的区分，不够完善 2. 输入框用的input标签，password类型，会将...

JavaScript面试题大全（推荐）

2017年02月06日 41 阅读

1.求y和z的值是多少？<script type="text/javascript">var x = 1;var y = 0;var z = 0;function add（n）{n=n+1;}y = add（x）;function add（n）{n=n+3;}z = add（x）;</script>都为undefined，因为没有返回值。2.javascript是面向对象的，怎么体现javascript的继承关系？使用prototy...