介紹
一、什么是小程序？
小程序是一種不需要下載、安裝即可使用的應(yīng)用，它實現(xiàn)了觸手可及的夢想，用戶掃一掃或者搜一下就能打開應(yīng)用，也實現(xiàn)了用完即走的理念，用戶不用安裝太多應(yīng)用，應(yīng)用隨處可用，但又無須安裝卸載。西安做微信小程序基礎(chǔ)知識大全
二、開放注冊范圍：
企業(yè)、政府、媒體、其他組織
三、主體信息及驗證方式：
企業(yè)類型帳號可選擇兩種主體驗證方式：
方式一：需要用公司的對公賬戶向騰訊公司打款來驗證主體身份。打款信息在提交主體信息后可以查看到。
方式二：通過微信認(rèn)證驗證主體身份，需支付300元認(rèn)證費。認(rèn)證通過前，小程序部分功能暫無法使用。
政府、媒體、其他組織類型帳號，必須通過微信認(rèn)證驗證主體身份。認(rèn)證通過前，小程序部分功能暫無法使用。西安做微信小程序基礎(chǔ)知識大全
特別提醒：小程序主體信息一經(jīng)提交后不可修改。
四、完善小程序信息
完成注冊后，微信小程序信息完善步驟和開發(fā)可同步進行。
選擇對公打款的用戶，完成匯款驗證后，可以補充小程序名稱信息，上傳小程序頭像，填寫小程序介紹并選擇服務(wù)范圍。西安做微信小程序基礎(chǔ)知識大全
選擇通過微信認(rèn)證驗證主體身份的用戶，需先完成微信認(rèn)證后，才可以補充小程序名稱信息，上傳小程序頭像，填寫小程序介紹并選擇服務(wù)范圍。
五、開發(fā)前準(zhǔn)備：
1.綁定開發(fā)者
登錄微信公眾平臺小程序，進入用戶身份- 開發(fā)者，新增綁定開發(fā)者。已認(rèn)證的小程序可以綁定不多于20個開發(fā)者。未認(rèn)證的小程序可以綁定不多于10個開發(fā)者。西安做微信小程序基礎(chǔ)知識大全
2.獲取AppID
進入“設(shè)置-開發(fā)設(shè)置”，獲取AppID信息。
3.閱讀開發(fā)文檔并下載開發(fā)者工具
點擊頁面右上角文檔-開發(fā)，詳細(xì)閱讀開發(fā)者文檔并進入下載頁面，下載開發(fā)者工具。
六、客服系統(tǒng)
為豐富小程序的服務(wù)能力，提高服務(wù)質(zhì)量，微信為小程序提供客服消息能力，以便小程序用戶可以方便快捷地與小程序服務(wù)提供方進行溝通。
設(shè)計
一、概要
設(shè)計指南建立在充分尊重用戶知情權(quán)與操作權(quán)的基礎(chǔ)之上，旨在微信生態(tài)體系內(nèi)，建立友好、高效、一致的用戶體驗，同時最大程度適應(yīng)和支持不同需求，實現(xiàn)用戶與小程序服務(wù)方的共贏。
二、友好禮貌
為了避免用戶在微信中使用小程序服務(wù)時，注意力被周圍復(fù)雜環(huán)境干擾，小程序在設(shè)計時應(yīng)該注意減少無關(guān)的設(shè)計元素對用戶目標(biāo)的干擾，禮貌地向用戶展示程序提供的服務(wù)，友好地引導(dǎo)用戶進行操作。
1.重點突出
每個頁面都應(yīng)有明確的重點，以便于用戶每進入一個新頁面的時候都能快速地理解頁面內(nèi)容。在確定了重點的前提下，應(yīng)盡量避免頁面上出現(xiàn)其它與用戶的決策和操作無關(guān)的干擾因素。
2.流程明確
為了讓用戶順暢地使用頁面，在用戶進行某一個操作流程時，應(yīng)避免出現(xiàn)用戶目標(biāo)流程之外的內(nèi)容而打斷用戶。西安做微信小程序基礎(chǔ)知識大全
三、清晰明確
一旦用戶進入我們的小程序頁面，我們就有責(zé)任和義務(wù)清晰明確地告知用戶身在何處、又可以往何處去，確保用戶在頁面中游刃有余地穿梭而不迷路，這樣才能為用戶提供安全且愉悅的使用體驗。
1.導(dǎo)航明確，來去自如
導(dǎo)航是確保用戶在網(wǎng)頁中瀏覽跳轉(zhuǎn)時不迷路的最關(guān)鍵因素。導(dǎo)航需要告訴用戶，當(dāng)前在哪，可以去哪，如何回去等問題。首先在微信系統(tǒng)內(nèi)的所有小程序的全部頁面，均會自帶有微信提供的導(dǎo)航欄，統(tǒng)一解決當(dāng)前在哪，如何回去的問題。在微信層級導(dǎo)航保持體驗一致，有助于用戶在微信內(nèi)形成統(tǒng)一的體驗和交互認(rèn)知，無需在各小程序和其他微信頁面的切換中新增學(xué)習(xí)成本或改變使用習(xí)慣。
微信導(dǎo)航區(qū)（iOS）
微信進入小程序的第一個頁面，導(dǎo)航區(qū)通常只有一個操作——“返回”，即返回進入小程序前的微信頁面。 進入小程序后的次級頁面，導(dǎo)航區(qū)的操作為——“返回” 和“關(guān)閉”。 “返回”，即返回上一級小程序界面或微信界面。“關(guān)閉”，即在當(dāng)前界面直接退出小程序，回到進入小程序前的微信頁面。
微信導(dǎo)航區(qū)（Android）
導(dǎo)航區(qū)僅存在唯一操作——直接退出小程序，回到進入小程序前的微信或系統(tǒng)桌面，安卓手機自帶的硬件返回鍵執(zhí)行返回上一級頁面的操作。
2.減少等待，反饋及時
頁面的過長時間的等待會引起用戶的不良情緒，使用微信小程序項目提供的技術(shù)已能很大程度縮短等待時間。即便如此，當(dāng)不可避免的出現(xiàn)了加載和等待的時候，需要予以及時的反饋以舒緩用戶等待的不良情緒。
3.異常可控，有路可退
在設(shè)計任何的任務(wù)和流程時，異常狀態(tài)和流程往往容易被忽略，而這些異常場景往往是用戶最為沮喪和需要幫助的時候，因此需要格外注意異常狀態(tài)的設(shè)計，在出現(xiàn)異常時予以用戶必要的狀態(tài)提示，并告知解決方案，使其有路可退。
要杜絕異常狀態(tài)下，用戶莫名其妙又無處可去，停滯在某一個頁面的情況。上文中所提到的模態(tài)對話框和結(jié)果頁面都可作為異常狀態(tài)的提醒方式。除此之外，在表單頁面中尤其是表單項較多的頁面中，還應(yīng)明確指出出錯項目，以便用戶修改。西安做微信小程序基礎(chǔ)知識大全
四、便捷優(yōu)雅
從PC時代的物理鍵盤鼠標(biāo)到移動端時代手指，雖然輸入設(shè)備極大精簡，但是手指操作的準(zhǔn)確性卻大大不如鍵盤鼠標(biāo)精確。為了適應(yīng)這個變化，需要開發(fā)者在設(shè)計過程中充分利用手機特性，讓用戶便捷優(yōu)雅的操控界面。
1.減少輸入
由于手機鍵盤區(qū)域小且密集，輸入困難的同時還易引起輸入錯誤，因此在設(shè)計小程序頁面時因盡量減少用戶輸入，利用現(xiàn)有接口或其他一些易于操作的選擇控件來改善用戶輸入的體驗。
2.避免誤操作
因為在手機上我們通過手指觸摸屏幕來操控界面，手指的點擊精確度遠(yuǎn)不如鼠標(biāo)，因此在設(shè)計頁面上需點擊的控件時，需要充分考慮到其熱區(qū)面積，避免由于可點擊區(qū)域過小或過于密集而造成誤操作。當(dāng)簡單的將原本在電腦屏幕上使用的界面不做任何適配直接移植到手機上時，往往就容易出現(xiàn)這樣的問題。由于手機屏幕分辨率各不相同，因此最適宜點擊像素尺寸也不完全一致，但換算成物理尺寸后大致是在7mm-9mm之間。在微信提供的標(biāo)準(zhǔn)組件庫中，各種控件元素均已考慮到了頁面點擊效果以及不同屏幕的適配，因此再次推薦使用或模仿標(biāo)準(zhǔn)控件尺寸進行設(shè)計。
3.利用接口提升性能
微信設(shè)計中心已推出了一套網(wǎng)頁標(biāo)準(zhǔn)控件庫，包括 sketch設(shè)計控件庫 和 Photoshop設(shè)計控件庫，后續(xù)還將完善小程序組件，這些控件都已充分考慮了移動端頁面的特點，能夠保證其在移動端頁面上的可用性和操作性能； 同時微信開發(fā)團隊也在不斷完善和擴充微信小程序接口，并提供微信公共庫，利用這些資源不但能夠為用戶提供更加快捷的服務(wù)，而且對頁面性能的提高有極大作用，無形之中提升了用戶體驗。西安做微信小程序基礎(chǔ)知識大全
五、統(tǒng)一穩(wěn)定
除了以上所提到的種種原則，建議接入微信的小程序還應(yīng)該時刻注意不同頁面間的統(tǒng)一性和延續(xù)性，在不同的頁面盡量使用一致的控件和交互方式。
統(tǒng)一的頁面體驗和有延續(xù)性的界面元素都將幫助用最少的學(xué)習(xí)成本達成使用目標(biāo)，減輕頁面跳動所造成的不適感。正因如此，小程序可根據(jù)需要使用微信提供的標(biāo)準(zhǔn)控件，以達到統(tǒng)一穩(wěn)定的目的。
六、視覺規(guī)范
1.字體規(guī)范
微信內(nèi)字體的使用與所運行的系統(tǒng)字體保持一致，常用字號為20, 18, 17, 16,14 13, 11(pt)，使用場景具體如下：
字體顏色：
主內(nèi)容 Black 黑色，次要內(nèi)容 Grey 灰色；時間戳與表單缺省值 Light 灰色；大段的說明內(nèi)容而且屬于主要內(nèi)容用 Semi 黑。
藍(lán)色為鏈接用色，綠色為完成字樣色，紅色為出錯用色 Press 與 Disable 狀態(tài)分別降低透明度為20%與10%。
2.列表視覺規(guī)范：
3.表單輸入視覺規(guī)范：
4.按鈕使用原則：
5.圖標(biāo)使用原則：
開發(fā)
一、框架
小程序開發(fā)框架的目標(biāo)是通過盡可能簡單、高效的方式讓開發(fā)者可以在微信中開發(fā)具有原生 APP 體驗的服務(wù)。
框架提供了自己的視圖層描述語言 WXML 和 WXSS，以及基于 JavaScript 的邏輯層框架，并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng)，可以讓開發(fā)者可以方便的聚焦于數(shù)據(jù)與邏輯上。
二、基礎(chǔ)組件
框架為開發(fā)者提供了一系列基礎(chǔ)組件，開發(fā)者可以通過組合這些基礎(chǔ)組件進行快速開發(fā)。
三、API
框架提供豐富的微信原生API，可以方便的調(diào)起微信提供的能力，如獲取用戶信息，本地存儲，支付功能等。
四、簡易教程
1.獲取微信小程序的 AppID
登錄微信公眾平臺，就可以在網(wǎng)站的“設(shè)置”-“開發(fā)者設(shè)置”中，查看到微信小程序的 AppID 了，注意不可直接使用服務(wù)號或訂閱號的 AppID 。
注意：如果要以非管理員微信號在手機上體驗該小程序，那么我們還需要操作“綁定開發(fā)者”。即在“用戶身份”-“開發(fā)者”模塊，綁定上需要體驗該小程序的微信號。本教程默認(rèn)注冊帳號、體驗都是使用管理員微信號。
2.創(chuàng)建項目
我們需要通過開發(fā)者工具，來完成小程序創(chuàng)建和代碼編輯。
開發(fā)者工具安裝完成后，打開并使用微信掃碼登錄。選擇創(chuàng)建“項目”，填入上文獲取到的 AppID ，設(shè)置一個本地項目的名稱（非小程序名稱），比如“我的第一個項目”，并選擇一個本地的文件夾作為代碼存儲的目錄，點擊“新建項目”就可以了。
為方便初學(xué)者了解微信小程序的基本代碼結(jié)構(gòu)，在創(chuàng)建過程中，如果選擇的本地文件夾是個空文件夾，開發(fā)者工具會提示，是否需要創(chuàng)建一個 quick start 項目。選擇“是”，開發(fā)者工具會幫助我們在開發(fā)目錄里生成一個簡單的 demo。
項目創(chuàng)建成功后，我們就可以點擊該項目，進入并看到完整的開發(fā)者工具界面，點擊左側(cè)導(dǎo)航，在“編輯”里可以查看和編輯我們的代碼，在“調(diào)試”里可以測試代碼并模擬小程序在微信客戶端效果，在“項目”里可以發(fā)送到手機里預(yù)覽實際效果。
3.編寫代碼
創(chuàng)建小程序?qū)嵗?/P>
點擊開發(fā)者工具左側(cè)導(dǎo)航的“編輯”，我們可以看到這個項目，已經(jīng)初始化并包含了一些簡單的代碼文件。最關(guān)鍵也是必不可少的，是 app.js、app.json、app.wxss 這三個。其中，.js后綴的是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件。微信小程序會讀取這些文件，并生成小程序?qū)嵗Ｎ靼沧鑫⑿判〕绦蚧A(chǔ)知識大全
下面我們簡單了解這三個文件的功能，方便修改以及從頭開發(fā)自己的微信小程序。
app.js是小程序的腳本代碼。我們可以在這個文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量。調(diào)用框架提供的豐富的 API，如本例的同步存儲及同步讀取本地數(shù)據(jù)。
//app.jsApp({
onLaunch: function () { //調(diào)用API從本地緩存中獲取數(shù)據(jù)
var logs = wx.getStorageSync(‘logs’) || []
logs.unshift(Date.now())
wx.setStorageSync(‘logs’, logs)
},
getUserInfo:function(cb){ var that = this; if(this.globalData.userInfo){ typeof cb == “function” && cb(this.globalData.userInfo)
}else{ //調(diào)用登錄接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo; typeof cb == “function” && cb(that.globalData.userInfo)
}
})
}
});
}
},
globalData:{
userInfo:null
}
})
app.json 是對整個小程序的全局配置。我們可以在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題。注意該文件不可添加任何注釋。
{ “pages”:[ “pages/index/index”, “pages/logs/logs”
], “window”:{ “backgroundTextStyle”:”light”, “navigationBarBackgroundColor”: “#fff”, “navigationBarTitleText”: “WeChat”, “navigationBarTextStyle”:”black”
}
}
app.wxss 是整個小程序的公共樣式表。
/**app.wxss**/.container { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 200rpx 0; box-sizing: border-box;
}
創(chuàng)建頁面
在這個教程里，我們有兩個頁面，index 頁面和 logs 頁面，即歡迎頁和小程序啟動日志的展示頁，他們都在 pages 目錄下。微信小程序中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中，且 pages 中的第一個頁面是小程序的首頁。
每一個小程序頁面是由同路徑下同名的四個不同后綴文件的組成，如：index.js、index.wxml、index.wxss、index.json。.js后綴的文件是腳本文件，.json后綴的文件是配置文件，.wxss后綴的是樣式表文件，.wxml后綴的文件是頁面結(jié)構(gòu)文件。
index.wxml 是頁面的結(jié)構(gòu)文件：
<!–index.wxml–><view class=”container”>
<view bindtap=”bindViewTap” class=”userinfo”>
<image class=”userinfo-avatar” src=”{{userInfo.avatarUrl}}” background-size=”cover”></image>
<text class=”userinfo-nickname”>{{userInfo.nickName}}</text>
</view>
<view class=”usermotto”>
<text class=”user-motto”>{{motto}}</text>
</view></view>
本例中使用了<view/>、<image/>、<text/>來搭建頁面結(jié)構(gòu)，綁定數(shù)據(jù)和交互處理函數(shù)。
index.js 是頁面的腳本文件，在這個文件中我們可以監(jiān)聽并處理頁面的生命周期函數(shù)、獲取小程序?qū)嵗暶鞑⑻幚頂?shù)據(jù)，響應(yīng)頁面交互事件等。
//index.js//獲取應(yīng)用實例var app = getApp()
Page({
data: {
motto: ‘Hello World’,
userInfo: {}
}, //事件處理函數(shù)
bindViewTap: function() {
wx.navigateTo({
url: ‘../logs/logs’
})
},
onLoad: function () { console.log(‘onLoad’) var that = this
//調(diào)用應(yīng)用實例的方法獲取全局?jǐn)?shù)據(jù)
app.getUserInfo(function(userInfo){ //更新數(shù)據(jù)
that.setData({
userInfo:userInfo
})
})
}
})
index.wxss 是頁面的樣式表：
/**index.wxss**/.userinfo { display: flex; flex-direction: column; align-items: center;
}.userinfo-avatar { width: 128rpx; height: 128rpx; margin: 20rpx; border-radius: 50%;
}.userinfo-nickname { color: #aaa;
}.usermotto { margin-top: 200px;
}
頁面的樣式表是非必要的。當(dāng)有頁面樣式表時，頁面的樣式表中的樣式規(guī)則會層疊覆蓋 app.wxss 中的樣式規(guī)則。如果不指定頁面的樣式表，也可以在頁面的結(jié)構(gòu)文件中直接使用 app.wxss 中指定的樣式規(guī)則。
index.json 是頁面的配置文件：
頁面的配置文件是非必要的。當(dāng)有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認(rèn)配置。
logs 的頁面結(jié)構(gòu)：
<!–logs.wxml–><view class=”container log-list”>
<block wx:for=”{{logs}}” wx:for-item=”log”>
<text class=”log-item”>{{index + 1}}. {{log}}</text>
</block></view>
logs 頁面使用 <block/> 控制標(biāo)簽來組織代碼，在 <block/> 上使用 wx:for 綁定 logs 數(shù)據(jù)，并將 logs 數(shù)據(jù)循環(huán)展開節(jié)點。
//logs.jsvar util = require(‘../../utils/util.js’)
Page({
data: {
logs: []
},
onLoad: function () { this.setData({
logs: (wx.getStorageSync(‘logs’) || []).map(function (log) { return util.formatTime(new Date(log))
})
})
}
})
4.手機預(yù)覽
開發(fā)者工具左側(cè)菜單欄選擇”項目”，點擊”預(yù)覽”，掃碼后即可在微信客戶端中體驗。
運營
具體運營規(guī)范：
使用微信小程序平臺的服務(wù)，你必須閱讀并遵守 《微信小程序平臺服務(wù)條款》，以及騰訊為此制定的專項規(guī)則等。
能力
小程序七大能力解讀：
- 線下掃碼：用戶可以在小程序中使用掃一掃。
- 對話分享：用戶可以分享小程序或其中的任何一個頁面給好友或群聊。
- 消息通知：商戶可以發(fā)送模板消息給接受過服務(wù)的用戶，用戶可以在小程序內(nèi)聯(lián)系客服，支持文字和圖片。
- 小程序切換：用戶可以在使用小程序的過程中快速返回聊天。
- 歷史列表：用戶使用過的小程序會被放入列表，方便下次使用。
- 公眾號關(guān)聯(lián)：微信小程序可與公眾號進行關(guān)聯(lián)。
- 搜索查找：用戶可直接根據(jù)名稱或品牌搜索小程序。
問答
1.小程序的入口在哪里？
小程序在微信里是沒有入口的，微信更多的是希望小程序的啟動來自于掃二維碼。
2.有沒有應(yīng)用商店可以下載小程序？
小程序不存在下載過程，因此沒有小程序應(yīng)用商店。
3.小程序能不能推送消息？
小程序不能推送消息，但是會提供比較有限的服務(wù)觸達能力。
4.小程序能不能分享到朋友圈？
小程序不能分享到朋友圈，但是可以分享到聊天里面，可以分享到群里面。
5.小程序和公眾號之間是怎么樣的一種關(guān)系？
你在公眾號里面可以看到這個公眾號同一個企業(yè)還做了哪些小程序，或者你在一個小程序里面你也可以看到，做這個小程序的企業(yè)還做了哪些公眾號，他們是可以互相跳的。西安做微信小程序基礎(chǔ)知識大全 |
您現(xiàn)在的位置： 
