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

?

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

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

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

index.js

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

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

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

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

wx.showLoading({
title: '發(fā)布中',
});
wx.cloud.callFunction({
// 云函數(shù)名稱
 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是相對于當(dāng)前字體尺???的單位
如果當(dāng)前你的字體? ?為16px，那1em為16px；如果當(dāng)前你的字體??為18px，那1em為18px

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

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

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

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

鏈接與圖?

navigator組件

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

絕對路徑 那什么是絕對路徑呢？

這個就是絕對路徑，還有C:WindowsSystem32，這種從盤符開始的路徑也是絕對路徑。

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

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

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

云存儲
騰訊云對象存儲COS

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

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

給image組件添 加?個widthFix模式：寬度不變，?度?動變化，保持原圖寬??不變。

百分?是??、移動端等?來布局以及定義??的?個?常重要的單位

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

寫在wxss?的圖?只能來?服務(wù)器或者圖床

圖?的邊框美化

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

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

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

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

初級能力標(biāo)準(zhǔn)知識點解析

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

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

表單控件新增屬性

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

CSS3新增選擇器
兄弟選擇器、屬性選擇器、偽類選擇器、偽元素選擇器

顏色、字體、盒陰影、背景、圓角、動畫、漸變、過渡、多 列、彈性盒模型、2D、3D的功能

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

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

屬性、方法、遍歷、JSON

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

window、document、location、navigation、screen、
history

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

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

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

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

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

JQurey效果
JQuery動畫：隱藏和顯示、淡入淡出、滑動、animate動畫

JQuery Ajax
AJAX工作原理
AJAX原生寫法、JQuery中AJAX語法
JSON對象
AJAX跨域

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

案例名稱：京東商城首頁

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

---

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

---

?

?