快速上手小程序云開(kāi)發(fā)
2021-07-26 10:27:36

?

云開(kāi)發(fā)操作概述
云函數(shù)操作實(shí)戰(zhàn)
云存儲(chǔ)操作實(shí)戰(zhàn)
云數(shù)據(jù)庫(kù)操作實(shí)戰(zhàn)

小程序云開(kāi)發(fā)集成于小程序控制臺(tái)的原生serverless云服務(wù)。

核心功能包含：云函數(shù)，云存儲(chǔ)，云數(shù)據(jù)庫(kù)
代碼執(zhí)行，文件存儲(chǔ)能力，數(shù)據(jù)存儲(chǔ)能力

index.js

// 云函數(shù)入口文件
const cloud = require('wx-server-sdk')
cloud.init()
// 云函數(shù)入門(mén)函數(shù)
exports.main = async (event, context) => {
const wxContext = cloud.getWXContext()
return {
  event,
openid: wxContext.OPENID,
appid: wxContext.APPID,
unionid: wxContext.UNIONID,
 }
}

云函數(shù)是一段運(yùn)行在云端的代碼，無(wú)需管理服務(wù)器，在開(kāi)發(fā)工具內(nèi)編寫(xiě)，一鍵上傳部署即可運(yùn)行后端的代碼。

原生支持，彈性伸縮，私有協(xié)議

管理云函數(shù)：
創(chuàng)建，安裝依賴(lài)以及部署
云函數(shù)配置
云函數(shù)調(diào)式
運(yùn)行日志
數(shù)據(jù)監(jiān)控

wx.showLoading({
title: '發(fā)布中',
});
wx.cloud.callFunction({
// 云函數(shù)名稱(chēng)
 name: 'addblog',
data: {
cover: data.coverImage,
title: formData.title,
content: formData.content
 }
}).then(res => {
console.log(res);
const result = res.result;
const data = result.data || {};
if (result.code) {
  wx.showToast({
title: result.msg,
icon: 'none'
  });
return;
}

解CSS的字體屬性、?本屬性、背景屬性、邊框?qū)傩浴⒑心Ｐ?/p>

.title {
font-size: 20rpx;
font-weight: 600;
text-align: center;
}

padding-top，padding-right，padding- bottom，padding-left

上邊距 margin-top，右邊距margin-right，下邊距margin-bottom，左邊距margin-left

#wxmlinfo,#studyweapp{
padding-top:20px;
padding-right:15px;
padding-bottom:20px;
padding-left:15px; }

em是相對(duì)于當(dāng)前字體尺???的單位
如果當(dāng)前你的字體? ?為16px，那1em為16px；如果當(dāng)前你的字體??為18px，那1em為18px

內(nèi)邊距屬性 padding 在?個(gè)聲明中設(shè)置所有內(nèi)邊距屬性。padding-top 設(shè)置元素的上內(nèi)邊距。padding-right 設(shè)置元素的右內(nèi)邊距。padding-bottom 設(shè)置元素的下內(nèi)邊距。padding-left 設(shè)置元素的左內(nèi)邊距。

外邊距屬性 margin 在?個(gè)聲明中設(shè)置所有外邊距屬性。margin-top 設(shè)置元素的上外邊距。margin-right 設(shè)置元素的右外邊距 margin-bottom 設(shè)置元素的下外邊距。margin-left 設(shè)置元素的左外邊距

邊框?qū)傩?border 在?個(gè)聲明中設(shè)置所有的邊框?qū)傩浴?如border:1px solid #ccc; border-top 在?個(gè)聲明中設(shè)置所有的上邊框?qū)傩浴order-right 在?個(gè)聲明中設(shè)置所有的右邊框?qū)傩?。border-bottom 在?個(gè)聲明中設(shè)置所有的下邊框?qū)傩?。border-left 在?個(gè)聲明中設(shè)置所有的左邊框?qū)傩浴order-width 設(shè)置四條邊框的寬度。border-style 設(shè)置四條邊框的樣式。

內(nèi)邊距屬性 border-color 設(shè)置四條邊框的顏?。border-radius 簡(jiǎn)寫(xiě)屬性，設(shè)置所有四個(gè) border-*-radius 屬性。box-shadow 向?框添加?個(gè)或多個(gè)陰影。

鏈接與圖?

navigator組件

<view class="index-link">
<navigator url="./../home/imgshow/imgshow" class="item-link">讓?程序顯示圖 ?</navigator>
</view>

絕對(duì)路徑 那什么是絕對(duì)路徑呢？

這個(gè)就是絕對(duì)路徑，還有C:WindowsSystem32，這種從盤(pán)符開(kāi)始的路徑也是絕對(duì)路徑。

<view id="imgsection">
<view class="title">?程序顯示圖?</view>
<view class="imglist">
<image class="imgicon" src="/image/icon-tab1.png"></image>
</view>
</view>

?程 序會(huì)給圖?增加?個(gè)默認(rèn)的寬度和?度，寬度為300px，?度為225px

.imglist{
text-align: center; }
.imglist .imgicon{
width: 200px;
height: 200px;
margin: 20px; }

云存儲(chǔ)
騰訊云對(duì)象存儲(chǔ)COS

對(duì)象存儲(chǔ)，在左側(cè)菜單存儲(chǔ) 桶列表創(chuàng)建存儲(chǔ)桶，只需注意將訪問(wèn)權(quán)限改為公有讀私有寫(xiě)，其他按說(shuō)明??操作。

創(chuàng)建好存儲(chǔ)桶bucket
在?程序?，所有的?機(jī)屏幕的寬度都為750rpx，我們可以把圖?等?縮?。

給image組件添 加?個(gè)widthFix模式：寬度不變，?度?動(dòng)變化，保持原圖寬??不變。

百分?是??、移動(dòng)端等?來(lái)布局以及定義??的?個(gè)?常重要的單位

背景屬性 background 在?個(gè)聲明中設(shè)置所有的背景屬性。background-color 設(shè)置元素的背景顏?。background-image 設(shè)置元素的背景圖像。background-size 規(guī)定背景圖?的尺?。background-repeat 設(shè)置是否及如何重復(fù)背景圖像。

寫(xiě)在wxss?的圖?只能來(lái)?服務(wù)器或者圖床

圖?的邊框美化

.imglist .img{
border-radius: 8px;
box-shadow: 5px 8px 30px rgba(53,178,225,0.26); }

Web前端開(kāi)發(fā)職業(yè)技能標(biāo)準(zhǔn)串講
初級(jí)

1 Web頁(yè)面制作基礎(chǔ)
2 HTML5和CSS3開(kāi)發(fā)基礎(chǔ)與應(yīng)用
3 JavaScript程序設(shè)計(jì)
4 輕量級(jí)框架開(kāi)發(fā)應(yīng)用

Web簡(jiǎn)介
HTML語(yǔ)法基礎(chǔ)
HTML基本結(jié)構(gòu)、單雙標(biāo)簽、標(biāo)簽屬性、標(biāo)簽嵌套規(guī)則、注釋
HTML文本圖像元素
標(biāo)題和段落、圖像
HTML超鏈接元素
HTML列表元素
HTML表單表格元素
表單屬性、表格結(jié)構(gòu)
CSS基礎(chǔ)
基礎(chǔ)語(yǔ)法和選擇器、CSS引用方式
CSS屬性
CSS背景色 、背景圖、字體、文字、列表、表格、內(nèi)容
CSS盒子模型
盒子模型簡(jiǎn)介、塊級(jí)元素和行內(nèi)元素、盒子模型屬性
CSS布局
布局基本概念思想、float屬性使用、clear屬性、overflow屬性、
定位（相對(duì)、絕對(duì)、固定）

初級(jí)能力標(biāo)準(zhǔn)知識(shí)點(diǎn)解析

HTML5和CSS3開(kāi)發(fā)基礎(chǔ)與應(yīng)用

HTML5簡(jiǎn)介
HTML5新增元素
文檔結(jié)構(gòu)元素、文本格式化元素、頁(yè)面增強(qiáng)元素、多媒體元素

表單控件新增屬性

placeholder和required、multiple、form、formaction、
formmethod、formenctype、formtarget、autocomplete、
autofocus、pattern、novalidate、maxlength和Wrap、
datalist、output.

CSS3新增選擇器
兄弟選擇器、屬性選擇器、偽類(lèi)選擇器、偽元素選擇器

顏色、字體、盒陰影、背景、圓角、動(dòng)畫(huà)、漸變、過(guò)渡、多 列、彈性盒模型、2D、3D的功能

JavaScript語(yǔ)法基礎(chǔ)
變量、關(guān)鍵字、數(shù)據(jù)類(lèi)型、運(yùn)算符
分支、循環(huán)語(yǔ)句
If、switch、for、for in、while、 do-while

數(shù)組、字符串
數(shù)組方法、字符串方法
正則表達(dá)式
對(duì)象

屬性、方法、遍歷、JSON

對(duì)象
自定義函數(shù)、內(nèi)置函數(shù)、閉包、傳址調(diào)用、傳值調(diào)用

window、document、location、navigation、screen、
history

DOM操作：節(jié)點(diǎn)的創(chuàng)建、獲取和刪除、DOM屬性操作
JavaScript事件處理
窗口事件、鼠標(biāo)事件、鍵盤(pán)事件、事件冒泡與捕獲

JavaScript面向?qū)ο笫褂?br/>JQuery框架概述
JQuery選擇器

id選擇器 、類(lèi)別選擇器、標(biāo)記選擇器、屬性選擇器、位置選擇
器、后代選擇器、子代選擇器，認(rèn)識(shí)選擇器對(duì)象、選擇器對(duì)象
遍歷應(yīng)用及頁(yè)面初始化

JQuery中的DOM操作
插入、刪除、復(fù)制、克隆、替換HTML元素

JQuery事件
常用事件方法：鼠標(biāo)、鍵盤(pán)、事件冒泡、事件解除

JQurey效果
JQuery動(dòng)畫(huà)：隱藏和顯示、淡入淡出、滑動(dòng)、animate動(dòng)畫(huà)

JQuery Ajax
AJAX工作原理
AJAX原生寫(xiě)法、JQuery中AJAX語(yǔ)法
JSON對(duì)象
AJAX跨域

web前端開(kāi)發(fā)職業(yè)技能初級(jí)

案例名稱(chēng)：京東商城首頁(yè)

MySQL數(shù)據(jù)庫(kù)基礎(chǔ)與應(yīng)用
PHP技術(shù)與應(yīng)用
Web前后端交互技術(shù)
響應(yīng)式開(kāi)發(fā)技術(shù)

MySQL概念，MySQL安裝，MySQL數(shù)據(jù)庫(kù)管理，MySQL表結(jié)構(gòu)管理，基礎(chǔ)數(shù)據(jù)類(lèi)型、關(guān)系、數(shù)據(jù)表創(chuàng)建、查看、修改、刪除，MySQL用戶(hù)管理，用戶(hù)創(chuàng)建與刪除、權(quán)限授予與回收、密碼設(shè)置與更改

MySQL基本語(yǔ)法
數(shù)據(jù)插入、刪除、修改、查詢(xún)
MySQL事務(wù)管理
MySQL視圖
視圖概述、視圖創(chuàng)建、修改、刪除、查詢(xún)
MySQL索引
MySQL分區(qū)

表分區(qū)依據(jù)、類(lèi)型、RANGE分區(qū)、LIST分區(qū)、HASH分區(qū)、
KEY分區(qū)

MySQL觸發(fā)器
觸發(fā)器創(chuàng)建、查看、刪除、執(zhí)行順序

MySQL存儲(chǔ)過(guò)程
存儲(chǔ)過(guò)程創(chuàng)建、存儲(chǔ)過(guò)程基本語(yǔ)法
MySQL數(shù)據(jù)備份與恢復(fù)

PHP概述與工作原理
PHP環(huán)境搭建與安裝
PHP語(yǔ)言基礎(chǔ)

PHP標(biāo)記符、注釋、數(shù)據(jù)類(lèi)型、數(shù)據(jù)輸出、編碼規(guī)范、變量、
常量、運(yùn)算符、數(shù)據(jù)類(lèi)型轉(zhuǎn)換、控制語(yǔ)句、數(shù)組、函數(shù)

函數(shù)
字符串函數(shù)、數(shù)學(xué)函數(shù)、日期函數(shù)、數(shù)組函數(shù)

PHP圖形圖像處理（GD庫(kù)）（掌握）
PHP文件系統(tǒng)處理（掌握）
文件操作、目錄操作

PHP面向?qū)ο蟪绦蛟O(shè)計(jì)
面向?qū)ο筇匦裕ɡ^承、封裝、多態(tài)）、操作符、static關(guān)鍵字、
設(shè)計(jì)模式

PHP操作數(shù)據(jù)庫(kù)
Session操作、cookie操作

PHP Web開(kāi)發(fā)框架-Laravel

Web前后端交互技術(shù)

（1）WEB概述（了解）
（2）HTTP協(xié)議（掌握）
? HTTP協(xié)議概述、通信過(guò)程、狀態(tài)值匯總
（3）Ajax（掌握、應(yīng)用）
? Ajax簡(jiǎn)介、工作原理
? JSON解析，XML解析
? DOM操作
（4）Iframe（了解）
（5）Cookie（掌握）
? Cookie工作原理、作用、創(chuàng)建、使用、銷(xiāo)毀
（6）Socket通信（了解）
?Socket概念、工作原理、服務(wù)端與客戶(hù)端、通信協(xié)議、通信
機(jī)制、通信過(guò)程

（1）Bootstrap概述（了解）
（2）Bootstrap安裝及配置（掌握）
（3）Bootstrap柵格布局（掌握、應(yīng)用）
? Bootstrap 柵格基本布局、水平布局、垂直布局、柵格排序、
偏移
（4）Bootstrap樣式（掌握、應(yīng)用）
? 媒體對(duì)象、文本、列表、表格、圖片、表單、輔助樣式（背
景色、文本顏色）

（5）Bootstrap組件（掌握、應(yīng)用）
? 按鈕、表格、下拉菜單、按鈕組、輸入框組、導(dǎo)航、標(biāo)簽、
徽章、縮略圖、警告框、進(jìn)度條、版式、字體圖標(biāo)
（6）SASS（掌握）
? SASS概述、安裝配置、基礎(chǔ)語(yǔ)法

---

若本號(hào)內(nèi)容有做得不到位的地方（比如：涉及版權(quán)或其他問(wèn)題），請(qǐng)及時(shí)聯(lián)系我們進(jìn)行整改即可，會(huì)在第一時(shí)間進(jìn)行處理。

---

?

?