微信小程序环境搭建-项目案例（一）启动页

傷城~ 2021-09-14 10:44 231阅读 0赞

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

## *1：先下载微信的开发工具：* ##

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

![这里写图片描述][SouthEast]

## *2：模式选择* ##

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

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

![这里写图片描述][SouthEast 1]

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

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

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

![这里写图片描述][SouthEast 2]  
这里是我自己健的目录 ！

我们可以看到 每个页面都应该有四个文件 （ 后缀：.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 全局配置顶部的的导航 ！  
如：项目引导页面

<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;
    }

最终页面展示：

![这里写图片描述][SouthEast 3]  
可以看到下面有个按钮 ，这里我们做页面切换跳转用的 ！

## *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 。大家可以自己试下两个跳转的区别在哪里 ？  
接下来 我会继续写项目案例 ，分享一个完整的项目！

[https_mp.weixin.qq.com_debug_wxadoc_dev_devtools_download.html]: https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html
[SouthEast]: /images/20210813/269f0a1ee244472d860a48c7ed7ad8c4.png
[SouthEast 1]: /images/20210813/f92d867c0ee541e8b735c8676148e777.png
[SouthEast 2]: /images/20210813/cac655a954364ff68330e9e4763844e2.png
[SouthEast 3]: /images/20210813/13a1b3d34d99470aa6d04cd4edbc89c6.png