1.開(kāi)發(fā)前準(zhǔn)備

• 開(kāi)發(fā)微信小程序首先要注冊(cè)一個(gè)賬號(hào)（[https://mp.weixin.qq.com/wxopen/waregister?action=step1](https://mp.weixin.qq.com/wxopen/waregister?action=step1 注冊(cè)地址）。
  注冊(cè)完成之后登陸進(jìn)管理后臺(tái)冶共，可以看到里面的一些功能設(shè)置曙搬。
  
  image.png

• 開(kāi)發(fā)一個(gè)小程序需要一個(gè)appId僧免，這個(gè)appId在開(kāi)發(fā)中的開(kāi)發(fā)設(shè)置中可以找到亮瓷。

  
  
  image.png
• 然后開(kāi)始下載微信的開(kāi)發(fā)者工具颈抚，下載地址（https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
  ）下載完成后安裝读虏，打開(kāi)開(kāi)發(fā)者工具（需要微信掃描登陸）娇未，選擇小程序墨缘，設(shè)置小程序的名稱(chēng)，項(xiàng)目目錄零抬，appid镊讼，也可以選擇云開(kāi)發(fā)，點(diǎn)擊創(chuàng)建就生成了一個(gè)小程序項(xiàng)目平夜。

2. 目錄文件介紹

• 小程序的初始項(xiàng)目目錄蝶棋。

  
  
  image.png
• pages是所有的頁(yè)面組件目錄，里面包含的每一個(gè)頁(yè)面都有四個(gè)文件js（頁(yè)面邏輯代碼）忽妒，json（頁(yè)面屬性配置）玩裙，wxml（html代碼）兼贸，wxss（css樣式）。
• utils是一個(gè)存放公共js方法的目錄吃溅。
• app.js是全局js邏輯文件溶诞，在任何獨(dú)立頁(yè)面的js文件都能訪問(wèn)app.js里面方法。
• 在app.json中進(jìn)行全局的配置决侈，例如導(dǎo)航欄的文字顏色螺垢，背景顏色，標(biāo)題赖歌，tabbar的設(shè)置枉圃，都通過(guò)app.json進(jìn)行配置。
• app.wxcss全局的css樣式設(shè)置俏站。

3.app.json常用配置

詳細(xì)配置參考（https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html）

• 全局配置

• pages用來(lái)配置頁(yè)面路徑信息讯蒲，不需要寫(xiě)后綴名

{
  "pages": ["pages/index/index", "pages/logs/logs"]
}

• window用來(lái)配置小程序?qū)Ш綑诤蜖顟B(tài)欄窗口背景色等。

  "window": {
    "backgroundTextStyle": "light",//下拉 loading文字 的樣式肄扎，light/dark
    "navigationBarTextStyle":"white",//導(dǎo)航欄標(biāo)題顏色，僅支持 black / white
    "navigationBarBackgroundColor": "#000",//導(dǎo)航欄背景色支持16進(jìn)制顏色
    "navigationBarTitleText": "today",//導(dǎo)航欄標(biāo)題內(nèi)容
    "backgroundColor":"#000000",//下拉loading背景色
    "enablePullDownRefresh":true,//是否開(kāi)啟下拉刷新
    "onReachBottomDistance":50,//下拉刷新的距離
    "pageOrientation":"portrait"http://屏幕旋轉(zhuǎn)配置
  },

• tabBar配置底部tab導(dǎo)航欄

 "tabBar":{
    "color":"#333",//字體顏色
    "selectedColor":"#3D74DD",//菜單選中字體顏色
    "backgroundColor":"#ececec",//導(dǎo)航欄背景顏色
    "borderStyle":"black",//border顏色只有black和white
    "position":"bottom",//位置
    "custom":false,//自定義tabBar默認(rèn)false
    "list":[//tab數(shù)組最少兩個(gè)赁酝，最多5個(gè)
      {
        "pagePath":"pages/index/index",//跳轉(zhuǎn)頁(yè)面路徑
        "text":"home",//tab標(biāo)題
        "iconPath":"assets/images/home.png",//tab默認(rèn)icon路徑
        "selectedIconPath":"assets/images/homed.png"http://tab選中icon路徑
      },{
        "pagePath":"pages/search/search",
        "text":"search",        
        "iconPath":"assets/images/search.png",
        "selectedIconPath":"assets/images/searched.png"
      }
    ]
  }
}

• networkTimeout各類(lèi)網(wǎng)絡(luò)請(qǐng)求超時(shí)時(shí)間默認(rèn)是60000毫秒

"networkTimeout":{
    "request":3000,//網(wǎng)絡(luò)請(qǐng)求
    "connectSocket":3000,//socket請(qǐng)求
    "uploadFile":3000,//文件上傳
    "downloadFile":3000//文件下載
  }

• debug開(kāi)始debug模式方便用于調(diào)試犯祠，會(huì)將頁(yè)面注冊(cè)，頁(yè)面路由數(shù)據(jù)更新打印出來(lái)酌呆。
  
  image.png

"debug":true

• usingComponents聲明自定義組件為全局自定義組件或者第三方組件衡载。

{
  "usingComponents": {
    "van-button": "vant-weapp/button"
  }
}

• permission小程序接口權(quán)限設(shè)置
  詳細(xì)參考（https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html）

{
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息將用于小程序位置接口的效果展示" // 高速公路行駛持續(xù)后臺(tái)定位
    }
  }
}

• 頁(yè)面配置

• 每個(gè)單獨(dú)的頁(yè)面都會(huì)有四個(gè)文件.wxml，.wxss隙袁，.json痰娱，.js，頁(yè)面單獨(dú)配置需要在json文件中配置菩收，和app.json的區(qū)別就是一個(gè)是總的設(shè)置梨睁，一個(gè)是局部單獨(dú)的設(shè)置。配置選項(xiàng)和app.json全局配置一樣娜饵。

4.頁(yè)面生命周期函數(shù)

• 每個(gè)頁(yè)面都會(huì)有一個(gè)生命的周期從加載顯示到隱藏銷(xiāo)毀一個(gè)完整的流程坡贺，這些生命周期都包含在page（{}），里面箱舞，包括每個(gè)頁(yè)面的data（類(lèi)似于vue里面data）也包含在`page（{}）里面遍坟。

新建的page頁(yè)面在js文件中一定要加上page（{}）否則會(huì)報(bào)錯(cuò)。

image.png

• data頁(yè)面所有的動(dòng)態(tài)數(shù)據(jù)綁定都來(lái)自于data晴股，類(lèi)似于vue的data愿伴。
• onLoad，頁(yè)面加載時(shí)觸發(fā)电湘，只觸發(fā)一次隔节，類(lèi)似于vue的created万搔。
• onShow頁(yè)面顯示時(shí)觸發(fā)。
• onReady頁(yè)面渲染完成時(shí)觸發(fā)官帘。類(lèi)似于vue的mounted瞬雹。
• onHide頁(yè)面隱藏或者切換到后臺(tái)是觸發(fā)。
• onUnload頁(yè)面卸載時(shí)觸發(fā)刽虹，類(lèi)似于vue的destoyed酗捌。

Page({
  data:{
    value:'today'
  },
  onLoad(){
    console.log("初始化")
  },
  onReady(){
    console.log("準(zhǔn)備好了")
  },
  onShow(){
    console.log('顯示')
  },
  onHide(){
    console.log("隱藏")
  },
  onUnload(){
    console.log("頁(yè)面卸載")
  },
})

5.頁(yè)面事件處理函數(shù)

• 頁(yè)面處理函數(shù)，是用戶(hù)在當(dāng)前頁(yè)面的行為觸發(fā)的涌哲，例如下拉刷新胖缤，滑動(dòng)，分享阀圾，旋轉(zhuǎn)
• onPullDownRefresh監(jiān)聽(tīng)用戶(hù)下拉刷新函數(shù)哪廓，前提是需要在app.json中開(kāi)啟下拉刷新。
• onReachBottom監(jiān)聽(tīng)用戶(hù)上拉觸底事件初烘。
• onPageScroll監(jiān)聽(tīng)用戶(hù)滑動(dòng)頁(yè)面事件涡真。
• onShareAppMessage監(jiān)聽(tīng)用戶(hù)點(diǎn)擊轉(zhuǎn)發(fā)按鈕
• onResize頁(yè)面尺寸改變觸發(fā)。
• onTabltemTap當(dāng)前頁(yè)面是tab頁(yè)時(shí)肾筐，點(diǎn)擊tab觸發(fā)哆料。

Page({
  onPullDownRefresh(){
    console.log("下拉刷新")
  },
  onReachBottom(){
    console.log("觸底")
  },
  onPageScroll(){
    console.log("頁(yè)面滾動(dòng)")
  },
  onShareAppMessage(){
    console.log("分享")
  },
  onResize(){
    console.log("頁(yè)面尺寸改變")
  },
  onTabltemTap(){
    console.log("點(diǎn)擊Tab")
  }
})

6.組件事件處理函數(shù)

• page里面可以定義組件事件處理函數(shù)，通過(guò)bindtap綁定在page中定義的函數(shù)吗铐，點(diǎn)擊的時(shí)候會(huì)觸發(fā)东亦。

<view bindtap="begin">點(diǎn)擊</view>

Page({
    data:{
        value:"taoday"
    },
    begin(){
        console.log(this.data.value)
    }
})

7.小程序的生命周期

• 小程序的生命周期是在app.js文件中定義的，在app.js中周期函數(shù)都包括在 App（{}）里面唬渗，這點(diǎn)是和頁(yè)面周期函數(shù)有區(qū)別典阵，app（{}）只能在app.js中調(diào)用，必須且只調(diào)用一次镊逝。
• onLaunch監(jiān)聽(tīng)小程序初始化壮啊。
• onShow監(jiān)聽(tīng)小程序啟動(dòng)或者切換到前臺(tái)。
• onHide監(jiān)聽(tīng)小程序切換到后臺(tái)蹋半。
• onError監(jiān)聽(tīng)錯(cuò)誤函數(shù)他巨。
• onPageNotFound監(jiān)聽(tīng)頁(yè)面不存在函數(shù)。

App({
  onLaunch (options) {
    // Do something initial when launch.
  },
  onShow (options) {
    // Do something when show.
  },
  onHide () {
    // Do something when hide.
  },
  onError (msg) {
    console.log(msg)
  },
})

8.小程序常用語(yǔ)法

• 小程序的語(yǔ)法和vue語(yǔ)法差不多减江，只是在局部會(huì)有一些差異染突，會(huì)vue那小程序的語(yǔ)法理解就方便很多了。
• 數(shù)據(jù)綁定和vue一樣辈灼，在page的data設(shè)置好份企，在組件內(nèi)通過(guò)雙花括號(hào){{}}包裹的形式調(diào)用，組件內(nèi)使用data屬性也要加雙花括號(hào)巡莹。
• wx:if條件渲染司志，類(lèi)似于v-if甜紫。
• wx:for列表渲染，類(lèi)似于v-for骂远，只不過(guò)不需要在設(shè)置渲染的index和item囚霸，默認(rèn)的就是index，item激才。也可以通過(guò)wx:for-index來(lái)指定下標(biāo)名稱(chēng)拓型，wx:for-item指定item名稱(chēng)，同樣也可以嵌套渲染瘸恼。wx:key指定唯一標(biāo)識(shí)符劣挫。

<view class="index-container">
<van-button type="primary" wx:for="{{array}}" wx:key="index">{{item.name}}</van-button>
<van-button wx:if="{{flag}}">{{flag}}</van-button>
 </view>


Page({
  data:{
    value:'today',
    flag:true,
    array:[
      {name:"1"},
      {name:"1"},
      {name:"1"}
    ]
  }
})

9.使用第三方npm包

• 以有贊的vant-weapui框架為例，首先在小程序項(xiàng)目的根目錄下載npm包东帅，然后npm init压固，必須npm init，否則組件庫(kù)就不會(huì)初始化靠闭，在開(kāi)發(fā)工具構(gòu)建npm包的時(shí)候會(huì)報(bào)錯(cuò)帐我。

npm i vant-weapp -S --production
npm init

• 打開(kāi)微信開(kāi)發(fā)者工具，點(diǎn)擊 工具 -> 構(gòu)建 npm阎毅，并勾選 使用 npm 模塊 選項(xiàng)焚刚，構(gòu)建完成后，即可引入組件扇调，構(gòu)建完之后會(huì)出現(xiàn)一個(gè)文件夾。

  
  
  image.png
  
  
  image.png

• 在構(gòu)建npm包的時(shí)候可能會(huì)有報(bào)錯(cuò)的情況抢肛，構(gòu)建vant-weap就出現(xiàn)了一個(gè)錯(cuò)誤狼钮，

VM6419:5 ./miniprogram_npm/_vant-weapp@0.5.12@vant-weapp/action-sheet/index.wxml

../wxs/utils.wxs not found from ./miniprogram_npm/_vant-weapp@0.5.12@vant-weapp/action-sheet/index.wxml

> 1 | <wxs src="../wxs/utils.wxs" module="utils" />

    | ^

  2 | 

  3 | <van-popup

  4 |   show="{{ show }}"

• 解決方案就是把miniprogram_npm/vant-weapp里的組件文件夾都刪除，之后再到https://github.com/youzan/vant-weapp下載一份vant捡絮， 將dist文件夾（vant-weapp-dev\vant-weapp-dev\dist）中的文件復(fù)制到miniprogram_npm/vant-weapp（即下載一份vant熬芜，之后替換掉項(xiàng)目中的文件）。

• 使用組件在app.json或者每個(gè)單獨(dú)頁(yè)面的json文件配置福稳。

{
  "usingComponents": {
    "van-button": "vant-weapp/button"
  }
}

• 然后在頁(yè)面使用就可以了

<van-button type="primary">按鈕</van-button>