1.環境準備

1.1. 注冊賬號

建議使用全新的郵箱，沒有注冊過其他小程式或者公眾號的，地址為：https://mp.weixin.qq.com/wxamp/thirdtools/extend?token=461217894&lang=zh_CN

1.2 獲取APPID

由于后期調?微信?程式的接?等功能，需要索取開發者的?程式中的 APPID ，所以在注冊成功后， 可登錄，然后獲取APPID， 登錄，成功后可看到如下界? 然后復制你的APPID,悄悄的保存起來，不要給別?看到
點擊開發管理，選擇開發設定下面的appid

1.3 下載開發工具

選擇開發工具下面的開發中工具

2第一個微信小程式

2.1. 打開微信開發者?具

注意 第?次登錄的時候 需要掃碼登錄

2.2. 新建?程式項?

點擊小程式選擇添加

2.3 填寫專案資訊

3.小程式的目錄結構

?程式框架的?標是通過盡可能簡單、?效的?式讓開發者可以在微信中開發具有原?的APP體驗的服 務，
?程式框架提供了??的視圖層描述語? WXML 和 WXSS ，以及 JavaScript ，并在視圖層與邏 輯層間提供了資料傳輸和事件系統，讓開發者能夠專注于資料與邏輯，

3.1. ?程式?件結構和傳統web對?

通過以上對?得出，傳統web 是三層結構，?微信?程式 是四層結構，多了?層 配置.json

3.2. 基本的項??錄

4.?程式配置?件

?個?程式應?程式會包括最基本的兩種配置?件，?種是全域的 app.json 和 ????的page.json

4.1. 全域配置app.json

app.json 是當前?程式的全域配置，包括了?程式的所有??路徑、界?表現、?絡超時時間、底 部 tab 等，普通快速啟動項??邊的 app.json 配置

欄位的含義

1. pages 欄位??于描述當前?程式所有??路徑，這是為了讓微信客?端知道當前你的?程式 ??定義在哪個?錄，
2. window 欄位?定義?程式所有??的頂部背景顏?，?字顏?定義等，

4.2 tabbar

如果小程式是一個多 tab 應用（客戶端視窗的底部或頂部有 tab 欄可以切換頁面），可以通過 tabBar 配置項指定 tab 欄的表現，以及 tab 切換時顯示的對應頁面，

配置項

其中 list 接受一個陣列，只能配置最少 2 個、最多 5 個 tab，tab 按陣列的順序排序，每個項都是一個物件，其屬性值如下：

{
  "pages": [
    "pages/index/index",
    "pages/img/img",
    "pages/my/my",
    "pages/search/search",
    "pages/logs/logs",
    "pages/one/one"
  ],
  "window": {
    "backgroundTextStyle": "dark",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black",
    "enablePullDownRefresh":true
      },
      "tabBar": {
        "color": "#0094ff",
        "selectedColor":"#009400",
        "list": [
          {
            "pagePath": "pages/index/index",
            "text": "首頁",
            "iconPath": "icon/_home.png",
            "selectedIconPath": "icon/home.png"
          },
          {
            "pagePath": "pages/img/img",
            "text": "圖片",
            "iconPath": "icon/_img.png",
            "selectedIconPath": "icon/img.png"
          },
          {
            "pagePath": "pages/my/my",
            "text": "我的",
            "iconPath": "icon/_my.png",
            "selectedIconPath": "icon/my.png"
          },
          {
            "pagePath": "pages/search/search",
            "text": "搜索",
            "iconPath": "icon/_search.png",
            "selectedIconPath": "icon/search.png"
          }
        ]
      },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

4.3 頁面配置

每一個小程式頁面也可以使用 .json 檔案來對本頁面的視窗表現進行配置，頁面中配置項在當前頁面會覆寫 app.json 的 window 中相同的配置項，檔案內容為一個 JSON 物件，有以下屬性：

配置項

5.模板語法

text標簽和view標簽

1. text相當于web中的span標簽 行內元素 不會換行
2. view 相當于web中的div元素 塊級元素 會換行

<!--
    1. text相當于web中的span標簽 行內元素 不會換行
    2.view 相當于web中的div元素 塊級元素 會換行
-->
<text>1</text>
<text>2</text>
<view>1</view>
<view>2</view>

5.1資料系結

1. 普通寫法
   js中

  data:{
    msg:"hollow word",
    num:100,
    ju:true,
    per:{
      name:"smile",
      age:18
    },
    checked:true
  },

wxml中

<!-- 字串型別 -->
<view>
    {{msg}}
</view>
<!-- 數字型別 -->
<view>
    {{num}}
</view>
<!-- 布爾型別 -->
<view>
    使用好用{{ju}}
</view>
<!-- 物件型別 -->
  <view>
      {{per.name}}--{{per.age}}
  </view>

<view wx:if="{{ju}}">是</view>
<view wx:else="{{ju}}"> 否</view>
     <!-- 使用bool型別充當屬性check 字串和花括號之間不要存在空格，否則會導致識別識別  -->
<checkbox checked="{ju}">
    
</checkbox>
  

5.2 基本運算

  <!-- 算術運算 -->
<view>{{num+1+1}}</view>
<!-- 三元運算 -->
 <view>
     {{num>100?'num大于100':'num小于100'}}
 </view>
 <!-- 判斷運算子 -->
 <view wx:if="ju==true">
     判斷為真
</view>
<view wx:else='ju==false'>
    判斷為假
</view>   
    

5.3 串列渲染

5.3.1 串列

1. wx:for="{{回圈的陣列或物件}}" wx:for-item="{{回圈項的名稱}}" wx:for-index="{{回圈的索引}}"
2. wx:key=“唯一值” 用來提高串列渲染的性能
   wx:key 系結一個普通字串的時候 最好為陣列物件中的唯一屬性
   wx:key="*this" 就表示陣列為一個普通的陣列 *this表示的是回圈項
3. 當出現嵌套回圈的時候一定要注意 系結的名稱不要重名
4. 默認情況下 小程式回圈項的名稱和索引的名稱分別為 item、index

  student:[
      {
        name:'a',
        age:18
      },
      {
        name:'b',
        age:19
      },
      {
        name:'c',
        age:20
      }
    ]

 <view>
     <view wx:for="{{student}}" wx:for-item="item" wx:for-index="index" wx:key="*this">
         {{index}}--{{item.name}}--{{item.age}}
     </view>
 </view>
   

5.3.2 block標簽

1. 占位符標簽
2. 寫代碼的時候可以看到這個標簽存在
3. 頁面渲染的時候，小程式可以把他們移除掉

7.4 條件渲染

• wx:if="{{true/false}}"
  if else else if 對應微信小程式分別為 wx:if wx:else wx:elif
• hidden
  在標簽上直接加屬性hidden hidden="{{true}}"
• 什么場景下使用哪一個

1. 當標簽不是頻繁的切換顯示 優先使用wx:if 直接把標簽從頁面結構給移除掉

2. 當表示頻繁的切換顯示 優先使用hiddem 通過添加樣式的方式來切換顯示

7.5 簡易的雙向系結

input輸入的資料在頁面上顯示出來
wxml

<input model:value="{{num}}" />

js

  data: {
    num:0}

7.6 事件的系結

?程式中系結事件，通過bind關鍵字來實作，如 bindtap bindinput bindchange 等 不同的組件?持不同的事件，具體看組件的說明即可，
具體舉例：通過按鈕的加和減實作數字的加減同時可以在輸入框內輸入
wxml

<input type="text" bindinput="bindInput"/>
<button bindtap="add" data-operation="{{n}}">+</button>
<button bindtap="del" data-operation="{{n}}">-</button>
<view >
   {{num}}
</view>

js

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    num:0
  },
  //輸入框的input執行邏輯
  bindInput(e){
    console.log(e.detail.value)
    this.setData({
      num:e.detail.value
    }
    )
  },
  add(e)
  {
    console.log(e)
    console.log(e.target.dataset.operation)
    this.setData({
      num:this.data.num+e.target.dataset.operation.id  
    })
  },
  del(e)
  {
    console.log(e)
    console.log(e.target.dataset.operation)
    this.setData({
      num:this.data.num-e.target.dataset.operation.id
    })
  }
})

8.樣式WXSS

WXSS( WeiXin Style Sheets )是?套樣式語?，?于描述 WXML 的組件樣式， 與 CSS 相?，
WXSS 擴展的特性有：

• 回應式?度單位 rpx
• 樣式導?

8.1. 尺?單位

rpx （responsive pixel）: 可以根據螢屏寬度進??適應，規定螢屏寬為 750rpx ，如在iPhone6 上，螢屏寬度為 375px ，共有750個物理像素，則 750rpx = 375px = 750物理像素 ， 1rpx = 0.5px = 1物理像素 1rpx = 0.5px = 1物理像素 ，

建議： 開發微信?程式時設計師可以? iPhone6 作為視覺稿的標準，
使?步驟：

1. 確定設計稿寬度 pageWidth
2. 計算?例 750rpx = pageWidth px ,因此 1px=750rpx/pageWidth，
3. 在less?件中，只要把設計稿中的 px => 750/pageWidth rpx 即可

8.2 樣式匯入

使? @import 陳述句可以導?外聯樣式表，只?持相對路徑，
示例
common.wxss

view{
    color: aqua;
    font-size: 10px;
}

在demo.wxss中匯入common.wxss

/* pages/demo/demo.wxss */
/*
通過@Import 引入 用的是相對路徑
*/
@import "../../style/common.wxss"   

8.3. 選擇器

特別需要注意的是 ?程式 不?持通配符 * 因此以下代碼?效！

9.常見組件

9.1 text

1. ?本標簽
2. 只能嵌套text
3. ?按?字可以復制（只有該標簽有這個功能）
4. 可以對空格 回? 進?編碼

<text  selectable decode>
    111&nbsp;222
</text>

9.2. image

1. 圖?標簽，image組件默認寬度320px、?度240px
2. ?持懶加載

mode 有效值： mode 有 13 種模式，其中 4 種是縮放模式，9種是裁剪模式，

示例

<image src="/icon/home.png" mode="top"></image>

9.3 swiger

微信小程式內置的輪播圖組件，其中默認的with為100%，height為150px

還有其他屬性看官方檔案
案例演示
wxml

<!--
    1. 輪播圖外部容器swagger
    2. 每一個輪播項 swagger-item 
    3. swagger 標簽存在默認樣式
      with 100% height 150px 
      image 存在默認寬度和高度 320*240
      swiper無法實作內容撐開
    4. 找出原圖的寬和高  等比例給原圖定寬高
    原圖寬度和高度為200*200
    swiper 寬度/swiper高度 = 原圖的寬度 /原圖的高度
    swiper的高度= swiper的寬度 *原圖的高度/原圖的寬度

    height=100wx*200/200



-->
<swiper autoplay interval="1000" 	circular 	indicator-dots 			bindtransition >
  <swiper-item > <image mode="widthFix"  src="/icon/home.png" > </image> </swiper-item>
  <swiper-item > <image mode="widthFix"  src="/icon/my.png" > </image> </swiper-item>
  <swiper-item > <image  mode="widthFix" src="/icon/search.png" > </image> </swiper-item>  
</swiper>

wxss

swiper{
    /* width: 100%;
    height: calc(100wx*200/200); */
    width: 100%;
    height: calc(720rpx*200/200)
}

image{
    width: 100%;
}

9.4 navigator

導航組件 類似超鏈接標簽

open-type 有效值：

9.10 button按鈕

size的合法值

type的合法值

form-type 的合法值

open-type 的合法值

具體案例
wxml

<button size="default" > 默認大小</button>
<button size="mini">小尺寸</button>
<button type="primary">綠色</button>
<button type="default" disabled>白色</button>
<button type="warn" >紅色</button>
<button type="warn" plain>plain 紅色</button>
<button loading type="primary">加載中</button>
<button plain type="warn">鏤空</button>

<!--
    button開發
    open-type
    contact:直接打開客服對話功能 需要的微信小程式后臺配置
    share 轉發當前的小程式要微信朋友中 不能大小程式分享到朋友圈
    getPhoneNumber 獲取當前用戶的手機號碼資訊 結合一個事件來使用  不是企業的小程式賬號 沒有權限獲取用戶的手機號碼
        使用方式：1.系結一個事件 bindgetphonenumber 
        2.在事件的回呼函式中通過引數來獲取資訊 
        3.獲取到的用戶資訊是加密過的 需要自己搭建后臺服務器，在后臺服務器中決議電話號碼 回傳到小程式中就可以看到訊息了
    getUserInfo  獲取當前用戶的個人資訊
        1. 使用方法類似于獲取用戶的個人資訊
        2.可以直接獲取 不存在加密欄位 
    launchApp 在小程式中直接打開app
        1.需要在APP中通過APP的某個鏈接打開小程式
        2.在小程式中通過這個功能直接打開app
        舉例 京東app和京東小程式 
    openSetting 打開小程式內置的授權頁面
      授權頁面中只會出現用戶曾經點擊過的頁面
    feedback 打開小程式內置的意見反饋頁面   只能通過真機除錯的功能打開         
-->
<button open-type="contact">contact</button>
<button open-type="share">share</button>
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber" >getPhoneNumber</button>
<button open-type="getUserInfo" bindgetuserinfo="getUserInfo">getUserInfo</button>
<button open-type="launchApp">launchApp</button>
<button open-type="openSetting">openSetting</button>
<button open-type="feedback">feedback</button>

js

Page({
  //獲取用戶的手機號碼
  getPhoneNumber(e)
  {
    console.log(e)
  },
  //獲取用戶的資訊
  getUserInfo(e)
  {
    console.log(e)
  }
})

9.11 icon圖示

樣例

<icon type="success" size="23" color=""> </icon>
<icon type="info" size="13" color="green"> </icon>
<icon type="warn" size="40" color="red"> </icon>
<icon type="cancel" size="23" color="yellow"> </icon>
<icon type="download" size="23" color="pink"> </icon>
<icon type="clear" size="23" color=""> </icon>

9.12 radio單選

9.13 check多選

屬性和單選radio大概一致
應用舉例
wxml

<radio-group bindchange="change">
<radio value="男" color="red">男</radio>
<radio value="女" color="red">女</radio>    
</radio-group>
您的性別是:{{gen}}
  

<checkbox-group bindchange="change1">
    <checkbox wx:for="{{list}}" wx:item="item" wx:key="id" value="{{item.name}}">
        {{item.name}}
    </checkbox>
      
</checkbox-group>
  
您選擇的水果是{{che}}

js檔案

// pages/icon/icon.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    gen:'',
    list:[
      {
        id:0,
        name:"蘋果",
        value:"蘋果"
      },
      {
        id:1,
        name:"香蕉",
        value:"香蕉"
      },
      {
        id:2,
        name:"梨",
        value:"梨"
      }
    ],
    che:''

  },
  change(e)
  {
    console.log(e)
    this.setData({
      gen:e.detail.value
    })
  },
  change1(e)
  {
    console.log(e)
    this.setData({
      che:e.detail.value
    }
    )
  }
})

10.自定義組件

?程式允許我們使??定義組件的?式來構建??，

10.1 創建組件快速入門

創建組件的三個步驟：

1. 創建組件
2. 什么組件
3. 在頁面中使用自定義組件
   1，創建組件
   類似于頁面，一個自定義組件由 json wxml wxss js 4個檔案組成
   可以在微信開發者?具中快速創建組件的?件結構，在創建組件的目錄先選擇創建component
   
   創建好的目錄結構
   
   2.宣告組件
   ?先需要在組件的 json ?件中進??定義組件宣告
   在Tabs.json檔案中
   
   標簽檔案中的內容，在tabs.wxml中
   

在要使用的組件中宣告組件
假設我在demo1檔案中使用Tabs組件,在demo1.json中宣告使用的組件
在demo1.js宣告使用的組件

{
  "usingComponents": {
    "Tabs":"../../component/Tabs/Tabs"
  }
}

在demo1.wxml使用組件

<Tabs></Tabs>

結果展示

10.2組件-?定義組件傳參

1. ?組件通過屬性的?式給?組件傳遞引數
2. ?組件通過事件的?式向?組件傳遞引數
   實體演示
   tabs.js

// component/Tabs/Tabs.js
Component({
  /**
   * 組件的屬性串列
   * 
   * 從父組件中接收的資料
   */
  properties: {
    //要接收的資料名稱
    Tabs:{
      // type 要接收資料的型別
      type:Array,
      // value 默認值
      value:''
    }
  },

  /**
   * 組件的初始資料
   */
  data: {
     
  },

  /**
   * 組件的方法串列
   */
  /**
   * 頁面.js檔案中 存放事件的回呼函式的時候 存放在data的統計目錄下
   * 組件.js檔案中 存放事件的回呼函式的時候 必須要存放在methods中
   */
  methods: {
    bindItemTip(e){
      /**
       * 1. 系結回呼事件 需要在methods中系結
       * 2.獲取被點擊的索引
       * 3.獲取原陣列
       * 4.對陣列回圈
       *    每一個回圈屬性改為false
       *    給當前所以添加激活選中效果
       * 
       * 5.點擊觸發事件的時候
       *   觸發父組件中的自定義事件 同時傳遞資料給父組件
       *    this.triggerEvent{"父組件自定義組件的名稱","要傳遞的引數"}
       */

        //獲取索引
        const {index}=e.currentTarget.dataset;

        this.triggerEvent("itemChange",{index});

        //5.點擊觸發事件的時候 觸發父組件中的自定義事件 同時傳遞資料給父組件
        // this.triggerEvent("itemchange",index);
        // data中的原陣列
        // let {Tabs}=this.data; //相當于 let tabs=this.data.tabs        
        //回圈陣列
        // for(let i=0;i<this.data.Tabs.length;i++)
        // {
        //   if(i===index)
        //   {
        //     this.data.Tabs[i].isActive=true
        //   }
        //   else{
        //     this.data.Tabs[i].isActive=false
        //   }
        // }
        // this.setData({
        //   Tabs
        // })
    }
  }
})

tabs.wxss

.tabs{}
.tabs_title{
    display: flex;
    padding: 10rpx 0;
}
.title_item{
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
.active{
    color: red;
    border-bottom: 5rpx solid currentColor;
}
.tabs_cotent{

}

tabs.wxml

<view class="tabs">
    <view class="tabs_title">
        <!-- <view class="title_item active">首頁</view>
        <view class="title_item">原創</view>
        <view class="title_item">分類</view>
        <view class="title_item">關于</view>   -->

    <view wx:for="{{Tabs}}" class="title_item {{item.isActive?'active':' '}}" 
    wx:key="id" 
    bindtap="bindItemTip"
    data-index="{{index}}"
    >
        {{item.name}}
    </view>
</view>      
    <view class="tabs_cotent">
        <!-- 內容 -->
        <!--
            slot 標簽 其實就是一個占位符 插槽
            等到父組件呼叫子組件的時候，在傳遞標簽，最終通過標簽傳遞過來，這些標簽會替代搜了他插槽的位置
        -->
        <slot></slot>
    </view>
        
</view>
  

demo1.js

// pages/demo1/demo1.js
Page({

  /**
   * 頁面的初始資料
   */
  data: {
    Tabs:[
      {
        id:0,
        name:"首頁",
        isActive:true
      },
      {
        id:1,
        name:"原創",
        isActive:false
      },
      {
        id:2,
        name:"分類",
        isActive:false
      },
      {
        id:3,
        name:"關于",
        isActive:false
      }
    ]
 
  },
  //自定義事件 用來接收組件傳遞過來的資料
  bindItemChange(e){
      console.log(e.detail)
      const {index}=e.detail
      console.log(index)
       let {Tabs}=this.data; //相當于 let tabs=this.data.tabs        
        // 回圈陣列
        for(let i=0;i<this.data.Tabs.length;i++)
        {
          if(i===index)
          {
            this.data.Tabs[i].isActive=true
          }
          else{
            this.data.Tabs[i].isActive=false
          }
        }
        this.setData({
          Tabs
        })
  },


  /**
   * 生命周期函式--監聽頁面加載
   */
  onLoad: function (options) {

  },

  /**
   * 生命周期函式--監聽頁面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函式--監聽頁面顯示
   */
  onShow: function () {

  },

  /**
   * 生命周期函式--監聽頁面隱藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函式--監聽頁面卸載
   */
  onUnload: function () {

  },

  /**
   * 頁面相關事件處理函式--監聽用戶下拉動作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 頁面上拉觸底事件的處理函式
   */
  onReachBottom: function () {

  },

  /**
   * 用戶點擊右上角分享
   */
  onShareAppMessage: function () {

  }
})

demo1.wxml

<!--
    1. 父組件（頁面）向子組件傳遞資料 通過標簽屬性的方式進行
        1. 在子組件上進行接收
        2.把這個資料當成data中的資料直接用即可
    2.子向父傳遞物件 通過事件的方式
        在子組件的標簽上加一個自定義事件    
-->
<Tabs Tabs="{{Tabs}}" binditemChange="bindItemChange">
    <!--
        solt標簽 其實就是一個占位符 插槽
        等到父組件呼叫子組件的時候 在傳遞標簽過來 最終這些被傳遞過來標簽 會替代solt插槽的位置
    -->
 <block wx:if="{{Tabs[0].isActive}}">1</block>
 <block wx:if="{{Tabs[1].isActive}}">2</block>
 <block wx:if="{{Tabs[2].isActive}}">3</block>
 <block wx:if="{{Tabs[3].isActive}}">4</block>
 
</Tabs>

效果圖

10.2組件的其他屬性

Component 構造器可?于定義組件，調? Component 構造器時可以指定組件的屬性、資料、?法 等

11.小程式的生命周期

小程式的生命周期分為應用生命周期和頁面生命周期

11.1 應用生命周期(App.js)

11.2 頁面生命周期