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