1.

最新闲来无事，看了看研究了下微信小程序，从环境搭建到项目案例，废话不多说，手把手带你入门微信小程序！

1：先下载微信的开发工具：2.

地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html可以根据自己的电脑下载对应的版本！第一次打开：会显示如下微信扫描界面

2：模式选择3.

开发者工具提供两种开发模式的选择。

4.

公众号网页调试。选择公众号网页调试，将直接进入公众号网页项目调试界面，在地址栏输入URL，即可调试该网页的微信授权以及微信JS-SDK功能。小程序调试。选择小程序调试，将进入小程序本地项目管理页，可以新建、删除本地的项目，或者选择进入已存在的本地项目。

5.

我们这里可以选择小程序项目

6.

接下来需要我们验证小程序appID(没有的可以点击体验也是一样可以的)

7.

接下来，我们就可以做开发了：

8.

这里是我自己健的目录！

9.

我们可以看到每个页面都应该有四个文件（后缀：.js,.json,.wxml,.wxss）其实这里的.json是配置文件，如果不需要配置的话是可以省略的！

3：app.json10.

我先说这个文件：这个是全局的配置文件栗子：

{"pages":["pages/index/index","pages/home/home","pages/home/home-detidal/home-detidal"],"window":{"backgroundTextStyle":"light","navigationBarBackgroundColor":"#405f80","navigationBarTitleText":"学习小程序","navigationBarTextStyle":"#fff"}}11.

（1）pages每个页面我们都在在这里注入下,我建了三个页面默认启动页面为index页面。（谁在第一位谁就为打开页面）！(2)window全局配置顶部的的导航！如：项目引导页面

!--index.wxml--viewclass"container"imagesrc'/images/icon/avator.jpg'class'avator'/imagetextclass'user-name'Hello,小程序/textviewclass'moto-container'bindtap"openHome"textclass'moto'开启小程序之旅/text/view/view//index.wxsspage{background-color:#a1d483;}.container{display:flex;flex-direction:column;align-items:center;}.avator{width:200rpx;height:200rpx;border-radius:50%;margin-top:160rpx;}.user-name{font-size:32rpx;margin-top:100rpx;}.moto-container{width:200rpx;height:80rpx;border:1pxsolid#405f80;border-radius:5px;text-align:center;margin-top:200rpx;}.moto{font-size:22rpx;line-height:80rpx;font-weight:bold;}12.

最终页面展示：

13.

可以看到下面有个按钮，这里我们做页面切换跳转用的！

3：事件14.

什么是事件

事件是视图层到逻辑层的通讯方式。事件可以将用户的行为反馈到逻辑层进行处理。事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。事件对象可以携带额外信息，如id,dataset,touches。touchstart//手指触摸动作开始touchmove//手指触摸后移动touchcancel//手指触摸动作被打断，如来电提醒，弹窗touchend//手指触摸动作结束tap//手指触摸后马上离开longpress//手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发1.5.0longtap//手指触摸后，超过350ms再离开（推荐使用longpress事件代替）transitionend//会在WXSStransition或wx.createAnimation动画结束后触发animationstart//会在一个WXSSanimation动画开始时触发animationiteration//会在一个WXSSanimation一次迭代结束时触发animationend//会在一个WXSSanimation动画完成时触发15.

具体每个事件的用法，大家可以查看官方api里面讲解的很详细！我们可以看到我已经添加了一个事件与方法了

viewclass'moto-container'bindtap"openHome"textclass'moto'开启小程序之旅/text/view//bindtap"openHome"16.

js事件我们都写在对应的js文件里

Page({openHome(){wx.redirectTo({url:'../home/home'})}})17.

ps.还有一个跳转wx.navigateTo。大家可以自己试下两个跳转的区别在哪里？接下来我会继续写项目案例，分享一个完整的项目！