一．微信小程序開發文檔介紹
微信小程序為開發者提供表單、導航、地圖、媒體、位置等開發組件，不僅有這些組件，微信官方還開放了登錄和微信支付接口，供開發者使用。
二、微信小程序開發文檔詳情
1.微信小程序組件
視圖容器：視圖、滾動視圖、輪播
基本內容：圖標、文本、進度條
表單組件：按鈕、表單等
導航：頁面鏈接
媒體組件：音頻、圖片、視頻
地圖
畫布
開放能力：banner廣告、公眾號關注組件、微信開發數據、承載頁面容器
2.微信小程序API
界面：導航欄、菜單、動畫、自定義組件等
網絡：上傳下載能力
數據：數據緩存能力
開發接口：登錄、用戶信息、小程序跳轉、數據分析、微信支付、授權。收貨地址等
位置：獲取位置、查看位置
設備：WiFi、藍牙、NFC等
]]>1、什么微信小程序開發視圖容器view組件
View組件是微信小程序中比較常見組件，主要是用來分區分塊，為了讓大家更好的理解，下面就和大家演示一下：
在app.json中注冊一個view頁面，如圖所示：
二、微信小程序開發視圖容器view組件屬性
在代碼中，View組件有兩種屬性，分別為display和和flex-direction屬性。Display屬性設置可以設置彈性容器flex.flex-direction屬性設置可以為row屬性，除了row屬性，還可以設置column。
Column如圖所示：
row-reserve，如圖所示：
以上就是對微信小程序開發視圖容器組件view基本介紹，希望對大家有所幫助！
]]>在管理微信小程序后臺時，一般都需要對管理項目的成員以及權限的設置，其中包括開發者成員/開發者權限、體驗者/體驗者權限以及其他成員。
權限? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?說明
開發者權限? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 可使用小程序開發者工具以及開發版小程序進行開發
體驗者權限? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?可使用體驗版小程序
登錄? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 登錄小程序管理后臺，不需要管理員確認
數據分析? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 查看和使用小程序數據分析
開發管理? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 小程序提交審核、發布、回退
開發設置? ? ? ? ? 設置小程序服務器域名、消息推送及掃描普通鏈接二維碼打開小程序
暫停服務設置? ? ? ? ? ? ? ? ? ? ? ? ? ? 暫停小程序線上服務
管理入口：小程序管理后臺-用戶身份-成員管理，如圖所示：
以上就是微信小程序開發怎么設置用戶身份以及用戶權限，希望對大家有所幫助！更多開發知識，可以觀看微信小程序開發文檔匯總。
]]>一、小程序API結構
二、利用小程序API能實現哪些功能
利用小程序API能夠實現網絡請求功能、頂部Banner功能、底部導航功能、數據交互功能、展示功能等功能。下面就和大家詳細的介紹幾個功能。
1.網絡請求功能
通過網絡接口獲取數據需要用到網絡請求，可以利用js實現。微信提供了網絡方面的接口，可以通過API-網絡-網絡請求。通過這個接口可以進行網絡數據請求。
2.頂部Banner功能
頂部Banner功能可以在swiper組件中實現，可以通過組件-視圖容器-swiper找到文檔，然后復制到官方。
3.底部導航功能
底部導航功能可以通過tabBar屬性得以實現。
4.展示功能
展示功能里面包含圖片、文字，展示功能里面我們需要用到視圖容器view、媒體組件Image、基本內容組件text.
5.數據交互功能
有了界面，有了數據。那么如何將數據顯示到界面，以及如何將界面數據提供給邏輯層，這時我們可以找到數據綁定部分的文檔。
{{ message }}?Page({?data:?{?message:\’Hello?MINA!\’ }?})
以上和大家詳細介紹了一下微信小程序API是什么？從小程序API定義到結構再到功能都跟大家說明了一下，想要了解更多的微信小程序開發可以看看微信小程序開發文檔匯總。
]]>微信小程序組件主要包括視圖容器、基礎內容、表單、導航、多媒體、地圖、畫布、開放能力等。下面就和大家分別介紹一下。
視圖容器：
組件名? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 說明
View? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 視圖容器
scro-view? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 可動視圖容器
Swiper? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?滑塊視圖容器
movable-view /movable-area? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 可移動的視圖容器
cover-view? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?覆蓋在原生組件之上的文本視圖
cover-image? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 覆蓋在原生細件之上的圖片視圖
基礎內容：
組件名? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?說明
Icon? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖標
Text? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?文字
Rech-text? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 富文本
Progress? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?進度條
表單：
組件名? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?說明
button? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?按鈕
checkbox? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?多項選擇器
form? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 表單
input? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?輸入框
label? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 標簽
picker? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 列表選擇器
picker-view? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 內嵌列表選擇器
radio? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 單項選擇器
slider? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 滾動選擇器
switch? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?開關選擇器
textarea? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 多行輸入框
導航：
組件名? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?說明
navigator? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?頁面鏈接
functional-page-?navigator? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?跳轉到插件功能頁
多媒體：
組件名? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?說明
audio? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?音頻
image? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖片
video? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 視頻
camera? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 系統相機
live-player? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 實時音視頻錄制
地圖：
組件名? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?說明
map? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 地圖
畫布：
組件名? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?說明
canvas? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 畫布
開放能力：
組件名? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 說明
open-data? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?展示微信開放的數據
web-view? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?承載網頁的容器
ad? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?廣告
official-account? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?關注公眾號
以上內容詳細的介紹了一下微信小程序組件以及說明，大家不清楚的可以多看一遍，希望以上的內容對大家學習有所幫助，對微信小程序開發比較感興趣的，可以多看看微信小程序開發文檔匯總。
]]>第一步：微信客戶端在打開微信小程序之前，會將整的微信小程序的代碼包下載到本地。你可以通過app.json的page字段看你當前小程序所有頁面路徑。
{
“pages”: [“pages/index/index”, “pages/logs/logs”]
}
第二步：pages字段里面的第一個頁面就是微信小程序的首頁。
第三步：然后通過微信客戶端把首頁的代碼裝載進去，通過微信小程序底層，就可以突出這個首頁。
第四步：微信小程序啟動之后，在app.js定義的?App?實例的?onLaunch?回調會被執行:
App({
onLaunch() {
// 小程序啟動之后 觸發
}
})
以上就是微信小程序啟動界面的做法，希望以上的內容對大家有所幫助！想要了解更多可以看看微信小程序開發文檔匯總。
]]>1.微信小程序開發JS 交互邏輯是什么
微信小程序開發JS 交互邏輯是通過編寫js腳本文件與用戶進行交互，來吸引用戶點擊，獲取用戶位置等。Js交互邏輯還可以調用小程序API.可以方便調用微信小程序能力。比如獲取用戶信息，本地存儲以及微信支付等功能。
微信小程序開發js交互邏輯操作流程
①編寫js腳本文件
<view>{{ msg }}</view><button bindtap=”clickMe”>點擊我</button>
②點擊button，msg就會顯示”Hello World”.我們可以在button上聲明屬性：bindtap。在js腳本文件里聲明clickMe 響應操作。
Page({
clickMe() {
this.setData({msg: ‘Hello World’})
}
})
③js交互邏輯可以調用小程序API功能
④可以在pages/index/index.js中，調用wx.getUserInfo來獲取用戶的頭像與昵稱。最后可以通過setData來獲取信息顯示到界面上。
以上就是對微信小程序開發JS 交互邏輯是什么做了一個簡單的介紹，從概念到操作流程做了一個簡單的概述，想要了解更多了微信小程序開發，不妨看看微信小程序開發文檔匯總。
]]>Wxss樣式文件是一種樣式語言，主要是用來描述WXMl的組件樣式。它的用途是用來觀察wxml模板組件怎么顯示的。為了廣大開發者適應微信小程序開發，Wxss樣式文件不僅具有大部分css特性而且還對其特性作出一些擴展和修改。
擴展的地方：增加了尺寸單位和提供了全局樣式和局部樣式。
1.增加了尺寸單位
Wxss樣式文件新增了底層rpx尺寸單位，主要目的是在于減少開發者換算的工作難度，直接交給小程序底層來換算就可以了。
Rpx尺寸單位：可以根據屏幕寬度進行自適應，一般規定屏幕寬度為750rpx。
舉一個例子：大家都用過 iPhone6手機，屏幕寬度為375px,一共有750個rpx。
那么1rpx=0.5px
| 設備 | rpx換算px (屏幕寬度/750) | px換算rpx (750/屏幕寬度) |
| iPhone5 | 1rpx = 0.42px | 1px = 2.34rpx |
| iPhone6 | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6 Plus | 1rpx = 0.552px | 1px = 1.81rpx |
2.提供了全部樣式和局部樣式
我們寫代碼的時候，可以寫app.wxss作為全局樣式，目的是可以了解到當前小程序的所有頁面。可以寫page.wxss作為局部樣式，但局部樣式只對當面頁面生效。
修改的地方：Wxss樣式文件只支持部分css選擇器。
以上詳細的介紹了一下什么是微信小程序開發Wxss樣式文件，相信大家通過以上的內容應該對wxss樣式有一個初步的認知，真正想要了解微信小程序開發，這些知識是遠遠不足的，想要了解更多的微信小程序開發知識，可以看看微信小程序開發文檔匯總。這樣對微信小程序開發有一個深入了解。
]]>說到微信小程序開發Wxml模板文件，我們不得不說一下網頁編程，網頁編程一般用使用到Html+Css+Js等語言。Html是指該頁面的結構，CSS是用來描述頁面的樣子。而JS是交互的，主要是處理頁面和用戶之間的交互。而在微信小程序中，微信小程序開發Wxml模板文件類似于Html的角色。打開 pages/index/index.wxml，你會看到以下的內容:
<view class=”container”>
??<view class=”userinfo”>
????<button wx:if=”{{!hasUserInfo && canIUse}}”>獲取頭像昵稱</button>
????<block wx:else>
??????<image src=”{{userInfo.avatarUrl}}”?background-size=”cover”></image>
??????<text class=”userinfo-nickname”>{{userInfo.nickName}}</text>
????</block>
??</view>
??<view class=”usermotto”><text class=”user-motto”>{{motto}}</text></view></view>
微信小程序開發Wxml模板文件和html類似的地方在于標簽和屬性相似，但還有很多地方不同。
1. 標簽名字不同
Html標簽名字一般使用到的是div，p,spon.而小程序wxml模板文件標簽名字用的是view,button,text等。
2. 開發效率
開發者在使用html的時候，可以根據這些標簽組成不同的組件使用。需要自己組件開發，開發效率就低些。
wxml模板文件標簽就是小程序給開發者包裝好的基本能力，可以使用地圖、視頻等組件能力，大大提高了開發的效率。
3.多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達式
Wxml怎么寫
<text>{{msg}}</text>
JS 只需要管理狀態即可:
this.setData({ msg: “Hello World” })
以上和大家詳細了一下微信小程序開發Wxml模板文件，主要和大家說了一些html和wxml模板文件有相似之處還有不同的地方，用對比的方式跟大家說明了小程序Wxml模板文件。希望以上的內容對大家有所幫助！想要了解更多的微信小程序開發可以看看微信小程序開發文檔匯總。
]]>Josn配置文件有三種，分別為：app.json配置文件、Project.config.json配置文件和Page.json配置文件。
app.json配置文件是小程序根目標下的一種文件，主要用于對微信小程序進行一個全局配置。app.Json配置文件決定頁面文件的路徑、窗口、還可以設置網絡超時時間和多tab等。
app.Json配置示例
{
“pages”: [“pages/index/index”, “pages/logs/index”],
“window”: {
“navigationBarTitleText”: “Demo”
},
“tabBar”: {
“list”: [
{
“pagePath”: “pages/index/index”,
“text”: “首頁”
},
{
“pagePath”: “pages/logs/logs”,
“text”: “日志”
}
]
},
“networkTimeout”: {
“request”: 10000,
“downloadFile”: 10000
},
“debug”: true,
“navigateToMiniProgramAppIdList”: [“wxe5f52902cf4de896”]
}
Pages字段：是用來描述當前小程序的所有頁面路徑的，是為了讓微信客戶端知道你的小程序頁面定義放在哪個目錄里。
Windows字段：表示的是小程序所有頁面的頂部背景顏色。文字和顏色定義都在這里。
1
2
3
4
5
6
7
8
9
10
11
12{
“pages”:[
“pages/index/index”,
“pages/logs/logs”
],
“window”:{
“backgroundTextStyle”:”light”,
“navigationBarBackgroundColor”: “#fff”,
“navigationBarTitleText”: “WeChat”,
“navigationBarTextStyle”:”black”
}
}
Project.config.json配置主要是針對各人喜歡做的一些個性化配置，比如界面顏色等。小程序開發者工具在每個項目里的根目錄下都會生成一個Project.config.json配置，你在工具上使用過的配置都會寫入到這個文件里面。
Page.json配置是指定義全局，表示pages/logs目標下的logs.json這類和小程序頁面相關的配置。只能定義某一個頁面。
以上就和大家詳細了一下微信小程序開發json配置文件是什么，希望對大家有所幫助！更多的微信小程序開發知識，可以看看微信小程序開發文檔匯總。
]]>