快速上手小程序云开发

迈不过友情╰ 2021-07-24 23:36 451阅读 0赞

云开发操作概述  
云函数操作实战  
云存储操作实战  
云数据库操作实战

小程序云开发集成于小程序控制台的原生serverless云服务。

核心功能包含：云函数，云存储，云数据库  
代码执行，文件存储能力，数据存储能力

index.js

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

云函数是一段运行在云端的代码，无需管理服务器，在开发工具内编写，一键上传部署即可运行后端的代码。

原生支持，弹性伸缩，私有协议

管理云函数：  
创建，安装依赖以及部署  
云函数配置  
云函数调式  
运行日志  
数据监控

wx.showLoading({
     title: '发布中',
    });
    wx.cloud.callFunction({
     // 云函数名称
     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的字体属性、⽂本属性、背景属性、边框属性、盒模型

.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是相对于当前字体尺⼨⽽⾔的单位  
如果当前你的字体⼤ ⼩为16px，那1em为16px；如果当前你的字体⼤⼩为18px，那1em为18px

内边距属性 padding 在⼀个声明中设置所有内边距属性。 padding-top 设置元素的上内边距。 padding-right 设置元素的右内边距。 padding-bottom 设置元素的下内边距。 padding-left 设置元素的左内边距。

外边距属性 margin 在⼀个声明中设置所有外边距属性。 margin-top 设置元素的上外边距。 margin-right 设置元素的右外边距 margin-bottom 设置元素的下外边距。 margin-left 设置元素的左外边距

边框属性 border 在⼀个声明中设置所有的边框属性。⽐如border:1px solid \#ccc; border-top 在⼀个声明中设置所有的上边框属性。 border-right 在⼀个声明中设置所有的右边框属性。 border-bottom 在⼀个声明中设置所有的下边框属性。 border-left 在⼀个声明中设置所有的左边框属性。 border-width 设置四条边框的宽度。 border-style 设置四条边框的样式。

内边距属性 border-color 设置四条边框的颜⾊。 border-radius 简写属性，设置所有四个 border-\*-radius 属性。 box-shadow 向⽅框添加⼀个或多个阴影。

链接与图⽚

navigator组件

<view class="index-link">
      <navigator url="./../home/imgshow/imgshow" class="item-link">让⼩程序显示图 ⽚</navigator>
    </view>

绝对路径 那什么是绝对路径呢？

这个就是绝对路径，还有C:\\Windows\\System32，这种从盘符开始的路径也是绝对路径。

<view id="imgsection">
      <view class="title">⼩程序显示图⽚</view>
      <view class="imglist">
        <image class="imgicon" src="/image/icon-tab1.png"></image>
      </view>
    </view>

⼩程 序会给图⽚增加⼀个默认的宽度和⾼度，宽度为300px，⾼度为225px

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

云存储  
腾讯云对象存储COS

对象存储，在左侧菜单存储 桶列表创建存储桶，只需注意将访问权限改为公有读私有写，其他按说明⾃⾏操作。

创建好存储桶bucket  
在⼩程序⾥，所有的⼿机屏幕的宽度都为750rpx，我们可以把图⽚等⽐缩⼩。

给image组件添 加⼀个widthFix模式：宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变。

百分⽐是⽹⻚、移动端等⽤来布局以及定义⼤⼩的⼀个⾮常重要的单位

背景属性 background 在⼀个声明中设置所有的背景属性。 background-color 设置元素的背景颜⾊。 background-image 设置元素的背景图像。 background-size 规定背景图⽚的尺⼨。 background-repeat 设置是否及如何重复背景图像。

写在wxss⾥的图⽚只能来⾃服务器或者图床

图⽚的边框美化

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

Web前端开发职业技能标准串讲  
初级

1 Web页面制作基础  
2 HTML5和CSS3开发基础与应用  
3 JavaScript程序设计  
4 轻量级框架开发应用

Web简介  
HTML语法基础  
HTML基本结构、单双标签、标签属性、标签嵌套规则、注释  
HTML文本图像元素  
标题和段落、图像  
HTML超链接元素  
HTML列表元素  
HTML表单表格元素  
表单属性、表格结构  
CSS基础  
基础语法和选择器、CSS引用方式  
CSS属性  
CSS背景色 、背景图、字体、文字、列表、表格、内容  
CSS盒子模型  
盒子模型简介、块级元素和行内元素、盒子模型属性  
CSS布局  
布局基本概念思想、float属性使用、clear属性、overflow属性、  
定位（相对、绝对、固定）

初级能力标准知识点解析

HTML5和CSS3开发基础与应用

HTML5简介  
HTML5新增元素  
文档结构元素、文本格式化元素、页面增强元素、多媒体元素

表单控件新增属性

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

CSS3新增选择器  
兄弟选择器、属性选择器、伪类选择器、伪元素选择器

颜色、字体、盒阴影、背景、圆角、动画、渐变、过渡、多 列、弹性盒模型、2D、3D的功能

JavaScript语法基础  
变量、关键字、数据类型、运算符  
分支、循环语句  
If、switch、for、for in、while、 do-while

数组、字符串  
数组方法、字符串方法  
正则表达式  
对象

属性、方法、遍历、JSON

对象  
自定义函数、内置函数、闭包、传址调用、传值调用

window、document、location、navigation、screen、  
history

DOM操作：节点的创建、获取和删除、DOM属性操作  
JavaScript事件处理  
窗口事件、鼠标事件、键盘事件、事件冒泡与捕获

JavaScript面向对象使用  
JQuery框架概述  
JQuery选择器

id选择器 、类别选择器、标记选择器、属性选择器、位置选择  
器、后代选择器、子代选择器，认识选择器对象、选择器对象  
遍历应用及页面初始化

JQuery中的DOM操作  
插入、删除、复制、克隆、替换HTML元素

JQuery事件  
常用事件方法：鼠标、键盘、事件冒泡、事件解除

JQurey效果  
JQuery动画：隐藏和显示、淡入淡出、滑动、animate动画

JQuery Ajax  
AJAX工作原理  
AJAX原生写法、JQuery中AJAX语法  
JSON对象  
AJAX跨域

web前端开发职业技能初级

案例名称：京东商城首页

MySQL数据库基础与应用  
PHP技术与应用  
Web前后端交互技术  
响应式开发技术

MySQL概念，MySQL安装，MySQL数据库管理，MySQL表结构管理，基础数据类型、关系、数据表创建、查看、修改、删除，MySQL用户管理，用户创建与删除、权限授予与回收、密码设置与更改

MySQL基本语法  
数据插入、删除、修改、查询  
MySQL事务管理  
MySQL视图  
视图概述、视图创建、修改、删除、查询  
MySQL索引  
MySQL分区

表分区依据、类型、RANGE分区、LIST分区、HASH分区、  
KEY分区

MySQL触发器  
触发器创建、查看、删除、执行顺序

MySQL存储过程  
存储过程创建、存储过程基本语法  
MySQL数据备份与恢复

PHP概述与工作原理  
PHP环境搭建与安装  
PHP语言基础

PHP标记符、注释、数据类型、数据输出、编码规范、变量、  
常量、运算符、数据类型转换、控制语句、数组、函数

函数  
字符串函数、数学函数、日期函数、数组函数

PHP图形图像处理（GD库）（掌握）  
PHP文件系统处理（掌握）  
文件操作、目录操作

PHP面向对象程序设计  
面向对象特性（继承、封装、多态）、操作符、static关键字、  
设计模式

PHP操作数据库  
Session操作、cookie操作

PHP Web开发框架-Laravel

Web前后端交互技术

（1）WEB概述（了解）  
（2）HTTP协议（掌握）  
✓ HTTP协议概述、通信过程、状态值汇总  
（3）Ajax（掌握、应用）  
✓ Ajax简介、工作原理  
✓ JSON解析，XML解析  
✓ DOM操作  
（4）Iframe（了解）  
（5）Cookie（掌握）  
✓ Cookie工作原理、作用、创建、使用、销毁  
（6）Socket通信（了解）  
✓Socket概念、工作原理、服务端与客户端、通信协议、通信  
机制、通信过程

（1）Bootstrap概述（了解）  
（2）Bootstrap安装及配置（掌握）  
（3）Bootstrap栅格布局（掌握、应用）  
✓ Bootstrap 栅格基本布局、水平布局、垂直布局、栅格排序、  
偏移  
（4）Bootstrap样式（掌握、应用）  
✓ 媒体对象、文本、列表、表格、图片、表单、辅助样式（背  
景色、文本颜色）

（5）Bootstrap组件（掌握、应用）  
✓ 按钮、表格、下拉菜单、按钮组、输入框组、导航、标签、  
徽章、缩略图、警告框、进度条、版式、字体图标  
（6）SASS（掌握）  
✓ SASS概述、安装配置、基础语法

--------------------

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

--------------------

## 请点赞！因为你们的赞同/鼓励是我写作的最大动力！ ##

### 欢迎关注[达叔小生][Link 1]的简书！ ###

**这是一个有质量，有态度的博客**

\[外链图片转存失败(img-uNOLN4V1-1566475857118)(https://upload-images.jianshu.io/upload\_images/11158618-9ab0d3fef85d80ce?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)\]

[Link 1]: https://www.jianshu.com/u/c785ece603d1