最近一段时间小程序异常的火,特别是小程序游戏,刚好也有个小程序大赛,自己恰巧会前端,于是,我就开始了小程序的学习旅程,这个过程确实很有意思。
先来说说小程序的官方定义
小程序
小程序是指微信公众平台小程序,小程序可以帮助开发者快速的开发小程序,小程序可以在微信内被便捷地获取和传播;是一种不需要下载安装即可使用的应用小程序,和原有的三种公众号是并行的体系。
简单地说,小程序出现后,手机内存将不再是问题,数量众多、功能强大的微信小程序随用随删很方便使用。
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里面设置
我们最后来看看我做的第一个页面
这里点击Welcome to use,它会跳转到下一个页面的,不妨给大家看看下一个页面
最上面的是一个轮播图,小程序中的轮播图就是一个<swiper></swiper>
直接设置的,比之前用swiper插件,或者自己手写简单多了。
小程序还有很多好用的功能,其中也会用到ES6的有关知识,而且它和react框架有相同之处,很好上手,对于小程序的学习还在继续……