微信小程序學(xue)(xue)習(xi)前言1.為什么要學(xue)(xue)習(xi)小程序2.學(xue)(xue)習(xi)小程序跟學(xue)(xue)習(xi)網頁(ye)開發有(you)什么不同

1.運行環境不同
網頁運行在瀏覽器中，而微信小程序運行在微信中
2.開發模式不同
網頁開發一般用瀏覽器+編譯器
而微信小程序也有自己的一套標準開發模式：
  申請小程序開發賬號
  安裝微信開發者工具軟件
  創建和配置小程序項目
3.api不同
因為運行的環境不同，小程序無法調用瀏覽器環境的dom和bom，但是小程序可以調用微信環境的各種api，如：地理定位，掃碼，支付

3.我(wo)們應該(gai)如(ru)何(he)學習小程序(xu)

正(zheng)文了解小程(cheng)序(xu)構成1.如何創建微信小程(cheng)序(xu)項目1.1 注冊、登錄、復制appId

注(zhu)冊(ce)：在 mp.weixin.qq.com/cgi-bin/wx 進行注(zhu)冊(ce)微信小程序開發賬號

登錄：在(zai) mp.weixin.qq.com 登錄小程序賬號

復制appId: 在 "開發(fa)" 的 "開發(fa)管(guan)理" 的 "開發(fa)設(she)置" 的 "開發(fa)者ID"中

1.2 下(xia)載微(wei)信開發者工具

在 developers.weixin.qq.com/miniprogram… 下(xia)載軟件

1.3 進入微信開(kai)發者工具(ju)掃碼登(deng)錄，使用到上(shang)面的APPId。選好存放文件的位置，選擇(ze)小(xiao)程序開(kai)發模式，選擇(ze)不使用云服務(wu)，選擇(ze)javascript語言(yan)，點(dian)擊創建項目(mu)2.熟悉認識創建的項目(mu)文件的主(zhu)要結構(gou)2.1 pages文件夾

pages文件(jian)夾(jia)使用來(lai)存放所有小程序(xu)的頁(ye)面(mian)的，一個頁(ye)面(mian)也是(shi)是(shi)由(you)四個文件(jian)組成(cheng)的文件(jian)夾(jia)。比如說：pages文件(jian)夾(jia)中的index文件(jian)夾(jia)，包(bao)含了(le).js,.wxml,.wxss,.json文件(jian)

.js文件（頁面的腳本文件，存放頁面的數據，事件處理函數。如：data） 
.json文件（當前頁面的配置文件，配置窗口的外觀，表現）
.wxml文件（頁面的模板結構文件，相當于html）
.wxss文件（當前頁面的樣式表文件,相當于css）

2.2 utils文件夾

utils文件夾(jia)是用來存放工具性質的模塊(kuai)（比如說：格式化(hua)事件的自定義模塊(kuai)，最(zui)后還要(yao)導出）

2.3 app.js文(wen)件

app.js文(wen)(wen)件是(shi)小(xiao)程(cheng)序的入口文(wen)(wen)件，整(zheng)個小(xiao)程(cheng)序的執行(xing)首先(xian)由(you)app.js入手

2.4 app.json文件(jian)

小程序項(xiang)目的全局配置(zhi)文件

2.5 app.wxss文件

app.wxss小程(cheng)序(xu)項目的(de)全局樣式文件

2.6 project.config.json

project.config.json 項目的(de)配置文件

2.7 sitemap.json

sitemap.json用來配(pei)置(zhi)小(xiao)程序(xu)及頁面是(shi)否允許被(bei)微信索引（允許的話，當在微信搜索相關關鍵字時，會顯示出(chu)來該小(xiao)程序(xu)）

3.小(xiao)程序(xu)的(de)json配(pei)置文件

json是(shi)一種數(shu)據(ju)格式，在實際開發中，json總(zong)是(shi)以配(pei)置文(wen)件的(de)形式出現。小程序的(de)項(xiang)目(mu)也是(shi)不(bu)例外的(de)：通過不(bu)同(tong)的(de).json配(pei)置文(wen)件，可以對小程序項(xiang)目(mu)進(jin)行不(bu)同(tong)級別(bie)的(de)配(pei)置。

小程序項目包(bao)含4中json配置文件，分(fen)別有：

(1)項(xiang)(xiang)目(mu)根目(mu)錄(lu)的(de)app.json配置(zhi)文(wen)(wen)件(jian)(2)項(xiang)(xiang)目(mu)根目(mu)錄(lu)的(de)project.config.json配置(zhi)文(wen)(wen)件(jian)(3)項(xiang)(xiang)目(mu)根目(mu)錄(lu)的(de)sitemap.json配置(zhi)文(wen)(wen)件(jian)(4)在pages文(wen)(wen)件(jian)夾中每一(yi)個頁(ye)面文(wen)(wen)件(jian)夾的(de).json配置(zhi)文(wen)(wen)件(jian)

(1)項目根目錄的app.json配置文件
app.json是小程序的(de)(de)全局配置，包括了(le)小程序的(de)(de): 
pages:所有頁面(mian)的路徑(jing)pages（可以在這(zhe)里創建新的頁面(mian)）
window:全局定義小程序的所有頁面的背景色、文字顏色等(deng)
style:全局定義(yi)小程序組(zu)件所使(shi)用的(de)樣式版本
sitemapLocation:用來指明sttemap.json的位置
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/test/test"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

(2)項目根目錄的project.config.json配置文件
用來記錄我們對小程序開發工具所做的個性化配置：
appid中存儲了小程序賬號的id
setting中保存了編譯相關的配置
projectname中保存了項目的名稱

(3)項目根目錄的sitemap.json配置文件
用來配置小程序頁面是否允許被微信索引，如果允許，搜關鍵字如果匹配成功會出現該小程序。
注意：sitemap.json的索引默認是開啟的，如果想要關閉，可以在setting中配置字段checkMap為false

(4)在pages文件夾中每一個頁面文件夾的.json配置文件
用來配置當前頁面，如果跟全局app.json重復沖突時，會就近原則，按照當前頁面的.json來執行

4.小程(cheng)序的wxml和網頁html的區別(bie)

(1)標簽名字不同
html(div,span,img,a)
wxml(view,text,image,navigator)
wxml的view標簽相當于html的div標簽，都是塊級元素，能夠設置寬高
text相當于span行內元素
注意wxml的圖片標簽是images，不是html的img
wxml的鏈接標簽是navigator，不是html的a

(2)屬性節點不同
href="#">
url="/pages/index/index.js">
html的鏈接屬性是href，而wxml的鏈接屬性是url

(3)提供了類似于vue中的模板語法
可以直接使用，不像html還得安裝。但是跟vue的使用還是有點差別的，如數據綁定不需要v-bind,v-model;v-if，v-else,v-show在小程序是wx:if、wx:ifelse、wx:else等；v-for，:key在小程序是wx:for,wx:for-item,wx:key,拿v-for的東西不需要像vue一樣（index,item）item打點拿到，直接item就是當前元素，直接index就是當前的索引了。
數據綁定
列表渲染
條件渲染

5.小程序的wxss和網頁的css的區別

(1)新增了rpx尺寸單位(自動適配屏幕大小)
這個rpx單位能夠自動適應不同尺寸的設備，一個屏幕分成750份rpx。我們不管設置了多少rpx,都會自動去進行換算匹配，很方便。
在ip6中，1rpx=0.5px,1px=2rpx,所以ip6分成750/2=375px.
而css中需要我們手動進行像素單位的換算，例如rem

(2)提供了全局的樣式和局部的樣式
項目根目錄的app.wxss會作用于所有小程序頁面。
局部頁面的.wxss會作用于當前頁面生效。
而css是需要我們去引入樣式的rel="stylesheet" href="" />

(3)wxss僅支持部分css選擇器
類選擇器.class和id選擇器#id
元素選擇器element
并集選擇器，后代選擇器
::after和 ::before等偽類選擇器

6.小(xiao)程序(xu)的(de).js文件

小(xiao)程序的.js文件分為三大類：

app.js文(wen)件（是(shi)整個(ge)項目的入口文(wen)件，通過App()函數啟動整個(ge)小程序）

頁(ye)面的.js文件(jian)（是頁(ye)面的入口文件(jian)，通(tong)過(guo)Page()函數來創建(jian)并運行(xing)整個頁(ye)面）

普(pu)通(tong)的(de).js文(wen)件（比如utils文(wen)件夾中的(de)文(wen)件，是普(pu)通(tong)功能模塊文(wen)件，用(yong)來(lai)封(feng)裝公共(gong)的(de)函數或(huo)者屬性供頁面使用(yong)，需要向外暴露(lu)）

7.創建小(xiao)程序(xu)的頁面及修改項目的首(shou)頁

創建小程序頁面
(1)右鍵新(xin)建文(wen)件(jian)(jian)夾，新(xin)建.js文(wen)件(jian)(jian)，會自動生成剩下的三個文(wen)件(jian)(jian)，如(ru):.json,.js,.wxml
(2)在app.json全局配置文件中的pages屬性中新增頁面的存放路徑，小程序會自動生成對應的頁面文件，如：
"pages":[
    "pages/index/index",
    "pages/logs/logs",
    "pages/test/test"
  ]

修改項目的首頁
只需要調整app.json中的pages頁面路徑的前后順序。小程序會把排在第一位的頁面，當作項目首頁進行渲染
"pages":[
    "pages/test/test",
    "pages/index/index",
    "pages/logs/logs",
  ]

8.小程(cheng)序(xu)的(de)啟動過程(cheng)和頁面渲染過程(cheng)8.1 小程(cheng)序(xu)的(de)啟動過程(cheng)

把(ba)小程序的(de)代碼包下載到本地

解析(xi)app.json全局配置文件

執行app.js小程序(xu)入口(kou)文件，調用App()函數創建小程序(xu)實例

渲染(ran)小程序(xu)的首頁（沒有app.wxml文件）

小程序啟動完成

8.2 頁面渲染的過程

加載解析(xi)頁面(mian)的.json配置文件

加(jia)載頁面的.wxml模板和.wxss樣式(shi)

執行頁(ye)面的(de).js文件，調用Page()函數創建頁(ye)面的(de)實例

頁面渲染完成

小程序(xu)用法1.小程序(xu)組件1.1 組件是干嘛(ma)的，有什(shen)么作(zuo)用

組件相當于(yu)標簽名(ming)，可以基(ji)于(yu)組件快(kuai)速搭建出漂亮的頁面結構(gou)

1.2組件的(de)分類1.2.1 視圖容器(qi)

view
普通視圖區域，類似于html的div，是一個塊級元素，常用來作為頁面的布局效果
class="bigbox1">
  class="box1">
  class="box2">
  class="box3">

scroll-view
可滾動的視圖區域，常用來實現滾動列表效果
縱向滑動：(要為scroll-view設定高度height，還有指定scroll-y屬性)
<scroll-view style="height:300rpx" scroll-y >
 <view>
  <view class="box1">view>
  <view class="box2">view>
  <view class="box3">view>
  view>
scroll-view>
橫向滑動：(要為scroll-view設定寬度width，并且指定好scroll-x屬性；)(為view設定flex和指定寬度)
<scroll-view style="width:300rpx" scroll-x >
 <view style="display:flex;width:800px">
  <view class="box1">view>
  <view class="box2">view>
  <view class="box3">view>
  view>
scroll-view>

swiper和swiper-item
輪播圖容器組件和輪播圖item組件

<swiper autoplay indicator-dots="true" interval="2000" circular="true">
  <swiper-item>
    <image src="/images/1.webp">image>
  swiper-item>
  <swiper-item>
    <image src="/images/2.webp">image>
  swiper-item>
  <swiper-item>
    <image src="/images/6.jpg">image>
  swiper-item>
  <swiper-item>
    <image src="/images/7.webp">image>
  swiper-item>
  <swiper-item>
    <image src="/images/8.webp">image>
  swiper-item>
swiper>
/*
wxss
1、設置swiper組件的寬高 。
2、設置swiper組件里面圖片的寬高。
注意：這里必須兩個同時設置才能達到圖片占滿的效果
*/
swiper {
  width:100%;
  height:200px;
}
swiper-item image {
  width:100%;
  height:200px;
}

1.2.2 基礎內(nei)容

text
文本組件，類似于html的span標簽，是一個行內元素
如果想讓被用戶長按選中的話，需要加上selectable屬性
<view>
  你好
  <text>你好2text>
view>
<view>
  你好
  <text selectable="true">你好3text>
view>

rich-text
富文本文件，支持把html字符串渲染為wxml結構放在標簽內
<view>
  <text><h1>一般texth1>text>
  
view>
<view>
  <rich-text nodes="
一般text
">rich-text>
view>

1.2.3 其(qi)他常用組(zu)件(jian)

button
按鈕組件，功能比html的button按鈕豐富，通過open-type屬性可以調用微信提供的各種功能（客服，轉發，獲取用戶授權，獲取用戶信息等）

<button bindtap="handler">我是一個按鈕button>
<button type="primary">primary按鈕button>
<button type="warn">warn按鈕button>
<button type="default" >default按鈕button>
<button size="mini">按鈕button>
<button size="mini" plain>按鈕button>

image
圖片組件，image組件默認寬度約是300px，高度為240px

<image src="/images/1.webp" >image>
<image src="/images/1.webp" style="width:100%;height:200px">image>
<image src="/images/1.webp" mode="heightFix">image>

navigator
頁面導航組件，類似于html中的a鏈接
url="/pages/container/contatiner">container

表單組(zu)件(jian)(jian)(jian)導(dao)航組(zu)件(jian)(jian)(jian)媒(mei)體組(zu)件(jian)(jian)(jian)map地圖組(zu)件(jian)(jian)(jian)canvas畫布組(zu)件(jian)(jian)(jian)開放(fang)能(neng)力無(wu)障礙訪(fang)問

2.小程序API2.1小程序API概述

小程序中的(de)(de)api是由宿主環境（微信(xin)）提(ti)供的(de)(de)，通(tong)過這些豐富的(de)(de)小程序api，開(kai)發者可以方便的(de)(de)調(diao)用(yong)微信(xin)提(ti)供的(de)(de)api;例(li)如：獲取(qu)用(yong)戶信(xin)息(xi)、本地存儲、支(zhi)付(fu)功能(neng)（wx打(da)點調(diao)用(yong)）

2.2小程序api的3大分類

(1)事(shi)件監聽api

特點：以on開頭，用來監聽某(mou)些事件的觸發（wx.onWindowResize(function,callback)監聽窗口(kou)尺(chi)寸變化的事件）

(2)同步api

特點：以(yi)Sync結尾的api都是同(tong)步api；同(tong)步api的執行結果(guo)，可以(yi)通(tong)過函數返回值直接獲取，如果(guo)執行儲出錯會拋出異(yi)常(chang)（wx.setStorageSync('key','value')向本地存儲寫入內容

(3)異步api

特(te)點：類似于jquery中的(de)$.ajax(options)函數，需要通(tong)過(guo)(guo)success、fall、complete接(jie)收(shou)調(diao)用的(de)結果(guo)（wx.request()發起網(wang)絡(luo)數據請(qing)求，通(tong)過(guo)(guo)success回調(diao)函數接(jie)收(shou)數據）

3.協同工作和發(fa)布3.1項目成(cheng)員(yuan)的組織結構

項目(mu)管理(li)者（統籌(chou)整個項目(mu)的進展和風險）

產品組（提需求）

設計組(zu)（出設計方案）

開發組（代碼開發）

測試組（項目測試）

3.2小程序的開(kai)發流程

提出需求（產品組）

設計（設計組）

開發（開發組）

體(ti)驗（產品組、設計(ji)組）

測試（測試組）

發布（管理者）

3.3小程序的版本

開發版本

體驗版本

審核中的版本

線上版本

3.4小程序(xu)發(fa)布的(de)整體步驟

上傳代(dai)碼->提交審核->發(fa)布

3.5上傳代碼

(1)點擊(ji)開(kai)發者工具頂部工具欄的“上(shang)傳”按鈕(2)填寫版本號和項目備(bei)注

3.6在后臺(tai)查看上(shang)傳后的版本

登(deng)錄小程序管(guan)理(li)(li)后臺->管(guan)理(li)(li)->版本管(guan)理(li)(li)->開發(fa)版本mp.weixin.qq.com

3.7提交審核

小(xiao)程(cheng)序的(de)(de)發(fa)布需要經過騰訊官方審核的(de)(de)（在(zai)開(kai)發(fa)版(ban)本的(de)(de)列表中，點擊提(ti)交審核按(an)鈕，按(an)照頁面提(ti)示(shi)填寫相關(guan)的(de)(de)信息，就能把小(xiao)程(cheng)序提(ti)交到騰訊官方進行審核）

3.8發布

審核通過(guo)后(hou)，管理員的微信會收到小程(cheng)序審核通過(guo)的通知，此時在審核版本的列表(biao)中(zhong)，點擊"發布(bu)"按鈕之后(hou)，即可把小程(cheng)序版本發布(bu)為(wei)線上版本，供小程(cheng)序用(yong)戶訪問(wen)和使用(yong)

3.9基于小程(cheng)序碼進行推廣

獲取小程序碼的5個(ge)步驟登錄小程序管理后(hou)臺->設(she)置->基本設(she)置->小程序及(ji)線下物料下載

3.10查看(kan)小(xiao)程序運營數據(ju)的(de)兩種方(fang)式

(1)在小程序(xu)后臺查看(kan)

登錄小(xiao)程序管理后臺(tai)->點(dian)(dian)擊側邊(bian)欄(lan)的(de)"統(tong)計"->點(dian)(dian)擊相(xiang)應的(de)tab可以看到相(xiang)關的(de)數(shu)據(2)使用"小(xiao)程序數(shu)據助(zhu)手"查看

打開微信(xin)->搜索小(xiao)程(cheng)(cheng)序(xu)數據(ju)助(zhu)手(shou)->查(cha)看已發布的(de)小(xiao)程(cheng)(cheng)序(xu)相關數據(ju)