青青操在线视频,男女亚洲天堂精品,亚洲中日韩AV

文章和代碼已經(jīng)歸檔至【Github倉(cāng)庫(kù)：https://github.com/timerring/front-end-tutorial 】或者【AIShareLab】回復(fù) 小程序 也可獲取。

項(xiàng)目結(jié)構(gòu)

了解項(xiàng)目的基本組成結(jié)構(gòu)

[圖片上傳失敗...(image-6dbfd8-1686211469649)]

pages 用來(lái)存放所有小程序的頁(yè)面
utils 用來(lái)存放工具性質(zhì)的模塊（例如：格式化時(shí)間的自定義模塊）
app.js 小程序項(xiàng)目的入口文件
app.json 小程序項(xiàng)目的全局配置文件
app.wxss 小程序項(xiàng)目的全局樣式文件
project.config.json 項(xiàng)目的配置文件
sitemap.json 用來(lái)配置小程序及其頁(yè)面是否允許被微信索引

小程序頁(yè)面的組成部分

小程序官方建議把所有小程序的頁(yè)面，都存放在 pages 目錄中，以單獨(dú)的文件夾存在，如圖所示：

[圖片上傳失敗...(image-459aee-1686211469649)]

其中，每個(gè)頁(yè)面由 4 個(gè)基本文件組成，它們分別是：

.js 文件（頁(yè)面的腳本文件，存放頁(yè)面的數(shù)據(jù)、事件處理函數(shù)等）
.json 文件（當(dāng)前頁(yè)面的配置文件，配置窗口的外觀、表現(xiàn)等）
.wxml 文件（頁(yè)面的模板結(jié)構(gòu)文件）
.wxss 文件（當(dāng)前頁(yè)面的樣式表文件）

json配置文件的作用

json是一種數(shù)據(jù)格式，在實(shí)際開(kāi)發(fā)中，json總是以 配置文件的形式出現(xiàn)。小程序項(xiàng)目中也不例外：通過(guò)不同的.json配置文件，可以對(duì)小程序項(xiàng)目進(jìn)行不同級(jí)別的配置。

小程序項(xiàng)目中有4種json配置文件，分別是：

項(xiàng)目根目錄的app.json配置文件；
項(xiàng)目根目錄中的project.config.json配置文件；
項(xiàng)目根目錄中的sitemap.json配置文件；
每個(gè)頁(yè)面文件夾中的.json配置文件

全局配置文件app.json

app.json是當(dāng)前小程序的全局配置，包括了小程序的所有頁(yè)面路徑、窗口外觀、界面表現(xiàn) 、底部 tab 等。

app.json 中的部分配置，也支持對(duì)單個(gè)頁(yè)面進(jìn)行配置，可以在頁(yè)面對(duì)應(yīng)的 .json 文件來(lái)對(duì)本頁(yè)面的表現(xiàn)進(jìn)行配置。頁(yè)面中配置項(xiàng)在當(dāng)前頁(yè)面會(huì)覆蓋 app.json 中相同的配置項(xiàng)。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light", //加載小圓圈的顏色
    "navigationBarBackgroundColor": "#fff", //導(dǎo)航欄背景顏色
    "navigationBarTitleText": "Weixin", //導(dǎo)航欄的文本內(nèi)容
    "navigationBarTextStyle":"black" //導(dǎo)航欄標(biāo)題顏色，僅支持 black / white
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

這 4 個(gè)配置項(xiàng)的作用：

pages ：用來(lái)記錄當(dāng)前小程序所有頁(yè)面的路徑

未指定 entryPagePath 時(shí)，數(shù)組的第一項(xiàng)代表小程序的初始頁(yè)面（首頁(yè)）。

小程序中新增/減少頁(yè)面，都需要對(duì) pages 數(shù)組進(jìn)行修改。
window ：全局定義小程序所有頁(yè)面的背景色、文字顏色等
style ：全局定義小程序組件所使用的樣式版本
sitemapLocation ：用來(lái)指明 sitemap.json 的位置

project.config.json文件

文件project.config.json是項(xiàng)目配置文件，用來(lái)記錄我們對(duì)小程序開(kāi)發(fā)工具所做的個(gè)性化配置，例如

setting 中保存了編譯相關(guān)的配置
projectname 中保存的是項(xiàng)目名稱
appid 中保存的是小程序的賬號(hào) ID

{
  "description": "項(xiàng)目配置文件",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "setting": {
    "bundle": false,
    "userConfirmedBundleSwitch": false,
    "urlCheck": true,
    "scopeDataCheck": false,
    "coverView": true,
    "es6": true,
    "postcss": true,
    "compileHotReLoad": false,
    "lazyloadPlaceholderEnable": false,
    "preloadBackgroundData": false,
    "minified": true,
    "autoAudits": false,
    "newFeature": false,
    "uglifyFileName": false,
    "uploadWithSourceMap": true,
    "useIsolateContext": true,
    "nodeModules": false,
    "enhance": true,
    "useMultiFrameRuntime": true,
    "useApiHook": true,
    "useApiHostProcess": true,
    "showShadowRootInWxmlPanel": true,
    "packNpmManually": false,
    "enableEngineNative": false,
    "packNpmRelationList": [],
    "minifyWXSS": true,
    "showES6CompileOption": false,
    "minifyWXML": true,
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    },
    "condition": false
  },
  "compileType": "miniprogram",
  "libVersion": "2.19.4",
  "appid": "",
  "projectname": "miniprogram-92",
  "condition": {},
  "editorSetting": {
    "tabIndent": "insertSpaces",
    "tabSize": 2
  }
}

sitemap.json 文件

微信現(xiàn)已開(kāi)放小程序內(nèi)搜索，效果類似于PC 網(wǎng)頁(yè)的 SEO 。sitemap.json 文件用來(lái)配置小程序頁(yè)面是否允許微信索引。

當(dāng)開(kāi)發(fā)者允許微信索引時(shí)，微信會(huì)通過(guò)爬蟲的形式，為小程序的頁(yè)面內(nèi)容建立索引。當(dāng)用戶的搜索關(guān)鍵字和頁(yè)面的索引匹配成功的時(shí)候，小程序的頁(yè)面將可能展示在搜索結(jié)果中。

{
  "desc": "關(guān)于本文件的更多信息，請(qǐng)參考文檔 https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html",
  "rules": [{
  "action": "allow",
  "page": "*"
  }]
}

注意：未顯式指明 "disallow" 的都默認(rèn)被索引

sitemap 的索引提示（終端黃色警告）是默認(rèn)開(kāi)啟的，如需要關(guān)閉 sitemap 的索引提示，可在小程序項(xiàng)目配置文件 project.config.json 的 setting 中配置字段 checkSiteMap 為 false。

頁(yè)面的 .json 配置文件

小程序中的每一個(gè)頁(yè)面，可以使用 .json 文件來(lái) 對(duì)本頁(yè)面的窗口外觀進(jìn)行配置，頁(yè)面中的配置項(xiàng)會(huì)覆蓋 app.json 的 window 中相同的配置項(xiàng)。

新建小程序頁(yè)面

只需要在 app.json -> pages 中新增頁(yè)面的存放路徑，小程序開(kāi)發(fā)者工具即可幫我們自動(dòng)創(chuàng)建對(duì)應(yīng)的頁(yè)面文件。

  "pages":[
    "pages/index/index",
    "pages/list/list",
    "pages/logs/logs"
  ],

修改項(xiàng)目首頁(yè)

只需要調(diào)整 app.json -> pages 數(shù)組中頁(yè)面路徑的前后順序，即可修改項(xiàng)目的首頁(yè)。小程序會(huì)把排在第一位的頁(yè)面，當(dāng)作項(xiàng)目首頁(yè)進(jìn)行渲染。

WXML 模板

什么是 WXML

WXML（WeiXin Markup Language ）是小程序框架設(shè)計(jì)的一套標(biāo)簽語(yǔ)言，用來(lái)構(gòu)建小程序頁(yè)面的結(jié)構(gòu) ，其作用類似于網(wǎng)頁(yè)開(kāi)發(fā)中的 HTML 。

WXML和HTML的區(qū)別

標(biāo)簽名稱不同

HTML(div, span, img, a)

WXML(view, text, image, navigator)
屬性節(jié)點(diǎn)不同

<a href="#"></a>

``<navigator url="pages/home/home"></navigator>`
提供了類似于Vue中的模塊語(yǔ)法

數(shù)據(jù)綁定

列表渲染

條件渲染

WXSS 樣式

WXSS (WeiXin Style Sheets)是一套樣式語(yǔ)言，用于描述 WXML 的組件樣式，類似于網(wǎng)頁(yè)開(kāi)發(fā)中的 CSS 。

WXSS和CSS的區(qū)別

新增了rpx尺寸單位

CSS需要手動(dòng)進(jìn)行像素單位換算，例如rem
WXSS在底層支持新的尺寸單位rpx，在不同大小屏幕小程序會(huì)自動(dòng)進(jìn)行換算

提供了全局的樣式和局部樣式

全局：項(xiàng)目根目錄中的app.wxss
局部：當(dāng)前頁(yè)面的.wxss

WXSS僅支持部分CSS選擇器

.class 和 #id
element
并集選擇器、后代選擇器
::after 和 ::before 等

JS邏輯交互

通過(guò).js 文件來(lái)處理用戶的操作。例如：響應(yīng)用戶的點(diǎn)擊、獲取用戶的位置等等。

小程序中的JS文件分為三大類，分別是:

app.js

是整個(gè)小程序項(xiàng)目的入口文件，通過(guò)調(diào)用App()函數(shù)來(lái)啟動(dòng)整個(gè)小程序

頁(yè)面的.js 文件

是頁(yè)面的入口文件，通過(guò)調(diào)用Page()函數(shù)來(lái)創(chuàng)建并運(yùn)行頁(yè)面

普通的.js 文件

是普通的功能模塊文件，用來(lái)封裝公共的函數(shù)或?qū)傩怨╉?yè)面使用

小程序宿主環(huán)境

宿主環(huán)境就是依賴環(huán)境，小程序的宿主環(huán)境是手機(jī)微信

主要包含四個(gè)內(nèi)容：通信模型，運(yùn)行機(jī)制， 組件， API

通信模型

通信的主體：渲染層 和 邏輯層

小程序中的通信模型分為兩部分:

渲染層和邏輯層之間的通信由微信客戶端進(jìn)行轉(zhuǎn)發(fā)。

邏輯層和第三方服務(wù)器之間的通信由微信客戶端進(jìn)行轉(zhuǎn)發(fā)。

[圖片上傳失敗...(image-a9fb76-1686211469649)]

運(yùn)行機(jī)制

小程序啟動(dòng)的過(guò)程

把小程序的代碼包下載到本地
解析 app.json 全局配置文件
執(zhí)行 app.js 小程序入口文件，調(diào)用 App() 創(chuàng)建小程序?qū)嵗?/li>
渲染小程序首頁(yè)
小程序啟動(dòng)完成

頁(yè)面渲染的過(guò)程

加載解析頁(yè)面的 .json 配置文件
加載頁(yè)面的 .wxml 模板和 .wxss 樣式
執(zhí)行頁(yè)面的 .js 文件，調(diào)用 Page() 創(chuàng)建頁(yè)面實(shí)例
頁(yè)面渲染完成

組件

小程序中組件的分類

小程序中的組件也是由宿主環(huán)境提供的，開(kāi)發(fā)者可以基于組件快速搭建出漂亮的頁(yè)面結(jié)構(gòu)。官方把小程序的組件分為了 9 大類，分別是：

視圖容器
基礎(chǔ)內(nèi)容
表單組件
導(dǎo)航組件
媒體組件
map 地圖組件
canvas 畫布組件
開(kāi)放能力
無(wú)障礙訪問(wèn)

常用的視圖容器類組件

view

普通視圖區(qū)域，類似于HTML中的div，是一個(gè)塊級(jí)元素，常用來(lái)實(shí)現(xiàn)頁(yè)面的布局效果。

實(shí)現(xiàn)如圖的 flex 橫向布局

[圖片上傳失敗...(image-c08ab9-1686211469649)]

scroll-view

可滾動(dòng)的視圖區(qū)域，常用來(lái)實(shí)現(xiàn)滾動(dòng)列表效果。

scroll-y 或 scroll-x屬性：規(guī)定在哪個(gè)方向滾動(dòng)
要給swiper容器設(shè)置指定的高度或?qū)挾炔趴梢詫?shí)現(xiàn)滾動(dòng)

<scroll-view class="container1" scroll-y>
  <view>A</view>
  <view>B</view>
  <view>C</view>
</scroll-view>

/* pages/list/list.wxss */
.container1 view {
  width: 100px;
  height: 100px;
  text-align: center;
  line-height: 100px;
}

.container1 view:nth-child(1) {
  background-color: lightgreen;
}
.container1 view:nth-child(2) {
  background-color: lightskyblue;
}
.container1 view:nth-child(3) {
  background-color: lightpink;
}

.container1 {
  border: 1px solid red;
  width: 100px;
  height: 120px;
}

[圖片上傳失敗...(image-ba0cbd-1686211469649)]

swiper 和 swiper-item

輪播圖容器組件和輪播圖item組件

<swiper class="swiper-container" indicator-dots indicator-color="white" indicator-active-color="gray" autoplay interval="3000" circular>
    <swiper-item>
    <view class="item">A</view>
  </swiper-item>
    <swiper-item>
    <view class="item">B</view>
  </swiper-item>
    <swiper-item>
    <view class="item">C</view>
  </swiper-item>
</swiper>

.swiper-container {
  height: 150px;
}

.item {
  height: 100%;
  line-height: 150px;
  text-align: center;
}

swiper-item:nth-child(1) .item {
  background-color: lightgreen;
}
swiper-item:nth-child(2) .item {
  background-color: lightskyblue;
}
swiper-item:nth-child(3) .item {
  background-color: lightpink;
}

[圖片上傳失敗...(image-a67eb7-1686211469649)]

swiper組件的常用屬性

屬性	類型	默認(rèn)值	說(shuō)明
indicator-dots	boolean	false	是否顯示面板指示點(diǎn)
indicator-color	color	rgba（0,0,0,.3）	指示點(diǎn)顏色
indicator-active-color	color	#000000	當(dāng)前選中的指示點(diǎn)顏色
autoplay	boolean	false	是否自動(dòng)切換
interval	number	5000	自動(dòng)切換時(shí)間間隔
circular	boolean	false	是否采用銜接滑動(dòng)

基礎(chǔ)內(nèi)容組件

text：類似于 HTML 中的 span 標(biāo)簽，是一個(gè)行內(nèi)元素。
```
<view>
  手機(jī)號(hào)支持長(zhǎng)按選中效果
  <text selectable>13800005056</text>
</view>
```
- selectable屬性：實(shí)現(xiàn)長(zhǎng)按選中文本內(nèi)容。
  
  [圖片上傳失敗...(image-8863d9-1686211469649)]
rich-text：富文本組件，支持把 HTML 字符串渲染為 WXML 結(jié)構(gòu)。
```
<rich-text nodes="<h1 style='color: red;'>標(biāo)題</h1>"></rich-text>
```
- nodes屬性：把HTML字符串渲染為對(duì)應(yīng)的UI結(jié)構(gòu)。
  
  [圖片上傳失敗...(image-123dbe-1686211469649)]

其它常用組件

button

<!-- 按鈕組件的基本使用 -->
<!-- 通過(guò) type 屬性指定按鈕顏色類型 -->
<button>普通按鈕</button>
<button type="primary">主色調(diào)按鈕</button>
<button type="warn">警告按鈕</button>
<!-- size="mini" 小尺寸按鈕 -->
<button size="mini">普通按鈕</button>
<button type="primary" size="mini">主色調(diào)按鈕</button>
<button type="warn" size="mini">警告按鈕</button>
<!-- plain 鏤空按鈕 -->
<button size="mini" plain>普通按鈕</button>
<button type="primary" size="mini" plain>主色調(diào)按鈕</button>
<button type="warn" size="mini" plain>警告按鈕</button>

open-type屬性：可以調(diào)用微信提供的各種功能（客服、轉(zhuǎn)發(fā)、獲取用戶授權(quán)、獲取用戶信息等）
type屬性：指定按鈕顏色類型
- primary：主色調(diào)按鈕，綠色
- warn：警告按鈕，紅色
size屬性：
- mini：小尺寸按鈕
plain屬性：鏤空按鈕

[圖片上傳失敗...(image-4e6b99-1686211469649)]

image
```

<image></image>
<image src="/images/1.png" mode="heightFix"></image>
```
- 默認(rèn)寬度300px，高度240px
- mode屬性：指定圖片的裁剪和縮放模式
  - scaleToFill：默認(rèn)值，縮放模式，不保持縱橫比縮放圖片，使完全填滿image元素
  - aspectFit：保持縱橫比縮放，將圖片完整顯示出來(lái)
  - aspectFill：保持縱橫比縮放，使完全填滿image元素，但是可能發(fā)生裁剪
  - widthFix：寬度不變，高度自動(dòng)變化，保持寬高比不變
  - heightFix：高度不變，寬度自動(dòng)變化，保持寬高比不變
[圖片上傳失敗...(image-2f47b4-1686211469649)]
navigator
- 頁(yè)面導(dǎo)航組件，類似于a鏈接

API

小程序官方把API分成三大類

1.事件監(jiān)聽(tīng)API

特點(diǎn)：以on開(kāi)頭，用來(lái)監(jiān)聽(tīng)某些事件的觸發(fā)

舉例：wx.onWindowResize(function callback)監(jiān)聽(tīng)窗口尺寸變化的事件

2.同步API

特點(diǎn)：以Sync結(jié)尾的API都是同步API，其執(zhí)行結(jié)果可以通過(guò)函數(shù)返回值直接獲取，如果執(zhí)行出錯(cuò)會(huì)拋出異常
舉例：wx.setStorageSync('key','value')向本地存儲(chǔ)中寫入內(nèi)容

3.異步API

特點(diǎn)：類似于jQuery中的$.ajax(optjions)函數(shù)，需要通過(guò)success、fail、complete接受調(diào)用的結(jié)果
舉例：wx.request()發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求，通過(guò)success回調(diào)函數(shù)接收數(shù)據(jù)。

小程序成員管理

[圖片上傳失敗...(image-dae4d1-1686211469649)]

項(xiàng)目成員：

表示參與小程序開(kāi)發(fā)、運(yùn)營(yíng)的成員
可登錄小程序管理后臺(tái)
管理員可以添加、刪除項(xiàng)目成員，并設(shè)置項(xiàng)目成員的角色

體驗(yàn)成員：

表示參與小程序內(nèi)測(cè)體驗(yàn)的成員
可使用體驗(yàn)版小程序，但不屬于項(xiàng)目成員
管理員及項(xiàng)目成員均可添加、刪除體驗(yàn)成員

不同項(xiàng)目成員對(duì)應(yīng)的權(quán)限

開(kāi)發(fā)者的權(quán)限說(shuō)明

開(kāi)發(fā)者權(quán)限：可使用小程序開(kāi)發(fā)者工具及對(duì)小程序的功能進(jìn)行代碼開(kāi)
體驗(yàn)者權(quán)限：可使用體驗(yàn)版小程序
登錄權(quán)限：可登錄小程序管理后臺(tái)，無(wú)需管理員確認(rèn)
開(kāi)發(fā)設(shè)置：設(shè)置小程序服務(wù)器域名、消息推送及掃描普通鏈接二維碼打開(kāi)小程序
騰訊云管理：云開(kāi)發(fā)相關(guān)設(shè)置

小程序的版本

[圖片上傳失敗...(image-5c5d29-1686211469649)]

發(fā)布上線

一個(gè)小程序的發(fā)布上線，一般要經(jīng)過(guò) 上傳代碼 -> 提交審核 -> 發(fā)布這三步。

上傳代碼

點(diǎn)擊開(kāi)發(fā)者工具頂部工具欄中的“ 上傳 ” 按鈕
填寫版本號(hào) 以及項(xiàng)目備注

[圖片上傳失敗...(image-100bbf-1686211469649)]

在后臺(tái)查看上傳之的版本

登錄小程序管理后臺(tái) -> 管理 -> 版本管理 -> 開(kāi)發(fā)版本，即可查看剛才提交上傳的版本：

[圖片上傳失敗...(image-9de861-1686211469649)]

提交審核

提交審核的方式：在開(kāi)發(fā)版本的列表中，點(diǎn)擊“ 提交審核 ”按鈕之后，按照頁(yè)面提示填寫相關(guān)的信息，就能把小程序提交到官方進(jìn)行審核。

[圖片上傳失敗...(image-764e57-1686211469649)]

發(fā)布

審核通過(guò)之后，管理員的微信中會(huì)收到小程序通過(guò)審核的通知，此時(shí)在審核版本的列表中，點(diǎn)擊“發(fā)布 ”按鈕之后，即可把“ 審核通過(guò) ”的版本發(fā)布為線上版本 ”，供所有小程序用戶訪問(wèn)和使用。

[圖片上傳失敗...(image-25b0f1-1686211469649)]

基于小程序碼進(jìn)行推廣

獲取小程序碼的 5 個(gè)步驟：登錄小程序管理后臺(tái) -> 設(shè)置 -> 基本設(shè)置 -> 基本信息 -> 小程序碼及線下物料下載。

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

小程序項(xiàng)目結(jié)構(gòu)與組件基礎(chǔ)

小程序項(xiàng)目結(jié)構(gòu)與組件基礎(chǔ)

項(xiàng)目結(jié)構(gòu)

了解項(xiàng)目的基本組成結(jié)構(gòu)

小程序頁(yè)面的組成部分

json配置文件的作用

全局配置文件app.json

project.config.json文件

sitemap.json 文件

頁(yè)面的 .json 配置文件

修改項(xiàng)目首頁(yè)

WXML 模板

什么是 WXML

WXSS 樣式

JS邏輯交互

小程序宿主環(huán)境

通信模型

運(yùn)行機(jī)制

組件

小程序中組件的分類

常用的視圖容器類組件

基礎(chǔ)內(nèi)容組件

其它常用組件

API

小程序成員管理

小程序的版本

發(fā)布上線

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

小程序項(xiàng)目結(jié)構(gòu)與組件基礎(chǔ)

項(xiàng)目結(jié)構(gòu)

了解項(xiàng)目的基本組成結(jié)構(gòu)

小程序頁(yè)面的組成部分

json配置文件的作用

全局配置文件app.json

project.config.json文件

sitemap.json 文件

頁(yè)面的 .json 配置文件

修改項(xiàng)目首頁(yè)

WXML 模板

什么是 WXML

WXSS 樣式

JS邏輯交互

小程序宿主環(huán)境

通信模型

運(yùn)行機(jī)制

組件

小程序中組件的分類

常用的視圖容器類組件

基礎(chǔ)內(nèi)容組件

其它常用組件

API

小程序成員管理

小程序的版本

發(fā)布上線

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av