本篇文章給大家?guī)?lái)了關(guān)于微信小程序的相關(guān)知識(shí)，主要介紹了微信小程序的開(kāi)發(fā)步驟以及主要的過(guò)程詳解，希望對(duì)大家有幫助。

【相關(guān)學(xué)習(xí)推薦：小程序?qū)W習(xí)教程】

目前，小程序行業(yè)已經(jīng)成為互聯(lián)網(wǎng)營(yíng)銷的熱門黑馬之一，依托于各大流量平臺(tái)，小程序行業(yè)具有天然的用戶基礎(chǔ)和得天獨(dú)厚的資源優(yōu)勢(shì)，憑借其方便快捷的操作以及簡(jiǎn)單通俗的模式，僅短短一年的時(shí)間，就迎來(lái)了爆發(fā)性的增長(zhǎng)。目前市場(chǎng)上開(kāi)發(fā)一款小程序幾千到幾萬(wàn)不等，以騰訊云為例，由騰訊官方團(tuán)隊(duì)設(shè)計(jì)，上線立即投入運(yùn)營(yíng)的一款小程序以每年680~3680的價(jià)格出售。復(fù)雜的小程序設(shè)計(jì)的暫且不談，從最簡(jiǎn)單的說(shuō)起。

小程序的開(kāi)發(fā)方式分兩種，一種是定制開(kāi)發(fā)，一種是第三方平臺(tái)開(kāi)發(fā)。定制開(kāi)發(fā)價(jià)格較高，幾萬(wàn)甚至十幾萬(wàn)不等，并且開(kāi)發(fā)周期較長(zhǎng)；
第三方平臺(tái)開(kāi)發(fā)價(jià)格較低，根據(jù)功能幾千就可以開(kāi)發(fā)好，最主要是開(kāi)發(fā)周期短,一個(gè)星期左右就可上線運(yùn)營(yíng)。

一、微信小程序開(kāi)發(fā)必備技術(shù)

一、HTML語(yǔ)言

HTML就是超文本標(biāo)記語(yǔ)言的簡(jiǎn)寫(xiě)，HTML主要負(fù)責(zé)網(wǎng)頁(yè)的骨架，就如同動(dòng)物的骨架一樣，HTML語(yǔ)言就是支撐網(wǎng)頁(yè)布局的骨架。

二、CSS

CSS，是層疊樣式表的簡(jiǎn)寫(xiě)，主要負(fù)責(zé)網(wǎng)頁(yè)樣式，網(wǎng)頁(yè)內(nèi)容如何分布，板塊背景，顏色等外觀問(wèn)題可以有CSS控制。

三、JavaScript

簡(jiǎn)稱js，是一種動(dòng)態(tài)的腳本語(yǔ)言。在以前js僅僅是用于網(wǎng)頁(yè)交互的腳本語(yǔ)言，隨著Google v8引擎、angular、react等前端框架使得前后端分離的趨勢(shì)愈加明顯以及node、js等技術(shù)的開(kāi)發(fā)使得js在服務(wù)器端也迸發(fā)出非凡的活力，成為當(dāng)前非常活躍的語(yǔ)言之一。

四、服務(wù)器語(yǔ)言

如果不是專業(yè)的后端開(kāi)發(fā)者，可能后端有一定的難度其學(xué)習(xí)曲線較陡。但是，仍然建議開(kāi)發(fā)者學(xué)習(xí)一下后端語(yǔ)言，至少需要了解大致的原因框架，能夠看懂其代碼邏輯，這樣不僅可以很好的實(shí)現(xiàn)前后端的配合，也能夠在小程序出現(xiàn)bug的時(shí)候扯皮用。服務(wù)器的語(yǔ)言有很多比較常用的是PHP、Java、Python、ASP等技術(shù)，建議初學(xué)者根據(jù)具體需求挑選進(jìn)行學(xué)習(xí)。

五、數(shù)據(jù)庫(kù)語(yǔ)言

如果你開(kāi)發(fā)的小程序數(shù)據(jù)量不大，架構(gòu)不復(fù)雜的話數(shù)據(jù)庫(kù)語(yǔ)言相對(duì)來(lái)說(shuō)是比較簡(jiǎn)單的，一般學(xué)會(huì)一些常用的命令以及常出現(xiàn)的問(wèn)題就能夠應(yīng)付使用。常用的數(shù)據(jù)庫(kù)有免費(fèi)的MySQL、msSQL、MongoDB、Oracle等數(shù)據(jù)庫(kù)。若數(shù)據(jù)量非常龐大，很容易導(dǎo)致小程序首屏白頁(yè)，這時(shí)就要考慮優(yōu)化。

注：具體落實(shí)到開(kāi)發(fā)軟件上，大同小異，每款軟件都有他們的特點(diǎn)，語(yǔ)言標(biāo)準(zhǔn)規(guī)則有些不同，常見(jiàn)的開(kāi)發(fā)工具有：微信開(kāi)發(fā)者工具、字節(jié)跳動(dòng)開(kāi)發(fā)者工具、Sublime Text 3。這里我們使用微信開(kāi)發(fā)者工具。

二、微信開(kāi)發(fā)者工具

一、下載安裝

百度“微信公眾平臺(tái)”，選擇小程序

在開(kāi)發(fā)者工具中選擇相應(yīng)的版本下載

推薦安裝64位穩(wěn)定版

二、新建項(xiàng)目

在啟動(dòng)頁(yè)填寫(xiě)項(xiàng)目名稱、目錄、AppID（選擇測(cè)試號(hào)）

這是基礎(chǔ)框架

工具自帶的啟動(dòng)日志，下面開(kāi)始了解小程序開(kāi)發(fā)的框架

三、程序框架

根目錄下兩個(gè)文件夾
pages是用于存放頁(yè)面文件的文件夾；
utils是用于存放公共js的文件夾；

小程序大致分兩塊，首頁(yè)和分頁(yè)。首頁(yè)即登錄后展示的第一個(gè)頁(yè)面，首頁(yè)和分頁(yè)分別占一個(gè)文件夾，且都包含在pages文件夾下，很顯然，初始化的小程序只有兩個(gè)頁(yè)面（首頁(yè)index和日志頁(yè)logs）

index下又包含首頁(yè)界面設(shè)計(jì)所需要的文件（index.js、index.json、index.wxss、index.wxml）
index.js即首頁(yè)面的邏輯文件，類似于js文檔；
index.json即首頁(yè)面的配置文件，比如標(biāo)題字，背景之類；
index.wxss即首頁(yè)面的樣式表文件，類似于CSS文檔；
index.wxml即首頁(yè)面的結(jié)構(gòu)文件，類似于HTML文檔。

同樣，日志文件logs與index基本類似（若添加新的頁(yè)面，需在pages文件下新增文件夾）

而根目錄下的app.js、app.json、app.wxss、project.config.json、sitemap.json即小程序的全局設(shè)置。

app.js即項(xiàng)目的入口文件，用于創(chuàng)建應(yīng)用程序?qū)ο螅瑔?dòng)小程序時(shí)首先調(diào)用；
app.json即當(dāng)前小程序的全局變量，包括了小程序的頁(yè)面路徑、界面表現(xiàn)、底部tab等；
app.wxss即小程序的公共樣式表，開(kāi)發(fā)者可在頁(yè)面組件的class屬性上直接使用app.wxss中聲明的樣式規(guī)則；
project.config.json即項(xiàng)目配置文件，通俗來(lái)說(shuō)就是最開(kāi)始開(kāi)發(fā)項(xiàng)目時(shí)的個(gè)性化配置，其中會(huì)包括編輯器的顏色、代碼上傳時(shí)自動(dòng)壓縮等等一系列選項(xiàng)。
sitemap.json用于配置小程序及其頁(yè)面是否允許被微信索引，文件內(nèi)容為一個(gè)JSON對(duì)象，如果沒(méi)有sitemap.json，則默認(rèn)為所有頁(yè)面都允許被索引；

開(kāi)發(fā)者工具在創(chuàng)建項(xiàng)目后自動(dòng)將一些公共的代碼抽離成為一個(gè)單獨(dú)的 js (utils.js)文件，作為一個(gè)模塊;也就是utils文件夾，用來(lái)放自己封裝的工具類函數(shù)，是一個(gè)共享的方法。

四、程序調(diào)試區(qū)

在程序調(diào)試區(qū)有幾種常用的調(diào)試模式

1.Console

Console就是控制臺(tái)，可以顯示錯(cuò)誤信息和打印變量的信息等

2.Wxml

Wxml相當(dāng)于HTML+CSS，左側(cè)的區(qū)域是HTML語(yǔ)言+CSS的一些標(biāo)簽屬性。右側(cè)可以便捷的設(shè)置CSS的屬性

3.Sources

Sources顯示了當(dāng)前項(xiàng)目的所有腳本文件，微信小程序框架會(huì)對(duì)這些腳本文件進(jìn)行編譯

4.Network

Network用來(lái)顯示與網(wǎng)絡(luò)相關(guān)的信息，此處暫無(wú)網(wǎng)絡(luò)請(qǐng)求

5.AppData

AppData顯示當(dāng)前項(xiàng)目顯示的具體數(shù)據(jù)，可以在這里編譯，并且會(huì)在頁(yè)面實(shí)時(shí)顯示

三、項(xiàng)目實(shí)戰(zhàn)（附核心代碼）

一、項(xiàng)目介紹

利用微信開(kāi)發(fā)者工具制作了一個(gè)最基礎(chǔ)的小程序“太行精靈”（微信直接搜索），功能僅為展示，無(wú)任何商業(yè)功能。

首頁(yè)效果圖如下

二、項(xiàng)目框架

“太行精靈”小程序設(shè)有6個(gè)頁(yè)面，分別是首頁(yè)index、內(nèi)容頁(yè)discovery、個(gè)人主頁(yè)setting、登錄注冊(cè)頁(yè)login、打卡頁(yè)Calendar、掃碼支付頁(yè)please

1.index

1)index.js

var?api?=?require('../../utils/api.js')var?app?=?getApp()Page({
??data:?{
????lists:?[
??????{
????????'id':?'1',
????????'image':?'/img/1.jpg',
????????'title':?'太行領(lǐng)秀|?長(zhǎng)治·上黨郡?【深度了解長(zhǎng)治紅色旅游景點(diǎn)】',
????????'num':'304',
????????'state':'進(jìn)行中',
????????'time':?'4月21日?17:59',
????????'address':?'長(zhǎng)治市·潞州區(qū)'
????????
??????},
??????{
????????'id':?'2',
????????'image':?'/img/2.jpg',
????????'title':?'長(zhǎng)治·武鄉(xiāng)·革命圣地',
????????'num':'380',
????????'state':'已結(jié)束',
????????'time':?'4月15日?17:39',
????????'address':?'長(zhǎng)治市·武鄉(xiāng)縣'
??????},
??????{
????????'id':?'3',
????????'image':?'/img/3.jpg',
????????'title':?'沁源之美·靈空山',
????????'num':'500',
????????'state':'進(jìn)行中',
????????'time':?'2月04日?17:31',
????????'address':?'長(zhǎng)治市·沁源縣'
??????},
??????{
????????'id':?'4',
????????'image':?'/img/4.jpg',
????????'title':?'革命太行邀您“與世界對(duì)話”',
????????'num':'150',
????????'state':'進(jìn)行中',
????????'time':?'5月09日?17:21',
????????'address':?'長(zhǎng)治市·潞州區(qū)'
??????},
??????{
????????'id':?'5',
????????'image':?'/img/5.jpg',
????????'title':?'紅色太行?·?太行山革命區(qū)',
????????'num':'217',
????????'state':'進(jìn)行中',
????????'time':?'10月09日?16:59',
????????'address':?'長(zhǎng)治市·潞州區(qū)'
??????}
????],
????list:?[
??????{
????????'id':?'1',
????????'image':?'/img/1.jpg',
????????'title':?'太行領(lǐng)秀|?長(zhǎng)治·上黨郡?【深度了解長(zhǎng)治紅色旅游景點(diǎn)】',
????????'num':'304',
????????'state':'進(jìn)行中',
????????'time':?'10月09日?17:59',
????????'address':?'長(zhǎng)治市·潞州區(qū)'
??????},
??????{
????????'id':?'2',
????????'image':?'/img/2.jpg',
????????'title':?'長(zhǎng)治·武鄉(xiāng)·革命圣地',
????????'num':'380',
????????'state':'已結(jié)束',
????????'time':?'10月09日?17:39',
????????'address':?'長(zhǎng)治市·武鄉(xiāng)縣'
??????},
??????{
????????'id':?'3',
????????'image':?'/img/3.jpg',
????????'title':?'沁源之美·靈空山',
????????'num':'500',
????????'state':'進(jìn)行中',
????????'time':?'10月09日?17:31',
????????'address':?'長(zhǎng)治市·沁源縣'
??????},
??????{
????????'id':?'4',
????????'image':?'/img/4.jpg',
????????'title':?'革命太行邀您“與世界對(duì)話”',
????????'num':'150',
????????'state':'已結(jié)束',
????????'time':?'10月09日?17:21',
????????'address':?'長(zhǎng)治市·潞州區(qū)'
??????},
??????{
????????'id':?'5',
????????'image':?'/img/5.jpg',
????????'title':?'紅色太行?·?太行山革命區(qū)',
????????'num':'217',
????????'state':'進(jìn)行中',
????????'time':?'10月09日?16:59',
????????'address':?'長(zhǎng)治市·潞州區(qū)'
??????}
????],
????imgUrls:?[
????????'/img/26.jpg',
????????'/img/13.jpg',
????????'/img/28.jpg',
????????'/img/14.jpg',
????????'/img/24.jpg',
????????'/img/15.jpg',
????????'/img/27.jpg',
????????'/img/27.jpg',
????????'/img/16.jpg'
????]
??},
??onLoad?()?{
????var?that?=?this
????app.getSystemInfo(function(res)?{
????	that.setData({
????????	systemInfo:?res??????	})
????})

????that.setData({
????_api:?api????})

????this.getSwipers()
????this.pullUpLoad()
??},

??/**
???*
???*/
???getSwipers?()?{
?????api.get(api.SWIPERS)
???????.then(res?=>?{
?????????this.setData({
???????????swipers:?res.data.ads?????????})
???????})
???},

??scrollR:?function(e){
????this.setData({
??????lists:?this.data.lists.concat(this.data.list),
????});
??},

??onLoad:?function?(e)?{
????this.scrollR(e);
??},

??scroll:?function(e){
????this.scrollR(this.data.offset);
??},
??//頁(yè)面跳轉(zhuǎn)函數(shù)（wxml中找bindtap="go2detail）
??go2detail:?function(param){
????wx.navigateTo({
?
??????url:?'/pages/discovery/discovery',
?
??????})
??}})

2)index.json

{
??"usingComponents":?{}}

3)index.wxml

<scroll-view scroll-y="true" bindscroll="scroll">
??<view class="swiper">
????<swiper indicator-dots="true" autoplay="true" interval="5000" duration="1000">
??????<block wx:for="{{imgUrls}}" wx:key="item.id">
????????<swiper-item>
??????????<image src="{{item}}" class="slide-image"/>
????????</swiper-item>
??????</block>
????</swiper>
??</view>
??<view class="mobi_title">
????<text class="mobi_icon"></text>
????<text>太行精靈為你推薦</text>
??</view>
??<block wx:for-items="{{lists}}" wx:for-item="list" wx:key="list.id">
????<view class="list" data-id="{{list.id}}">
??????<view class="list-img">
????????<image class="video-img" bindtap="go2detail" mode="scaleToFill" src="{{list.image}}"></image>
??????</view>

??????<view class="list-detail">
????????<view class="list-title" bindtap="go2detail"><text>{{list.title}}</text></view>
????????<view class="list-tag"><view class="state">{{list.state}}</view><view class="join"><text class="list-num">{{list.num}}</text>人報(bào)名</view></view>
????????<view class="list-info"><text>{{list.address}}</text>|<text>{{list.time}}</text></view>
??????</view>?
????</view>
??</block></scroll-view><include src="../layout/footer.wxml"/>

4)index.wxss

/**index.wxss**/page{
	height:?100%;
	background-color:?#efeff4;}scroll-view{
??height:?100%;}.swiper{
??top:?0px;
??width:?100%;
??height:?240px;	}.swiper?swiper{
	height:?240px;}.slide-image{
??width:?100%;}.mobi_title{
	font-size:?15px;
	color:?#777;
??line-height:?110%;
??font-weight:?normal;
	width:?100%;
??padding:?10px;
??background-color:?#f3f3f3;
??position:?relative;}.mobi_icon{
	padding:?0px?1.5px;
??border-radius:?1.5px;
??background-color:?#ff7777;
??position:?relative;
??margin-right:?5px;}/*list*/.list{
	overflow:?hidden;
	width:?100%;
	padding:?0?20px?0?0;
	border-top:?1px?solid?#eeeeee;
	background-color:?#fff;
??margin-bottom:?15px;}.list-img{
??position:?relative;
	float:?left;
	width:?120px;}.list-img?.video-img{
	width:?120px;
	height:?120px;}.list-detail{
	position:?absolute;
??margin-top:?15px;
??margin-left:?135px;
??margin-right:?10px;}.list-title?text{
	word-break:?break-all;
??text-overflow:?ellipsis;
??display:?-webkit-box;
??-webkit-box-orient:?vertical;
??-webkit-line-clamp:?2;
??overflow:?hidden;
	font-size:?17px;
??color:?#333;
	font-weight:?bold;
??line-height:?120%;}.list-tag?view.state{
????display:?block;
????font-size:?11px;
????color:?#81aaf7;
????width:?50px;
????padding:?2px;
????border:?1px?solid?#93b9ff;
????border-radius:?2px;
????text-align:?center;
????margin-top:?10px;
		float:?left;}.list-tag?.join{
	font-size:?13px;
??line-height:?120%;
??color:?#bbb;
??position:?absolute;
??display:?inline;
??margin:?10px?0?0?20px;}.list-tag?.list-num{
	font-size:?16px;
??color:?#ff6666;}.list-info{
	font-size:?13px;
??color:?#bbb;
??line-height:?110%;
??font-weight:?normal;
	margin-top:?40px;}

2.app.json

{
??"pages":?[
????"pages/index/index",
????"pages/setting/setting",
????"pages/login/login",
????"pages/please/please",
????"pages/Calendar/Calendar",
????"pages/discovery/discovery"
??],
??"window":?{
????"backgroundTextStyle":?"light",
????"navigationBarBackgroundColor":?"#fff",
????"navigationBarTitleText":?"太行精靈",
????"navigationBarTextStyle":?"black"
??},
??"tabBar":?{
????"color":?"#a0a0a0",
????"selectedColor":?"#ec5c30",
????"backgroundColor":?"#f2f2f2",
????"borderStyle":?"white",
????"list":?[
??????{
????????"pagePath":?"pages/index/index",
????????"text":?"首頁(yè)",
????????"iconPath":?"img/shouye.png",
????????"selectedIconPath":?"img/shouye1.png"
??????},
??????{
????????"pagePath":?"pages/setting/setting",
????????"text":?"我的",
????????"iconPath":?"img/me.png",
????????"selectedIconPath":?"img/me1.png"
??????}
????]??},
??"debug":?true,
??"sitemapLocation":?"sitemap.json"}

以上代碼僅供參考，可以參照以下文檔
鏈接:
微信小程序官方文檔
小程序框架

三、項(xiàng)目上線

微信公眾平臺(tái)，進(jìn)入小程序進(jìn)行注冊(cè)

注冊(cè)完成后會(huì)有AppID，將之前的測(cè)試號(hào)用新ID代替，再次打開(kāi)微信開(kāi)發(fā)者工具，編輯區(qū)上方會(huì)出現(xiàn)上傳按鈕

上傳成功后進(jìn)入微信公眾平臺(tái)，會(huì)看到開(kāi)發(fā)版本，提交審核，半小時(shí)左右，通知審核通過(guò)之后提交審核版本，10分鐘左右，就能看到自己上線的小程序。

【相關(guān)學(xué)習(xí)推薦：小程序開(kāi)發(fā)教程】

以上是零基礎(chǔ)微信小程序開(kāi)發(fā)及實(shí)例詳解的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！