最近一段时间小程序异常的火，特别是小程序游戏，刚好也有个小程序大赛，自己恰巧会前端，于是，我就开始了小程序的学习旅程，这个过程确实很有意思。
先来说说小程序的官方定义
小程序
小程序是指微信公众平台小程序，小程序可以帮助开发者快速的开发小程序，小程序可以在微信内被便捷地获取和传播；是一种不需要下载安装即可使用的应用小程序，和原有的三种公众号是并行的体系。
简单地说，小程序出现后，手机内存将不再是问题，数量众多、功能强大的微信小程序随用随删很方便使用。
2017年1月9日，微信小程序正式上线。
主要功能
微信小程序的功能，包括线下扫码、对话分享、消息通知、小程序切换、历史列表、公众号关联和搜索查找等7大功能。
我们来具体说说吧！
- 线下扫码：用户可以在小程序中使用扫一扫。
- 对话分享：用户可以分享小程序或其中的任何一个页面给好友或群聊。
- 消息通知：商户可以发送模板消息给接受过服务的用户，用户可以在小程序内联系客服，支持文字和图片。
- 小程序切换：用户可以在使用小程序的过程中快速返回聊天。
- 历史列表：用户使用过的小程序会被放入列表，方便下次使用。
- 小程序公众号关联：微信小程序可与公众号进行关联。
- 搜索查找：用户可直接根据名称或品牌搜索小程序。
可能有人会问，小程序可以和现有的App 打通吗？
其实小程序是借助微信联合登录，和开发者已有的App 后台的用户数据进行打通，但不会支持小程序和App 直接的跳转。
小程序的学习
对于小程序的学习给大家推荐直接看
微信小程序开发官方文档
官方文档教程1：http://bcoder.cn/wxopen/
官方文档教程2：http://bing.aliaii.com/wxopen/
里面对于小程序介绍很详细，大家完全可以边看自己边敲，很有成就感。
小程序开发工具
微信web开发者工具
微信web开发者工具为帮助开发者更方便、更安全地开发和调试基于微信的网页，它是一个桌面应用，通过模拟微信客户端的表现，使得开发者可以使用这个工具方便地在 PC 或者 Mac 上进行开发和调试工作。
下载完工具我们就该来写页面啦！
小程序实例
我们在写页面之前来介绍一下微信小程序中的四种类型的文件
js ---------- JavaScrip文件
json -------- 项目配置文件，负责窗口颜色等等
wxml ------- 类似HTML文件
wxss ------- 类似CSS文件
在根目录下用app来命名的这四中类型的文件，就是程序入口文件。
app.json
必须要有这个文件，如果没有这个文件，IDE会报错，因为微信框架把这个作为配置文件入口，你只需创建这个文件，里面写个大括号就行（不然会报错，说你的入口文件有问题）；
之后我们会在这里对整个小程序的全局进行配置。记录了页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。
app.js
必须要有这个文件，没有也是会报错！但是这个文件创建一下就行什么都不需要写
之后我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量。
app.wxss
这个文件不是必须的。因为它只是个全局CSS样式文件，当然你要是有全局样式完全可以写进去！
app.wxml
这个也不是必须的，而且这个并不是指主界面，因为小程序的主页面是靠在JSON文件中配置来决定的，那个页面在前配置，那个页面就是主页面。
程序入口文件
接着我们来写一个主页面吧！
首先创建wlcome目录，然后创建上面所说的几个页面
1.welcome.wxml文件负责页面构建，就像.html文件一样
<view class='container'>
<image catchtap='onPostTap' class="user-girls"src="/images/avatar/1.png"></image>
<text class='user-name'>Hello,Passerby</text>
<view class="moto-container" bindtap='onTap'>
<text class="moto">Welcome to use</text>
</view>
</view>
这里的<view></view>跟我们的<div></div>一样，包含内容的一个容器。
2.welcome.wxss文件负责页面渲染，就像.css文件一样
.container{
display: flex;
flex-direction: column;
align-items: center;
height: 667px;
}
.user-girls{
width: 200rpx;
height: 200rpx;
margin-top: 160rpx;
border-radius: 50%;
}
.user-name{
font-size: 32rpx;
font-weight: bold;
margin-top: 100px;
}
.moto-container{
border: 1px solid #405f80;
width: 200rpx;
height: 40px;
border-radius: 5px;
margin-top: 100px;
text-align: center;
}
.moto{
font-size: 22rpx;
font-weight: bold;
line-height: 40px;
}
这里我们用到了class属性来设置样式，样式的书写和在css中完全一样。
3.welcome.js 给页面加一些动态效果
（输入Page IDE会有提示），这些函数都会自动生成
Page({
onTap:function(){
wx.redirectTo({
url: '../posts/post',
})
},
data: {
},
onLoad: function (options) {
},
onReady: function () {
},
onShow: function () {
},
onHide: function () {
}，
onUnload: function () {
},
onPullDownRefresh: function () {
}，
onReachBottom: function () {
},
onShareAppMessage: function () {
}
})
接下来我们需要设置入口页面，上面提到了需要在app.json里面设置
app.json设置入口页面
我们最后来看看我做的第一个页面
Welcome页面
这里点击Welcome to use，它会跳转到下一个页面的，不妨给大家看看下一个页面
首页
最上面的是一个轮播图，小程序中的轮播图就是一个
<swiper></swiper> 直接设置的，比之前用swiper插件，或者自己手写简单多了。
小程序还有很多好用的功能，其中也会用到ES6的有关知识，而且它和react框架有相同之处，很好上手，对于小程序的学习还在继续......
网友评论