微信小程序栏目
提供一套基础系列教程,一套实战系列教程
michael_ouyang
吾将上下而求索
展开
-
微信小程序之手机号快速注册
为提升小程序使用体验,帮助用户更便捷地获取服务,小程序开放手机号快速填写组件,非个人开发者的小程序完成认证后即可使用。 1. 在新用户注册、联系方式登记等必要场景下,开发者均可在页面上部署手机号快速填写组件。2. 用户点击组件,完成弹窗授权后,即可直接将微信绑定的手机号填入,绝大部分情况下无需再进行短信验证码校验。3. 若用户不愿提供微信绑定的手机号,开发者需提供手动输入手机号功能原创 2017-08-26 15:54:06 · 14665 阅读 · 4 评论 -
微信小程序之小程序上线
在微信开发者工具,选择项目点击上传用管理员账户扫码 输入版本号,项目备注上传成功后,会出现上传时间,和编译包的大小。注意:编译包的大小不要超过2M打开微信公众平台——开发管理就能看到刚才上传的项目右边的选项中,可以直接提交,也可以选择体验版本(体验版本不需被审核)(1)选择体验版,需要管理员原创 2017-08-26 15:26:23 · 8352 阅读 · 0 评论 -
微信小程序之微信登陆 —— 微信小程序教程系列(20)
简介:微信登陆,在新建一个微信小程序Hello World项目的时候,就可以看到项目中出现了我们的微信头像,其实这个Hello World项目,就有一个简化版的微信登陆。只不过是,还没有写入到咱们自家的后台中而已。新建一个Hello World项目,找到app.js文件打开,代码如下:app.js:App({ onLaunch: function () {原创 2017-05-23 02:58:10 · 44725 阅读 · 7 评论 -
微信小程序之组件 —— 微信小程序教程系列(19)
在小程序中,不能使用html等标签元素,只能使用微信所提供的组件元素,组件列表如下:视图容器view组件scroll-view组件swiper组件基础内容icon组件text组件progress组件表单组件button组件checkbox组件form组件input原创 2017-02-21 10:48:16 · 9155 阅读 · 0 评论 -
微信小程序之上拉加载和下拉刷新 —— 微信小程序教程系列(18)
在微信小程序上实现下拉刷新、上拉加载的效果使用系统提供的onPullDownRefresh、onReachBottom这2个事件,前提需要在app.json或page.json配置文件中设置,才能使用。app.json是全应用的页面都可以使用该事件,page.json则只是对应的页面才可以使用。属性类型默认值描原创 2017-02-15 19:48:37 · 15779 阅读 · 1 评论 -
微信小程序之如何注册微信小程序
微信小程序之如何注册微信小程序原创 2017-01-23 23:51:47 · 6389 阅读 · 0 评论 -
微信小程序之购物车 —— 微信小程序实战商城系列(5)
续上一篇的文章:微信小程序之商品属性分类 —— 微信小程序实战商城系列(4)自从认识某人后,我收获了两个成功。登录成功、付款成功,而且还拥有了自己的一辆车:购物车也发现了自己的不足之处:余额不足。为大家介绍的就是购物车这里演示从商品列表中添加到购物车下面先做商品列表页。如下图:布局分析:首先一个list原创 2017-04-25 18:08:53 · 29812 阅读 · 12 评论 -
微信小程序之商品属性分类 —— 微信小程序实战商城系列(4)
续上一篇的文章:微信小程序之购物数量加减 —— 微信小程序实战商城系列(3)所提及的购物数量的加减,现在说说商品属性值联动选择。为了让同学们有个直观的了解,到电商网截了一个图片,就是红圈所示的部分现在就为大家介绍这个小组件,在小程序中,该如何去写下图为本项目的图:wxml:商品属性值联动选择原创 2017-04-17 13:12:20 · 25928 阅读 · 3 评论 -
微信小程序之购物数量加减 —— 微信小程序实战商城系列(3)
我们在购买宝贝的时候,购物的数量,经常是我们需要使用的,如下所示:在宝贝详情页里:在购物车里:现在就为大家介绍这个小组件,在小程序中,该如何去写下图为本项目的图:wxml: - +wxss:/*全局样式*/page { padding: 20px 0;}/*主容器*/.stepper {原创 2017-04-16 11:18:30 · 31436 阅读 · 13 评论 -
微信小程序之仿淘宝分类入口 —— 微信小程序实战商城系列(2)
分类入口,已经成为了商城项目必须的布局之一,这里以仿照淘宝的分类入口来做案例下图红框部分,就是本文重点讲解部分,另外本文并没有写点击某个入口跳转页面。如需学习页面跳转的同学,可以参考此文微信小程序的页面跳转和参数传递 —— 微信小程序教程系列(6)页面分析:使用for循环遍历所有项,插入页面,页面中的项使用左浮动,并使用百分比布局,设置20%的宽度每一项。原创 2017-04-15 00:57:49 · 18052 阅读 · 3 评论 -
微信小程序之侧栏分类 —— 微信小程序实战商城系列(1)
在商场项目中,一般都会有分类页面。分类页面可以给用户快速找到相关的商品,下面以侧栏分类为例,如下图布局分析:主盒子>左盒子>左盒子>右盒子>右盒子>主盒子>左盒子使用标准流右盒子使用绝对定位(top、right)wxml: {{item.tree.desc}}原创 2017-04-14 15:05:36 · 52916 阅读 · 12 评论 -
微信小程序之自定义模态弹窗(带动画)实例 —— 微信小程序实战系列(8)
首先看看官方提供的模态弹窗api如下:示例:这样的模态弹窗,充其量只能做个alert,提示一下信息。但是并不能使用它来处理复杂性的弹窗业务,因此写了Michael从新自定义了一个,采用了仿原生的样式写法wxml:button 弹窗标题 标题原创 2017-03-16 18:30:04 · 42619 阅读 · 8 评论 -
微信小程序之自定义抽屉菜单(从下拉出)实例 —— 微信小程序实战系列(7)
微信提供了动画api,就是下面这个相关链接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-animation.html#wxcreateanimationobject 通过使用这个创建动画的api,可以做出很多特效出来下面介绍一个抽屉菜单的案例实现代码:wxml:button原创 2017-03-09 10:02:50 · 30242 阅读 · 3 评论 -
微信小程序之自定义toast实例 —— 微信小程序实战系列(6)
微信提供了一个toast的api wx.showToast()相关连接:https://mp.weixin.qq.com/debug/wxadoc/dev/api/api-react.html#wxshowtoastobject 本来是比较好的,方便使用,但是这个toast会显示出图标,而且不能去除。假设:我们执行完业务的时候,toast一下,当执行成功的时候,效果还可以接受,如原创 2017-03-08 10:24:46 · 14947 阅读 · 1 评论 -
微信小程序之登录页实例 —— 微信小程序实战系列(5)
提供一个登录页面的案例,供同学们使用项目效果图:index.wxml: 账号 密码 登录 wxss:原创 2017-03-07 10:10:08 · 60628 阅读 · 10 评论 -
微信小程序之自定义轮播图实例 —— 微信小程序实战系列(3)
轮播图是大部分应用的一个常用的功能,常用于广告投放、产品展示、活动展示等等。漂亮的轮播图效果可以吸引用户的点击,达到推广产品的作用。废话少说,下面开始动手。 业务需求:5个图片轮番播放,可以左右滑动,点击指示点可以切换图片 重点说明:由于微信小程序,整个项目编译后的大小不能超过1M原创 2017-02-28 12:55:29 · 52768 阅读 · 6 评论 -
微信小程序之加载更多(分页加载)实例 —— 微信小程序实战系列(2)
上拉加载(分页加载) 当用户打开一个页面时,假设后台数据量庞大时,一次性地返回所有数据给客户端,页面的打开速度就会有所下降,而且用户只看上面的内容而不需要看后面的内容时,也浪费用户流量,基于优化的角度来考虑,后台不要一次性返回所有数据,当用户有需要再往下翻的时候,再加载更加数据出来。 业务需求:列表滚动到底部时,继续往上拉,加载更多内容 必备参数:(1)pagein原创 2017-02-24 17:31:21 · 96186 阅读 · 18 评论 -
微信小程序之顶部导航栏(选项卡)实例 —— 微信小程序实战系列(1)
顶部导航栏原创 2017-02-22 16:44:42 · 106284 阅读 · 18 评论 -
微信小程序教程系列
微信小程序教程系列原创 2017-01-24 01:06:42 · 82239 阅读 · 28 评论 -
微信开发者工具的快捷键
微信开发者工具的快捷键原创 2017-02-05 21:55:11 · 17243 阅读 · 0 评论 -
微信小程序的文件结构 —— 微信小程序教程系列(1)
文件结构原创 2017-02-05 22:05:21 · 29601 阅读 · 2 评论 -
微信小程序的生命周期实例演示 —— 微信小程序教程系列(2)
上篇教程微信小程序的文件结构 —— 微信小程序教程系列(1)微信小程序的生命周期函数有2个一个是App的生命周期另一个是Page的生命周期App的生命周期示例:演示App的生命周期函数app.js:App({ onLaunch: function () { console.log("App生命周原创 2017-02-06 15:06:55 · 26099 阅读 · 3 评论 -
微信小程序的动态修改视图层的数据 —— 微信小程序教程系列(3)
我们在正常的开发上,一般都比较少把视图层上面的数据写成固定形式的,很多都是通过动态获取数据时并更新页面上的数据显示出来下面让我们来一些学习,如何动态修改视图层的数据需求:创建一个按钮,点击这个按钮,改变视图层上面的数据示例:新建一个微信小程序的Hello World项目,找到index.wxml文件index.wxml:使用一个元素,使用bindta原创 2017-02-08 09:52:12 · 32649 阅读 · 4 评论 -
微信小程序如何新建页面 —— 微信小程序教程系列(4)
例如在web的开发中,新建一个页面只需要新建一个html文件即可。但是到在微信小程序中,新建一个页面也不只是新建一个wxml文件,那么该如何做呢?下面我们一起来学习新建一个页面的步骤:1> 必须要创建一个wxml文件和一个js文件。2> js文件内,需要写上注册页面的Page()函数!3> 并且要到app.json文件中,注册新建页面的路径信息。原创 2017-02-08 10:12:05 · 39306 阅读 · 3 评论 -
微信小程序的如何使用全局属性 —— 微信小程序教程系列(5)
微信小程序提供了app.js文件,用于放置一些全局的函数和全局的属性,方便开发者的调用一般情况下,我都会把一些常用的函数和属性写在app.js文件内,这样不用重复写代码。下面以全局属性为例新建一个hello world项目在app.js页面中有一个globalData,这是一个全局对象在里面添加一个info:"你好"那么要怎样才能获取到这些全局的属性使用呢?原创 2017-02-08 14:24:43 · 49237 阅读 · 2 评论 -
微信小程序的页面跳转和参数传递 —— 微信小程序教程系列(6)
页面跳转可以使用微信小程序提交的api :wx.navigeteTo原创 2017-02-09 13:01:33 · 72356 阅读 · 6 评论 -
微信小程序标题栏和导航栏的设置 —— 微信小程序教程系列(7)
设置标题栏设置导航栏原创 2017-02-13 10:17:16 · 123281 阅读 · 8 评论 -
微信小程序的作用域和模块化 —— 微信小程序教程系列(8)
文件作用域模块化原创 2017-02-13 11:32:56 · 12865 阅读 · 4 评论 -
微信小程序视图层的数据绑定 —— 微信小程序教程系列(9)
数据绑定WXML 中的动态数据均来自对应 Page 的 data。简单绑定数据绑定使用 Mustache 语法(双大括号)将变量包起来,可以作用于使用方法: {{ 内容 }} 在组件中使用!不论是在组件包含在内,还是在组件属性内的,都是需要使用双花括号!示例:index.wxml:index.js:原创 2017-02-13 14:28:20 · 10617 阅读 · 0 评论 -
微信小程序之wx:if视图层的条件渲染 —— 微信小程序教程系列(10)
使用wx:if进行视图层的条件渲染原创 2017-02-13 15:20:41 · 102953 阅读 · 4 评论 -
微信小程序视图层的列表渲染 —— 微信小程序教程系列(11)
示例:test.wxml:在组件内,使用属性wx:for=”{{ 数组 }}” ,数组当前项的变量名默认为item(变量需要使用双花括号)test.js:在Page()内的data定义一个数组运行:原创 2017-02-13 15:38:23 · 13459 阅读 · 0 评论 -
微信小程序视图层的模板 —— 微信小程序教程系列(12)
示例:template.wxml:新建一个文件夹tem,并新建一个template.wxml文件使用定义模板,并使用name指定模板的名字index.wxml:使用import导入模板使用模板需要使用,并使用属性is指定使用的模板名字运行:原创 2017-02-13 16:10:47 · 8562 阅读 · 1 评论 -
微信小程序之wxss —— 微信小程序教程系列(13)
微信小程序给我们提供了尺寸单位rpx,帮助开发者很好地解决适配的问题示例:index.wxml:index.wxss:运行:选择iphone 4手机查看选择iphone 6 Plus手机查看原创 2017-02-13 16:31:42 · 11989 阅读 · 0 评论 -
微信小程序的网络请求 —— 微信小程序教程系列(14)
网络请求,基本上是必须的环节之一。小程序提供了wx.request(object),与开发者的服务器实现数据交互的一个很重要的api。最简单的用法如下(以GET请求为例)[javascript] view plain copybindSearchChange:fu原创 2017-02-13 17:01:49 · 15898 阅读 · 0 评论 -
微信小程序的百度地图获取地理位置 —— 微信小程序教程系列(15)
由于小程序只提供了我们一个获取地理位置、速度的api,并没有获取的相关地位位置的信息等等,因此我们还需要借助一些第三方的api来实现下面,介绍使用百度地图的api来获取地位位置的信息。1> 第一步:先到百度开放平台http://lbsyun.baidu.com申请akhttp://lbsyun.baidu.com/index.php?title=wxjsapi/原创 2017-02-14 13:55:34 · 47510 阅读 · 23 评论 -
微信小程序使用百度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 · 15153 阅读 · 11 评论 -
微信小程序获取系统日期和时间 —— 微信小程序教程系列(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 · 85966 阅读 · 11 评论