最新闲来无事,看了看研究了下微信小程序,从环境搭建到项目案例 ,废话不多说 ,手把手带你入门微信小程序 !
1:先下载微信的开发工具:
地址:https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
可以根据自己的电脑 下载对应的版本 !
第一次打开: 会显示如下 微信扫描界面
2:模式选择
开发者工具提供两种开发模式的选择。
公众号网页调试。选择公众号网页调试,将直接进入公众号网页项目调试界面,在地址栏输入 URL,即可调试该网页的微信授权以及微信 JS-SDK 功能。
小程序调试。选择小程序调试,将进入小程序本地项目管理页,可以新建、删除本地的项目,或者选择进入已存在的本地项目。
我们这里可以选择小程序项目
接下来 需要我们验证小程序 appID ( 没有的 可以点击体验 也是一样可以的 )
接下来,我们就可以做开发了:
这里是我自己健的目录 !
我们可以看到 每个页面都应该有四个文件 ( 后缀:.js , .json , .wxml , .wxss ) 其实这里的 .json 是配置文件 , 如果不需要配置的话 是可以省略的!
3:app.json
我先说这个文件 :
这个是全局的配置文件
栗子:
{
"pages": [
"pages/index/index",
"pages/home/home",
"pages/home/home-detidal/home-detidal"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#405f80",
"navigationBarTitleText": "学习小程序",
"navigationBarTextStyle": "#fff"
}
}
(1)pages 每个页面我们都在在这里注入下 , 我建了三个页面 默认启动页面为 index 页面。( 谁在第一位 谁就为打开页面 )!
(2) window 全局配置顶部的的导航 !
如:项目引导页面
<!--index.wxml-->
<view class="container">
<image src='/images/icon/avator.jpg' class='avator'></image>
<text class='user-name'>Hello , 小程序</text>
<view class='moto-container'bindtap="openHome">
<text class='moto'>开启小程序之旅</text>
</view>
</view>
//index.wxss
page{
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: 1px solid #405f80;
border-radius: 5px;
text-align: center;
margin-top:200rpx;
}
.moto{
font-size: 22rpx;
line-height: 80rpx;
font-weight: bold;
}
最终页面展示:
可以看到下面有个按钮 ,这里我们做页面切换跳转用的 !
3:事件
什么是事件
- 事件是视图层到逻辑层的通讯方式。
- 事件可以将用户的行为反馈到逻辑层进行处理。
- 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数。
- 事件对象可以携带额外信息,如 id, dataset, touches。
touchstart //手指触摸动作开始
touchmove //手指触摸后移动
touchcancel //手指触摸动作被打断,如来电提醒,弹窗
touchend //手指触摸动作结束
tap //手指触摸后马上离开
longpress //手指触摸后,超过350ms再离开,如果指定了事件回调函数并触发了这个事件,tap事件将不被触发 1.5.0
longtap //手指触摸后,超过350ms再离开(推荐使用longpress事件代替)
transitionend //会在 WXSS transition 或 wx.createAnimation 动画结束后触发
animationstart //会在一个 WXSS animation 动画开始时触发
animationiteration //会在一个 WXSS animation 一次迭代结束时触发
animationend //会在一个 WXSS animation 动画完成时触发
具体每个事件的用法 ,大家可以查看官方api 里面讲解的很详细!
我们可以看到 我已经添加了一个事件与方法了
<view class='moto-container'bindtap="openHome">
<text class='moto'>开启小程序之旅</text>
</view>
// bindtap="openHome"
js 事件我们都写在 对应的js 文件里
Page({
openHome(){
wx.redirectTo({
url: '../home/home'
})
}
})
ps. 还有一个跳转 wx.navigateTo 。大家可以自己试下两个跳转的区别在哪里 ?
接下来 我会继续写项目案例 ,分享一个完整的项目!