微信小程序環境搭建-項目案例 （一）啓動頁

最新閒來無事，看了看研究了下微信小程序，從環境搭建到項目案例 ，廢話不多說 ，手把手帶你入門微信小程序 ！

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 。大家可以自己試下兩個跳轉的區別在哪裏 ？
接下來 我會繼續寫項目案例 ，分享一個完整的項目！