一．微信小程序開發(fā)文檔介紹

微信小程序?yàn)殚_發(fā)者提供表單、導(dǎo)航、地圖、媒體、位置等開發(fā)組件，不僅有這些組件，微信官方還開放了登錄和微信支付接口，供開發(fā)者使用。

二、微信小程序開發(fā)文檔詳情

1.微信小程序組件

視圖容器：視圖、滾動(dòng)視圖、輪播

基本內(nèi)容：圖標(biāo)、文本、進(jìn)度條

表單組件：按鈕、表單等

導(dǎo)航：頁(yè)面鏈接

媒體組件：音頻、圖片、視頻

地圖

畫布

開放能力：banner廣告、公眾號(hào)關(guān)注組件、微信開發(fā)數(shù)據(jù)、承載頁(yè)面容器

2.微信小程序API

界面：導(dǎo)航欄、菜單、動(dòng)畫、自定義組件等

網(wǎng)絡(luò)：上傳下載能力

數(shù)據(jù)：數(shù)據(jù)緩存能力

開發(fā)接口：登錄、用戶信息、小程序跳轉(zhuǎn)、數(shù)據(jù)分析、微信支付、授權(quán)。收貨地址等

位置：獲取位置、查看位置

設(shè)備：WiFi、藍(lán)牙、NFC等

微信小程序開發(fā)文檔最先出現(xiàn)在微信小程序觀察網(wǎng)。

1、什么微信小程序開發(fā)視圖容器view組件

View組件是微信小程序中比較常見組件，主要是用來分區(qū)分塊，為了讓大家更好的理解，下面就和大家演示一下：

在app.json中注冊(cè)一個(gè)view頁(yè)面，如圖所示：

二、微信小程序開發(fā)視圖容器view組件屬性

在代碼中，View組件有兩種屬性，分別為display和和flex-direction屬性。Display屬性設(shè)置可以設(shè)置彈性容器flex.flex-direction屬性設(shè)置可以為row屬性，除了row屬性，還可以設(shè)置column。

Column如圖所示：

row-reserve，如圖所示：

以上就是對(duì)微信小程序開發(fā)視圖容器組件view基本介紹，希望對(duì)大家有所幫助！

微信小程序開發(fā)視圖容器組件view最先出現(xiàn)在微信小程序觀察網(wǎng)。

在管理微信小程序后臺(tái)時(shí)，一般都需要對(duì)管理項(xiàng)目的成員以及權(quán)限的設(shè)置，其中包括開發(fā)者成員/開發(fā)者權(quán)限、體驗(yàn)者/體驗(yàn)者權(quán)限以及其他成員。

權(quán)限? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?說明

開發(fā)者權(quán)限? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 可使用小程序開發(fā)者工具以及開發(fā)版小程序進(jìn)行開發(fā)

體驗(yàn)者權(quán)限? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?可使用體驗(yàn)版小程序

登錄? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 登錄小程序管理后臺(tái)，不需要管理員確認(rèn)

數(shù)據(jù)分析? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 查看和使用小程序數(shù)據(jù)分析

開發(fā)管理? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 小程序提交審核、發(fā)布、回退

開發(fā)設(shè)置? ? ? ? ? 設(shè)置小程序服務(wù)器域名、消息推送及掃描普通鏈接二維碼打開小程序

暫停服務(wù)設(shè)置? ? ? ? ? ? ? ? ? ? ? ? ? ? 暫停小程序線上服務(wù)

管理入口：小程序管理后臺(tái)-用戶身份-成員管理，如圖所示：

以上就是微信小程序開發(fā)怎么設(shè)置用戶身份以及用戶權(quán)限，希望對(duì)大家有所幫助！更多開發(fā)知識(shí)，可以觀看微信小程序開發(fā)文檔匯總。

微信小程序開發(fā)怎么設(shè)置用戶身份最先出現(xiàn)在微信小程序觀察網(wǎng)。

一、小程序API結(jié)構(gòu)

二、利用小程序API能實(shí)現(xiàn)哪些功能

利用小程序API能夠?qū)崿F(xiàn)網(wǎng)絡(luò)請(qǐng)求功能、頂部Banner功能、底部導(dǎo)航功能、數(shù)據(jù)交互功能、展示功能等功能。下面就和大家詳細(xì)的介紹幾個(gè)功能。

1.網(wǎng)絡(luò)請(qǐng)求功能

通過網(wǎng)絡(luò)接口獲取數(shù)據(jù)需要用到網(wǎng)絡(luò)請(qǐng)求，可以利用js實(shí)現(xiàn)。微信提供了網(wǎng)絡(luò)方面的接口，可以通過API-網(wǎng)絡(luò)-網(wǎng)絡(luò)請(qǐng)求。通過這個(gè)接口可以進(jìn)行網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求。

2.頂部Banner功能

頂部Banner功能可以在swiper組件中實(shí)現(xiàn)，可以通過組件-視圖容器-swiper找到文檔，然后復(fù)制到官方。

3.底部導(dǎo)航功能

底部導(dǎo)航功能可以通過tabBar屬性得以實(shí)現(xiàn)。

4.展示功能

展示功能里面包含圖片、文字，展示功能里面我們需要用到視圖容器view、媒體組件Image、基本內(nèi)容組件text.

5.數(shù)據(jù)交互功能

有了界面，有了數(shù)據(jù)。那么如何將數(shù)據(jù)顯示到界面，以及如何將界面數(shù)據(jù)提供給邏輯層，這時(shí)我們可以找到數(shù)據(jù)綁定部分的文檔。

{{ message }}?Page({?data:?{?message:\’Hello?MINA!\’ }?})

以上和大家詳細(xì)介紹了一下微信小程序API是什么？從小程序API定義到結(jié)構(gòu)再到功能都跟大家說明了一下，想要了解更多的微信小程序開發(fā)可以看看微信小程序開發(fā)文檔匯總。

微信小程序API是什么最先出現(xiàn)在微信小程序觀察網(wǎng)。

微信小程序組件主要包括視圖容器、基礎(chǔ)內(nèi)容、表單、導(dǎo)航、多媒體、地圖、畫布、開放能力等。下面就和大家分別介紹一下。

視圖容器：

組件名? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 說明

View? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 視圖容器

scro-view? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 可動(dòng)視圖容器

Swiper? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?滑塊視圖容器

movable-view /movable-area? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 可移動(dòng)的視圖容器

cover-view? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?覆蓋在原生組件之上的文本視圖

cover-image? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 覆蓋在原生細(xì)件之上的圖片視圖

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

組件名? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?說明

Icon? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?圖標(biāo)

Text? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?文字

Rech-text? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 富文本

Progress? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?進(jìn)度條

表單：

組件名? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?說明

button? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?按鈕

checkbox? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?多項(xiàng)選擇器

form? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 表單

input? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?輸入框

label? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 標(biāo)簽

picker? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 列表選擇器

picker-view? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 內(nèi)嵌列表選擇器

radio? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 單項(xiàng)選擇器

slider? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 滾動(dòng)選擇器

switch? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?開關(guān)選擇器

textarea? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 多行輸入框

導(dǎo)航：

組件名? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?說明

navigator? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?頁(yè)面鏈接

functional-page-?navigator? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?跳轉(zhuǎn)到插件功能頁(yè)

多媒體：

組件名? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?說明

audio? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?音頻

image? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 圖片

video? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 視頻

camera? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 系統(tǒng)相機(jī)

live-player? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 實(shí)時(shí)音視頻錄制

地圖：

組件名? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?說明

map? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 地圖

畫布：

組件名? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?說明

canvas? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 畫布

開放能力：

組件名? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 說明

open-data? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?展示微信開放的數(shù)據(jù)

web-view? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?承載網(wǎng)頁(yè)的容器

ad? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?廣告

official-account? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?關(guān)注公眾號(hào)

以上內(nèi)容詳細(xì)的介紹了一下微信小程序組件以及說明，大家不清楚的可以多看一遍，希望以上的內(nèi)容對(duì)大家學(xué)習(xí)有所幫助，對(duì)微信小程序開發(fā)比較感興趣的，可以多看看微信小程序開發(fā)文檔匯總。

微信小程序組件是什么最先出現(xiàn)在微信小程序觀察網(wǎng)。

第一步：微信客戶端在打開微信小程序之前，會(huì)將整的微信小程序的代碼包下載到本地。你可以通過app.json的page字段看你當(dāng)前小程序所有頁(yè)面路徑。

{

“pages”: [“pages/index/index”, “pages/logs/logs”]

}

第二步：pages字段里面的第一個(gè)頁(yè)面就是微信小程序的首頁(yè)。

第三步：然后通過微信客戶端把首頁(yè)的代碼裝載進(jìn)去，通過微信小程序底層，就可以突出這個(gè)首頁(yè)。

第四步：微信小程序啟動(dòng)之后，在app.js定義的?App?實(shí)例的?onLaunch?回調(diào)會(huì)被執(zhí)行:

App({

onLaunch() {

// 小程序啟動(dòng)之后 觸發(fā)

}

})

以上就是微信小程序啟動(dòng)界面的做法，希望以上的內(nèi)容對(duì)大家有所幫助！想要了解更多可以看看微信小程序開發(fā)文檔匯總。

微信小程序啟動(dòng)界面怎么做最先出現(xiàn)在微信小程序觀察網(wǎng)。

1.微信小程序開發(fā)JS 交互邏輯是什么

微信小程序開發(fā)JS 交互邏輯是通過編寫js腳本文件與用戶進(jìn)行交互，來吸引用戶點(diǎn)擊，獲取用戶位置等。Js交互邏輯還可以調(diào)用小程序API.可以方便調(diào)用微信小程序能力。比如獲取用戶信息，本地存儲(chǔ)以及微信支付等功能。

微信小程序開發(fā)js交互邏輯操作流程

①編寫js腳本文件

<view>{{ msg }}</view><button bindtap=”clickMe”>點(diǎn)擊我</button>

②點(diǎn)擊button，msg就會(huì)顯示”Hello World”.我們可以在button上聲明屬性：bindtap。在js腳本文件里聲明clickMe 響應(yīng)操作。

Page({

clickMe() {

this.setData({msg: ‘Hello World’})

}

})

③js交互邏輯可以調(diào)用小程序API功能

④可以在pages/index/index.js中，調(diào)用wx.getUserInfo來獲取用戶的頭像與昵稱。最后可以通過setData來獲取信息顯示到界面上。

以上就是對(duì)微信小程序開發(fā)JS 交互邏輯是什么做了一個(gè)簡(jiǎn)單的介紹，從概念到操作流程做了一個(gè)簡(jiǎn)單的概述，想要了解更多了微信小程序開發(fā)，不妨看看微信小程序開發(fā)文檔匯總。

微信小程序開發(fā)JS 交互邏輯是什么最先出現(xiàn)在微信小程序觀察網(wǎng)。

Wxss樣式文件是一種樣式語言，主要是用來描述WXMl的組件樣式。它的用途是用來觀察wxml模板組件怎么顯示的。為了廣大開發(fā)者適應(yīng)微信小程序開發(fā)，Wxss樣式文件不僅具有大部分css特性而且還對(duì)其特性作出一些擴(kuò)展和修改。

擴(kuò)展的地方：增加了尺寸單位和提供了全局樣式和局部樣式。

1.增加了尺寸單位

Wxss樣式文件新增了底層rpx尺寸單位，主要目的是在于減少開發(fā)者換算的工作難度，直接交給小程序底層來?yè)Q算就可以了。

Rpx尺寸單位：可以根據(jù)屏幕寬度進(jìn)行自適應(yīng)，一般規(guī)定屏幕寬度為750rpx。

舉一個(gè)例子：大家都用過 iPhone6手機(jī)，屏幕寬度為375px,一共有750個(gè)rpx。

那么1rpx=0.5px

2.提供了全部樣式和局部樣式

我們寫代碼的時(shí)候，可以寫app.wxss作為全局樣式，目的是可以了解到當(dāng)前小程序的所有頁(yè)面。可以寫page.wxss作為局部樣式，但局部樣式只對(duì)當(dāng)面頁(yè)面生效。

修改的地方：Wxss樣式文件只支持部分css選擇器。

以上詳細(xì)的介紹了一下什么是微信小程序開發(fā)Wxss樣式文件，相信大家通過以上的內(nèi)容應(yīng)該對(duì)wxss樣式有一個(gè)初步的認(rèn)知，真正想要了解微信小程序開發(fā)，這些知識(shí)是遠(yuǎn)遠(yuǎn)不足的，想要了解更多的微信小程序開發(fā)知識(shí)，可以看看微信小程序開發(fā)文檔匯總。這樣對(duì)微信小程序開發(fā)有一個(gè)深入了解。

微信小程序開發(fā)Wxss樣式文件是什么最先出現(xiàn)在微信小程序觀察網(wǎng)。

說到微信小程序開發(fā)Wxml模板文件，我們不得不說一下網(wǎng)頁(yè)編程，網(wǎng)頁(yè)編程一般用使用到Html+Css+Js等語言。Html是指該頁(yè)面的結(jié)構(gòu)，CSS是用來描述頁(yè)面的樣子。而JS是交互的，主要是處理頁(yè)面和用戶之間的交互。而在微信小程序中，微信小程序開發(fā)Wxml模板文件類似于Html的角色。打開 pages/index/index.wxml，你會(huì)看到以下的內(nèi)容:

<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>

　　微信小程序開發(fā)Wxml模板文件和html類似的地方在于標(biāo)簽和屬性相似，但還有很多地方不同。

1. 標(biāo)簽名字不同

Html標(biāo)簽名字一般使用到的是div，p,spon.而小程序wxml模板文件標(biāo)簽名字用的是view,button,text等。

2. 開發(fā)效率

開發(fā)者在使用html的時(shí)候，可以根據(jù)這些標(biāo)簽組成不同的組件使用。需要自己組件開發(fā)，開發(fā)效率就低些。

wxml模板文件標(biāo)簽就是小程序給開發(fā)者包裝好的基本能力，可以使用地圖、視頻等組件能力，大大提高了開發(fā)的效率。

3.多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達(dá)式

Wxml怎么寫

<text>{{msg}}</text>

JS 只需要管理狀態(tài)即可:

this.setData({ msg: “Hello World” })

以上和大家詳細(xì)了一下微信小程序開發(fā)Wxml模板文件，主要和大家說了一些html和wxml模板文件有相似之處還有不同的地方，用對(duì)比的方式跟大家說明了小程序Wxml模板文件。希望以上的內(nèi)容對(duì)大家有所幫助！想要了解更多的微信小程序開發(fā)可以看看微信小程序開發(fā)文檔匯總。

微信小程序開發(fā)Wxml模板文件是什么最先出現(xiàn)在微信小程序觀察網(wǎng)。

Josn配置文件有三種，分別為：app.json配置文件、Project.config.json配置文件和Page.json配置文件。

app.json配置文件是小程序根目標(biāo)下的一種文件，主要用于對(duì)微信小程序進(jìn)行一個(gè)全局配置。app.Json配置文件決定頁(yè)面文件的路徑、窗口、還可以設(shè)置網(wǎng)絡(luò)超時(shí)時(shí)間和多tab等。

app.Json配置示例

{

“pages”: [“pages/index/index”, “pages/logs/index”],

“window”: {

“navigationBarTitleText”: “Demo”

},

“tabBar”: {

“list”: [

{

“pagePath”: “pages/index/index”,

“text”: “首頁(yè)”

},

{

“pagePath”: “pages/logs/logs”,

“text”: “日志”

}

]

},

“networkTimeout”: {

“request”: 10000,

“downloadFile”: 10000

},

“debug”: true,

“navigateToMiniProgramAppIdList”: [“wxe5f52902cf4de896”]

}

Pages字段：是用來描述當(dāng)前小程序的所有頁(yè)面路徑的，是為了讓微信客戶端知道你的小程序頁(yè)面定義放在哪個(gè)目錄里。

Windows字段：表示的是小程序所有頁(yè)面的頂部背景顏色。文字和顏色定義都在這里。

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配置主要是針對(duì)各人喜歡做的一些個(gè)性化配置，比如界面顏色等。小程序開發(fā)者工具在每個(gè)項(xiàng)目里的根目錄下都會(huì)生成一個(gè)Project.config.json配置，你在工具上使用過的配置都會(huì)寫入到這個(gè)文件里面。

Page.json配置是指定義全局，表示pages/logs目標(biāo)下的logs.json這類和小程序頁(yè)面相關(guān)的配置。只能定義某一個(gè)頁(yè)面。

以上就和大家詳細(xì)了一下微信小程序開發(fā)json配置文件是什么，希望對(duì)大家有所幫助！更多的微信小程序開發(fā)知識(shí)，可以看看微信小程序開發(fā)文檔匯總。

微信小程序開發(fā)json配置文件是什么最先出現(xiàn)在微信小程序觀察網(wǎng)。