整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
．頭部與輪播
圖1 輪播代碼 1
點擊 圖1中的頭部中Select Region 彈出遮罩層
當(dāng)彈出遮罩層后，中間有一個白色文本框，文本框里面可以選擇各種選擇，而且鼠標(biāo)移入選擇項中也需要發(fā)生顏色的變化，作為顯示給用戶當(dāng)前的鼠標(biāo)位置，讓人看起舒服而清晰。 1
二．中間
圖二 商品
圖二 html的代碼 1
三. 尾部
圖三 信息相關(guān)
圖三 布置代碼 1
四、 開發(fā)總結(jié)
本人從事在線教育十年工作經(jīng)驗現(xiàn)在精心整理了一套從小白到項目實踐開發(fā)各種學(xué)習(xí)資料如果你想學(xué)想加入我們請關(guān)注我在私信回復(fù)“編程”就可以領(lǐng)取學(xué)習(xí)資料！！！
圖1
圖1代碼
第一次代碼都是靠自己打的，我發(fā)現(xiàn)原來每一個項目之中的每一部分，可以多種代碼方式來實現(xiàn)的，這無疑提高了我的實現(xiàn)每一個代碼功能探索，比如圖1中的五段文字要有高亮效果以及下劃線高亮效果，首先我用的是js方式來實現(xiàn)，但是才發(fā)現(xiàn)下劃線不可完美的實現(xiàn)效果，下劃線的大小不好，文字與下劃線距離不好，從而我想到用hover偽類實現(xiàn)這一效果，如圖1代碼：一開始我把每一個文字用span標(biāo)簽來，每一個span標(biāo)簽外面我都要用一個p標(biāo)簽來包裹著，為什么我要如此布局呢？因為這樣方便我五個中只有后三個才有高亮效果的功能，雖然復(fù)雜，但是也讓我對每一層代碼布局的深入認(rèn)識的了解哦。
用另外一種代碼方式來做同一種的功能也不錯哦！我覺得可以探索每一種代碼實現(xiàn)方式，加深的了解，整體來我學(xué)習(xí)到了布局的多種方式。
了降低復(fù)雜前端應(yīng)用的研發(fā)難度和維護難度，此框架應(yīng)運而生。經(jīng)歷了十?dāng)?shù)個項目的檢驗，期間不斷優(yōu)化和擴展功能，已經(jīng)日趨穩(wěn)定。
總體看有如下幾個特點：
1. 沒有復(fù)雜的標(biāo)記和語法,不使用typescript和復(fù)雜模板標(biāo)記。
2. 基于原生javascript,性能優(yōu)異。
3. 兼容jQuery庫,易于DOM操作和瀏覽器適配。
4. 完全采用面向?qū)ο缶幊谭绞綐?gòu)建頁面和交互行為。
5. 可獨立編輯組件,分塊構(gòu)建,可適配PC端和手機端。
6. 易于維護,可在復(fù)雜的單頁面系統(tǒng)快速定位組件和其注入的參數(shù)及組件源碼。
7. 包含核心js組件框架,UI框架,應(yīng)用架構(gòu)。
8. 無需編譯,即時所得。
9. 不依賴nodejs,npm等前端工具和龐大的第三方庫,開發(fā)環(huán)境清潔,對新手和后端研發(fā)友好。
10. 公共組件倉庫。可在線分享你的組件和在系統(tǒng)里在線引用別人分享的組件。
11. 可選配套的后端單體服務(wù)、微服務(wù)、saas服務(wù)等服務(wù)套件。
12. 可選配套的代碼生成工具和自動部署工具。
任意復(fù)雜的頁面可以由有限的組件搭建而成。
每個組件都以.rs作為源碼文件后綴。
組件內(nèi)部也可以嵌套組件，實現(xiàn)不限層級遞歸使用
組件對象擁有僅自身作用域有效的CSS和JS代碼片段，從而隔離了組件之間相互影響。
擁有完整的生命周期，并可以在自身的生命周期內(nèi)設(shè)置函數(shù)回調(diào)鉤子。
使用對象引用可以獲取組件對象的屬性值和操作對象的函數(shù)方法。
FormRegion：表單組件，主要用于表單值綁定，后端服務(wù)地址綁定。包括數(shù)據(jù)回顯，數(shù)據(jù)添加或修改等。（推薦使用）
GridRegion：列表查詢組件，用于查詢，分頁，是FormRegion的定制版，專用于查詢和顯示分頁結(jié)果。（FormRegion的定制版本，用于綁定后端分頁服務(wù)，顯示分頁列表）
StaticRegion：靜態(tài)容器組件，不能使用值綁定標(biāo)簽。主要用于顯示靜態(tài)頁面，組件布局容器，高級原生組件定制等。（FormRegion的閹割版本，占用內(nèi)存更少，不支持值綁定）
在不追求極致性能和后端服務(wù)強綁定的情況下，可以只使用FormRegion這種類型的組件。
先我們來介紹下，Wintersmith 是一個簡單而靈活的靜態(tài)站點生成器。采用 markdown 構(gòu)建，這個是我們的基礎(chǔ)條件。
確保系統(tǒng)包含以下環(huán)境：
$ npm install -g serverless$ npm i wintersmith -g可對指定路徑進行安裝
$ wintersmith new <path>初始化成功后，可以看到路徑下創(chuàng)建的項目文件
運行以下命令，并通過瀏覽器訪問 http://localhost:8080 即可方便地預(yù)覽效果，而且提供 LiveReload 功能，可以實時預(yù)覽。
$ wintersmith preview使用如下命令構(gòu)建網(wǎng)站：
$ wintersmith build在項目目錄下，創(chuàng)建 serverless.yml 文件：
$ touch serverless.yml將以下內(nèi)容寫入上述的 yml 文件里：
# serverless.yml
myWebsite:
component: '@serverless/tencent-website'
inputs:
code:
src: ./build
index: index.html
error: index.html
region: ap-guangzhou
bucketName: my-bucket配置完成后，文件目錄如下：
.
├── build
| ├── index.html
| └── README.md
└── serverless.yml通過 sls 命令進行部署，這里還可以添加 –debug 參數(shù)來查看部署過程中的信息：
$ sls --debug如您的賬號未登陸或注冊騰訊云，您可以直接通過微信掃描命令行中的二維碼進行授權(quán)登陸和注冊，從而進行授權(quán)登陸和注冊。這也是我覺得特別方便的一個地方！
部署過程中，terminal 顯示信息示意：
訪問命令行輸出的 url，即可查看使用 Serverless Framework 部署的網(wǎng)站啦~
本文使用了騰訊云的無服務(wù)器框架 Serverless Framework 來搭建 Wintersmith 博客系統(tǒng)。
雖然這只是一個非常簡單的示例，但是不難看出，Serverless Framework 在快速部署方面的強大能力。比如集成了微信掃描二維碼，就直接讓我們避開了繁瑣的云服務(wù)的賬號注冊、配置的環(huán)節(jié)。而你需要做的，只是根據(jù) Wintersmith 自身的能力，進行網(wǎng)站的定制。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
