【微信小程序開發(fā)零基礎(chǔ)入門】——微信小程序入門

這篇具有很好參考價值的文章主要介紹了【微信小程序開發(fā)零基礎(chǔ)入門】——微信小程序入門。希望對大家有所幫助。如果存在錯誤或未考慮完全的地方，請大家不吝賜教，您也可以點擊"舉報違法"按鈕提交疑問。

微信小程序?qū)W習(xí)

前言

學(xué)習(xí)小程序跟學(xué)習(xí)網(wǎng)頁開發(fā)有什么不同

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

正文

了解小程序構(gòu)成

1.如何創(chuàng)建微信小程序項目

1.1 注冊、登錄、復(fù)制appId

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

登錄：在 https://mp.weixin.qq.com 登錄小程序賬號

復(fù)制appId: 在 "開發(fā)" 的 "開發(fā)管理" 的 "開發(fā)設(shè)置" 的 "開發(fā)者ID"中

微信小程序開發(fā)零基礎(chǔ)入門,前端,前端,微信小程序,Powered by 金山文檔

1.2 下載微信開發(fā)者工具

在 https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html 下載軟件

1.3 進入微信開發(fā)者工具掃碼登錄，使用到上面的APPId。選好存放文件的位置，選擇小程序開發(fā)模式，選擇不使用云服務(wù)，選擇javascript語言，點擊創(chuàng)建項目

熟悉認識創(chuàng)建的項目文件的主要結(jié)構(gòu)

2.1 pages文件夾

pages文件夾使用來存放所有小程序的頁面的，一個頁面也是是由四個文件組成的文件夾。比如說：pages文件夾中的index文件夾，包含了.js,.wxml,.wxss,.json文件

.js文件（頁面的腳本文件，存放頁面的數(shù)據(jù)，事件處理函數(shù)。如：data） 
.json文件（當前頁面的配置文件，配置窗口的外觀，表現(xiàn)）
.wxml文件（頁面的模板結(jié)構(gòu)文件，相當于html）
.wxss文件（當前頁面的樣式表文件,相當于css）

2.2 utils文件夾

utils文件夾是用來存放工具性質(zhì)的模塊（比如說：格式化事件的自定義模塊，最后還要導(dǎo)出）

2.3 app.js文件

app.js文件是小程序的入口文件，整個小程序的執(zhí)行首先由app.js入手

2.4 app.json文件

小程序項目的全局配置文件

2.5 app.wxss文件

app.wxss小程序項目的全局樣式文件

2.6 project.config.json

project.config.json 項目的配置文件

2.7 sitemap.json

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

3.小程序的json配置文件

json是一種數(shù)據(jù)格式，在實際開發(fā)中，json總是以配置文件的形式出現(xiàn)。小程序的項目也是不例外的：通過不同的.json配置文件，可以對小程序項目進行不同級別的配置。

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

(1)項目根目錄的app.json配置文件

(2)項目根目錄的project.config.json配置文件

(3)項目根目錄的sitemap.json配置文件

(4)在pages文件夾中每一個頁面文件夾的.json配置文件

(1)項目根目錄的app.json配置文件
app.json是小程序的全局配置，包括了小程序的: 
pages:所有頁面的路徑pages（可以在這里創(chuàng)建新的頁面）
window:全局定義小程序的所有頁面的背景色、文字顏色等
style:全局定義小程序組件所使用的樣式版本
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配置文件
用來記錄我們對小程序開發(fā)工具所做的個性化配置：
appid中存儲了小程序賬號的id
setting中保存了編譯相關(guān)的配置
projectname中保存了項目的名稱

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

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

4.小程序的wxml和網(wǎng)頁html的區(qū)別

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

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

(3)提供了類似于vue中的模板語法
可以直接使用，不像html還得安裝。但是跟vue的使用還是有點差別的，如數(shù)據(jù)綁定不需要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就是當前的索引了。
數(shù)據(jù)綁定
列表渲染
條件渲染

5.小程序的wxss和網(wǎng)頁的css的區(qū)別

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

而css中需要我們手動進行像素單位的換算，例如rem

(2)提供了全局的樣式和局部的樣式
項目根目錄的app.wxss會作用于所有小程序頁面。
局部頁面的.wxss會作用于當前頁面生效。

而css是需要我們?nèi)ヒ霕邮降?lt;link rel="stylesheet" href="" />

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

6.小程序的.js文件

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

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

頁面的.js文件（是頁面的入口文件，通過Page()函數(shù)來創(chuàng)建并運行整個頁面）

普通的.js文件（比如utils文件夾中的文件，是普通功能模塊文件，用來封裝公共的函數(shù)或者屬性供頁面使用，需要向外暴露）

7.創(chuàng)建小程序的頁面及修改項目的首頁

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

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

8.小程序的啟動過程和頁面渲染過程

8.1 小程序的啟動過程

把小程序的代碼包下載到本地

解析app.json全局配置文件

執(zhí)行app.js小程序入口文件，調(diào)用App()函數(shù)創(chuàng)建小程序?qū)嵗?

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

小程序啟動完成

8.2 頁面渲染的過程

加載解析頁面的.json配置文件

加載頁面的.wxml模板和.wxss樣式

執(zhí)行頁面的.js文件，調(diào)用Page()函數(shù)創(chuàng)建頁面的實例

頁面渲染完成

小程序用法

1.小程序組件

1.1 組件是干嘛的，有什么作用

組件相當于標簽名，可以基于組件快速搭建出漂亮的頁面結(jié)構(gòu)

1.2組件的分類

1.2.1 視圖容器

（1）view

普通視圖區(qū)域，類似于html的div，是一個塊級元素，常用來作為頁面的布局效果

<view class="bigbox1">
  <view class="box1"></view>
  <view class="box2"></view>
  <view class="box3"></view>
</view>

//縱向滑動：(要為scroll-view設(shè)定高度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設(shè)定寬度width，并且指定好scroll-x屬性；)(為view設(shè)定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、設(shè)置swiper組件的寬高 。
2、設(shè)置swiper組件里面圖片的寬高。
注意：這里必須兩個同時設(shè)置才能達到圖片占滿的效果
*/
swiper {
  width:100%;
  height:200px;
}
swiper-item image {
  width:100%;
  height:200px;
}

1.2.2 基礎(chǔ)內(nèi)容

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

rich-text
富文本文件，支持把html字符串渲染為wxml結(jié)構(gòu)放在標簽內(nèi)
<view>
  <text><h1>一般text</h1></text>
  <!--不顯示-->
</view>
<view>
  <rich-text nodes="<h1 style='color:pink;'>一般text</h1>"></rich-text>
</view>

1.2.3 其他常用組件

button
按鈕組件，功能比html的button按鈕豐富，通過open-type屬性可以調(diào)用微信提供的各種功能（客服，轉(zhuǎn)發(fā)，獲取用戶授權(quán)，獲取用戶信息等）
<!--button的使用-->
<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的使用-->
<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
頁面導(dǎo)航組件，類似于html中的a鏈接
<navigator url="/pages/container/contatiner">container</navigator>

表單組件

導(dǎo)航組件

媒體組件

map地圖組件

canvas畫布組件

開放能力

無障礙訪問

2.小程序API

2.1小程序API概述

小程序中的api是由宿主環(huán)境（微信）提供的，通過這些豐富的小程序api，開發(fā)者可以方便的調(diào)用微信提供的api;例如：獲取用戶信息、本地存儲、支付功能（wx打點調(diào)用）

2.2小程序api的3大分類

(1)事件監(jiān)聽api

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

(2)同步api

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

(3)異步api

特點：類似于jquery中的$.ajax(options)函數(shù)，需要通過success、fall、complete接收調(diào)用的結(jié)果（wx.request()發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請求，通過success回調(diào)函數(shù)接收數(shù)據(jù)）

3.協(xié)同工作和發(fā)布

3.1項目成員的組織結(jié)構(gòu)

項目管理者（統(tǒng)籌整個項目的進展和風險）

產(chǎn)品組（提需求）

設(shè)計組（出設(shè)計方案）

開發(fā)組（代碼開發(fā)）

測試組（項目測試）

3.2小程序的開發(fā)流程

提出需求（產(chǎn)品組）

設(shè)計（設(shè)計組）

開發(fā)（開發(fā)組）

體驗（產(chǎn)品組、設(shè)計組）

測試（測試組）

發(fā)布（管理者）

3.3小程序的版本

開發(fā)版本

體驗版本

審核中的版本

線上版本

3.4小程序發(fā)布的整體步驟

上傳代碼->提交審核->發(fā)布

3.5上傳代碼

(1)點擊開發(fā)者工具頂部工具欄的“上傳”按鈕

(2)填寫版本號和項目備注

3.6在后臺查看上傳后的版本

登錄小程序管理后臺->管理->版本管理->開發(fā)版本

https://mp.weixin.qq.com

3.7提交審核

小程序的發(fā)布需要經(jīng)過騰訊官方審核的（在開發(fā)版本的列表中，點擊提交審核按鈕，按照頁面提示填寫相關(guān)的信息，就能把小程序提交到騰訊官方進行審核）

3.8發(fā)布

審核通過后，管理員的微信會收到小程序?qū)徍送ㄟ^的通知，此時在審核版本的列表中，點擊"發(fā)布"按鈕之后，即可把小程序版本發(fā)布為線上版本，供小程序用戶訪問和使用

3.9基于小程序碼進行推廣

獲取小程序碼的5個步驟

登錄小程序管理后臺->設(shè)置->基本設(shè)置->小程序及線下物料下載

3.10查看小程序運營數(shù)據(jù)的兩種方式

(1)在小程序后臺查看

登錄小程序管理后臺->點擊側(cè)邊欄的"統(tǒng)計"->點擊相應(yīng)的tab可以看到相關(guān)的數(shù)據(jù)

(2)使用"小程序數(shù)據(jù)助手"查看

打開微信->搜索小程序數(shù)據(jù)助手->查看已發(fā)布的小程序相關(guān)數(shù)據(jù)文章來源地址http://www.zghlxwxcb.cn/news/detail-779997.html

到了這里，關(guān)于【微信小程序開發(fā)零基礎(chǔ)入門】——微信小程序入門的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！