2017年02月_michael_ouyang

08月 07月 06月 05月 04月 03月 02月 01月

原创微信小程序之自定义轮播图实例 —— 微信小程序实战系列（3）

轮播图是大部分应用的一个常用的功能，常用于广告投放、产品展示、活动展示等等。漂亮的轮播图效果可以吸引用户的点击，达到推广产品的作用。废话少说，下面开始动手。业务需求：5个图片轮番播放，可以左右滑动，点击指示点可以切换图片重点说明：由于微信小程序，整个项目编译后的大小不能超过1M

2017-02-28 12:55:29 52741 6

原创微信小程序之加载更多（分页加载）实例 —— 微信小程序实战系列（2）

上拉加载（分页加载）当用户打开一个页面时，假设后台数据量庞大时，一次性地返回所有数据给客户端，页面的打开速度就会有所下降，而且用户只看上面的内容而不需要看后面的内容时，也浪费用户流量，基于优化的角度来考虑，后台不要一次性返回所有数据，当用户有需要再往下翻的时候，再加载更加数据出来。业务需求：列表滚动到底部时，继续往上拉，加载更多内容必备参数：（1）pagein

2017-02-24 17:31:21 96176 18

原创微信小程序之顶部导航栏（选项卡）实例 —— 微信小程序实战系列（1）

顶部导航栏

2017-02-22 16:44:42 106246 18

原创微信小程序之组件 —— 微信小程序教程系列（19）

在小程序中，不能使用html等标签元素，只能使用微信所提供的组件元素，组件列表如下：视图容器view组件scroll-view组件swiper组件基础内容icon组件text组件progress组件表单组件button组件checkbox组件form组件input

2017-02-21 10:48:16 9154

原创微信小程序之上拉加载和下拉刷新 —— 微信小程序教程系列（18）

在微信小程序上实现下拉刷新、上拉加载的效果使用系统提供的onPullDownRefresh、onReachBottom这2个事件，前提需要在app.json或page.json配置文件中设置，才能使用。app.json是全应用的页面都可以使用该事件，page.json则只是对应的页面才可以使用。属性类型默认值描

2017-02-15 19:48:37 15770 1

原创微信小程序获取系统日期和时间 —— 微信小程序教程系列（17）

获取当前系统日期和时间在小程序中，新建项目时，就会有一个utils.js文件，就是获取日期和时间的，代码如下：utils.js：function formatTime(date) { var year = date.getFullYear() var month = date.getMonth() + 1 var day = date.getDate()

2017-02-15 10:09:53 85943 11

原创微信小程序使用百度api获取天气信息 —— 微信小程序教程系列（16）

之前已经介绍过，如何使用百度地图api来获取地理位置信息微信小程序的百度地图获取地理位置 —— 微信小程序教程系列（15）下面介绍使用百度api来获取天气信息。1> 第一步：先到百度开放平台http://lbsyun.baidu.com申请akhttp://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key

2017-02-14 15:57:17 15147 11

原创微信小程序的百度地图获取地理位置 —— 微信小程序教程系列（15）

由于小程序只提供了我们一个获取地理位置、速度的api，并没有获取的相关地位位置的信息等等，因此我们还需要借助一些第三方的api来实现下面，介绍使用百度地图的api来获取地位位置的信息。1> 第一步：先到百度开放平台http://lbsyun.baidu.com申请akhttp://lbsyun.baidu.com/index.php?title=wxjsapi/

2017-02-14 13:55:34 47502 23

原创微信小程序的网络请求 —— 微信小程序教程系列（14）

网络请求，基本上是必须的环节之一。小程序提供了wx.request(object)，与开发者的服务器实现数据交互的一个很重要的api。最简单的用法如下（以GET请求为例）[javascript] view plain copybindSearchChange:fu

2017-02-13 17:01:49 15892

原创微信小程序之wxss —— 微信小程序教程系列（13）

微信小程序给我们提供了尺寸单位rpx，帮助开发者很好地解决适配的问题示例：index.wxml：index.wxss：运行：选择iphone 4手机查看选择iphone 6 Plus手机查看

2017-02-13 16:31:42 11982

原创微信小程序视图层的模板 —— 微信小程序教程系列（12）

示例：template.wxml：新建一个文件夹tem，并新建一个template.wxml文件使用定义模板，并使用name指定模板的名字index.wxml：使用import导入模板使用模板需要使用，并使用属性is指定使用的模板名字运行：

2017-02-13 16:10:47 8558 1

原创微信小程序视图层的列表渲染 —— 微信小程序教程系列（11）

示例：test.wxml：在组件内，使用属性wx:for=”{{ 数组 }}” ，数组当前项的变量名默认为item（变量需要使用双花括号）test.js：在Page()内的data定义一个数组运行：

2017-02-13 15:38:23 13456

原创微信小程序之wx:if视图层的条件渲染 —— 微信小程序教程系列（10）

使用wx:if进行视图层的条件渲染

2017-02-13 15:20:41 102942 4

原创微信小程序视图层的数据绑定 —— 微信小程序教程系列（9）

数据绑定WXML 中的动态数据均来自对应 Page 的 data。简单绑定数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于使用方法： {{ 内容 }} 在组件中使用！不论是在组件包含在内，还是在组件属性内的，都是需要使用双花括号！示例：index.wxml：index.js：

2017-02-13 14:28:20 10611

原创微信小程序的作用域和模块化 —— 微信小程序教程系列（8）

文件作用域模块化

2017-02-13 11:32:56 12858 4

原创微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列（7）

设置标题栏设置导航栏

2017-02-13 10:17:16 123269 8

原创微信小程序的页面跳转和参数传递 —— 微信小程序教程系列（6）

页面跳转可以使用微信小程序提交的api ：wx.navigeteTo

2017-02-09 13:01:33 72347 6

原创微信小程序的如何使用全局属性 —— 微信小程序教程系列（5）

微信小程序提供了app.js文件，用于放置一些全局的函数和全局的属性，方便开发者的调用一般情况下，我都会把一些常用的函数和属性写在app.js文件内，这样不用重复写代码。下面以全局属性为例新建一个hello world项目在app.js页面中有一个globalData，这是一个全局对象在里面添加一个info:"你好"那么要怎样才能获取到这些全局的属性使用呢？

2017-02-08 14:24:43 49232 2

原创微信小程序如何新建页面 —— 微信小程序教程系列（4）

例如在web的开发中，新建一个页面只需要新建一个html文件即可。但是到在微信小程序中，新建一个页面也不只是新建一个wxml文件，那么该如何做呢？下面我们一起来学习新建一个页面的步骤：1> 必须要创建一个wxml文件和一个js文件。2> js文件内，需要写上注册页面的Page()函数！3> 并且要到app.json文件中，注册新建页面的路径信息。

2017-02-08 10:12:05 39253 3

原创微信小程序的动态修改视图层的数据 —— 微信小程序教程系列（3）

我们在正常的开发上，一般都比较少把视图层上面的数据写成固定形式的，很多都是通过动态获取数据时并更新页面上的数据显示出来下面让我们来一些学习，如何动态修改视图层的数据需求：创建一个按钮，点击这个按钮，改变视图层上面的数据示例：新建一个微信小程序的Hello World项目，找到index.wxml文件index.wxml:使用一个元素，使用bindta

2017-02-08 09:52:12 32646 4