crazytea的博客

上一篇教程中写道，开发工具会生成一个默认的程序框架，其中程序的主流程代码包含在app.js中。默认实现中，该部分功能比较简单，不过对于学研究小程序开发还是比较有价值的。由于代码行数不多，下面一次性贴出来后进行讲解//app.jsApp({ onLaunch: function () { //调用API从本地缓存中获取数据 var logs = wx.getStorageSync

周一晚上10点，腾讯官方放出消息，小程序新增6大能力，并面向个人开发者开放。这也就意味着每个人都可以申请小程序开发资格(之前个人开发者没有wxappid，只能在开发工具上进行体验)。下面是个人申请微信小程序开发的详细教程。首先访问微信小程序申请，选择小程序, 点击查看详情拉到页面最下面点击前往注册进入小程序申请页面填写对应信息，(注意邮箱不能是注册过微信公众平台或微信开发平台的邮箱)，点击注册后会发

抽屉菜单是app上常见的菜单设计方式，典型的抽屉菜单如下图所示下面展示如何基于微信小程序实现抽屉菜单,最终效果如下图所示： 页面包含一个主页和抽屉菜单页，为了实现滑动效果，页面采用absolute布局，代码如下 index.wxml<view id='id-main-page' class='main-page' animation='{{animationData}}' style='left

在实际的移动应用程序交互方式中，最常见的就是滑动操作。像左右滑动切换页面，手指张开来放大图片等，都是由滑动操作来完成的。微信小程序默认提供的相关事件如下：tap对应点击操作，还提供了longtap来支持长按操作，这些都比较简单，就不多做讲述。 touchmove对应滑动操作，通过bindtouchmove即可响应滑动操作。//wxml"id" bindtouchmove="

教程接上篇，当需要展示一组数据时，可以使用wx:for//.wxml<view wx:for="{{array}}"> {{index}}: {{item.message}}</view>//.jsage({ data: { array: [{ message: 'foo', }, { message: 'bar' }] }})其中

在之前的教程中写到，微信小程序框架将程序分为逻辑层(.js文件)和视图层(.wxml文件)。这是一种常见的UI和逻辑分离的程序设计方式，开发出来的程序更加灵活，易扩展。这种程序设计方式通常要解决两个问题: UI层响应逻辑层逻辑和数据的变化 UI层将用户的操作反馈到逻辑层通常来说可以让UI层和逻辑层互相暴露接口给对方，不过出于对灵活性和扩展性的考虑，会引入中间层来进行管理，这

前面说到，微信小程序框架是逻辑层与UI层分析的设计方式，这种设计方式需要解决两个问题 UI层响应逻辑层逻辑和数据的变化 UI层将用户的操作反馈到逻辑层其中前面讲到的数据绑定解决了第一个问题，而事件则解决第二个问题 什么是事件 事件是视图层到逻辑层的通讯方式。 事件可以将用户的行为反馈到逻辑层进行处理。 事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的

上一篇教程中对index页面进行了解析，这一篇来解析下logs页面老规矩先上图该页面包含返回按钮(用于返回index页面)，页面title和程序启动日志列表。 和index页面相比，logs页面多了一个logs.json文件，来配置页面title的内容{ "navigationBarTitleText": "查看启动日志"}更多配置项可以参考配置 小程序<!--logs.wxml-->

这篇教程是微信小程序开发教程的第一篇，我会简要介绍下微信小程序开发相关的一些基本知识获取AppID 如果你是收到邀请的开发者，我们会提供一个帐号，利用提供的帐号，登录 https://mp.weixin.qq.com ，就可以在网站的“设置”-“开发者设置”中，查看到微信小程序的 AppID 了，注意不可直接使用服务号 或订阅号的 AppID 。上述内容来自微信的官方教程。按照微信官方的说法

日前，微信团队宣布微信小程序正式开启内测，这使之前关于”微信应用号”的消息得到证实。首先看看微信之父是如何对其进行描述的 小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。从描述上看，小程序的定位是轻量级，即插即用，用完即走。这似乎就是H5应用的特性。我们都清楚，H5应用胜

手势解锁是app上常见的解锁方式，相比输入密码方式操作起来要方便许多。下面展示如何基于微信小程序实现手机解锁。最终实现效果如下图: 整个功能基于canvas实现，首先添加画布组件，并设定样式<!--index.wxml--><view class="container"> <canvas canvas-id="id-gesture-lock" class="gesture-lock" bin