当前位置 博文首页 > CSDN凉宸：手把手带你入门微信小程序 | 寻找C站宝藏

最大化 缩小

    CSDN凉宸：手把手带你入门微信小程序 | 寻找C站宝藏

    作者：[db:作者] 时间：2021-07-08 10:19

    在这里插入图片描述

    基础用法

    准备工作

    注册账号

    打开微信公众平台官网：https://mp.weixin.qq.com/

    image.png

    点击立即注册

    image.png

    点击小程序

    image.png

    按照步骤进行注册：PS 要准备一个未被微信公众平台注册，未被微信开放平台注册，未被个人微信号绑定的邮箱

    注册完成后进行扫码登录

    image.png

    选择绑定好的微信小程序管理账号

    获取APPID

    登录之后

    image.png

    点击左边的开发管理

    image.png

    点击开发设置下面就会显示

    image.png

    此APPID 就是你之后开发微信小程序使用的ID号，可以保存的本地

    开发工具下载

    https://developers.weixin.qq.com/miniprogram/dev/framework/

    打开文档

    image.png

    点击工具

    image.png

    点击下载

    image.png

    下载完之后双击打开进行安装，直接点击下一步即可根据步骤

    image.png

    安装好就是这样一个电脑app，双击打开即可

    在这里插入图片描述

    会出现此标志，微信扫码登录

    在这里插入图片描述

    登录以后点击**+**号

    image.png

    将自己保存的APPID填入，开发阶段勾选不使用云服务，项目名称与地址随意

    image.png

    打开之后即完成创建

    项目编写

    创建文件:

    可以在根目录下app.json中pages里面直接编译创建文件

    image.png

    image.png

    wxml文件相当于html文件 wxss文件相当于css文件

    也可以在pages文件夹内手动创建（不推荐）

    首页面编写：

    image.png

    <view></view>相当于div盒子容器

    官网参考地址

    https://developers.weixin.qq.com/miniprogram/dev/component/view.html

    <text></text>相当于span标签

    官网参考地址

    https://developers.weixin.qq.com/miniprogram/dev/component/text.html

    <open-data></open-data> 获取用户的信息

    官网参考地址

    https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

    image.png

    image.png

    image.png

    swiper轮播图插件

    官网参考地址

    https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html

    <image></image> 相当于img标签

    官网参考地址

    https://developers.weixin.qq.com/miniprogram/dev/component/image.html

    引入阿里巴巴矢量库图标

    https://www.iconfont.cn/

    登录官网

    image.png

    搜索图标

    image.png

    鼠标移入加入购物车

    image.png
    点击

    image.png

    添加至项目

    image.png

    复制地址网页打开

    image.png

    页面直接保存至小程序根目录下 或者全选复制，自己新建wxss文件粘贴进去

    image.png
    然后在根目录下的app.wxss中引入

    image.png

    注意：一定要以;结束

    云开发 使用

    1、初始化云开发

    微信小程序项目创建我就不过多的废话了，大家都会操作（一定要选择不使用云服务）

    项目创建好就是这个样子的了

    在这里插入图片描述

    点击上方的云开发

    在这里插入图片描述

    会出现如下框组

    在这里插入图片描述

    我们做如下设置

    在这里插入图片描述

    设置完毕后等待初始化完成 之后会出现如下页面

    在这里插入图片描述

    在这里插入图片描述

    初始化云开发的环境

    在这里插入图片描述

    2、创建数据

    数据库操作和我们平常使用的一样 都是为增删改查

    参考官方文档

    https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/database/init.html

    点击云开发 内的数据库

    在这里插入图片描述

    按照如下操作创建表

    在这里插入图片描述
    点击操作表
    在这里插入图片描述
    在这里插入图片描述
    点击确定之后就会出现如下数据
    在这里插入图片描述

    3、数据库的权限与增删改查

    3.1 数据库的权限

    在这里插入图片描述
    我们要更改一下权限，否则我们用户不能使用数据库，只有管理员可以
    我们将之权限改为所有用户可读
    在这里插入图片描述

    上面权限设置完之后就可进行操作了

    3.2 数据库查询 get()

    • 传统固定的查询写法
      在这里插入图片描述
    • Es6简洁写法
      在这里插入图片描述

    数据库内容就请求到了
    在这里插入图片描述
    我们请求道德数据就可以在页面展示了
    在这里插入图片描述
    在这里插入图片描述
    如果用传统写法会有this指向问题一定要注意
    如果使用传统写法 我们可以再onLode中设置this 如下
    数据一样可以展示在页面中
    在这里插入图片描述
    PS：推荐使用ES6语法

    3.3 条件查询（where()）

    注意：要在.get前面写 .where

    在此处写条件
    在这里插入图片描述

    3.4 查询单条数据（doc()）

    在这里插入图片描述
    在这里插入图片描述

    3.5 添加数据（add()）

    首先将权限改为第一个
    在这里插入图片描述
    语法如下
    在这里插入图片描述
    成功之后 数据表中多了数据
    在这里插入图片描述

    输入内容 点击添加按钮添加至表内
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    3.6 数据更新（update()）

    修改数据库内的已存在数据 使用where条件或者doc都可进行修改数据

    where可以根据任何条件进行判断
    doc必须使用数据表内的_id来进行使用
    在这里插入图片描述
    在这里插入图片描述
    或者使用.doc(_id)
    在这里插入图片描述

    在这里插入图片描述

    3.6 删除数据（remove()）

    删除数据库里面已存在的数据 使用where条件或者doc都可进行修改数据

    where可以根据任何条件进行判断
    doc必须使用数据表内的_id来进行使用

    在这里插入图片描述
    使用.doc(_id)也可以
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述

    云开发 案例

    忽略一下样式哦
    我们首先创建商品页面，然后去数据库请求数据

    在这里插入图片描述

    在这里插入图片描述
    封装函数
    在这里插入图片描述

    在商品列表页面添加功能
    在这里插入图片描述
    在这里插入图片描述
    在这里插入图片描述
    跳转详情页功能实现
    在这里插入图片描述
    在这里插入图片描述
    详情页
    在这里插入图片描述
    在这里插入图片描述
    删除数据实现
    在这里插入图片描述
    或者
    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    更改数据实现
    在这里插入图片描述
    先跳转至更改数据页面
    在这里插入图片描述更改数据页面
    在这里插入图片描述
    在这里插入图片描述

    在这里插入图片描述
    数据有可能因为权限问题更改不了
    我们去做如下更改即可

    在这里插入图片描述
    我们的数据就更改好了

    在这里插入图片描述

    云函数 使用

    1 初始化云函数环境

    1.1 创建cloud文件夹和pages同级目录下

    在这里插入图片描述

    1.2 在project.config.json 中配置云函数所在目录为cloud

    在这里插入图片描述
    出现如下 文件夹旁显示当前环境就代表成功了
    文件夹上也会显示云朵
    在这里插入图片描述
    但是注意
    在这里插入图片描述

    1.3 新建云函数

    在cloud云函数文件夹右击会出现 点击 然后输入名称就会自动部署
    在这里插入图片描述
    在这里插入图片描述
    云函数创建之后会自动生成
    在这里插入图片描述

    2云函数获取openid

    2.1 调用云函数第一种写法

    在这里插入图片描述

    2.2 调用云函数第二种写法（推）

    在这里插入图片描述

    3 云函数获取数据库

    在云函数文件夹下index.js中编写代码
    我们不需要在写wx.
    在这里插入图片描述
    这里最好也写上云开发环境ID（如果不报错可以不写，方便后面维护）
    在这里插入图片描述
    如果报错推荐使用 cloud.DYNAMIC_CURRENT_ENV常亮
    在这里插入图片描述

    注：云函数只要有变动，就要重新部署，否则此次编写的云函数不生效，调用的还是上一次部署的
    右击

    • 如果是第一次点击此选项
      在这里插入图片描述
    • 第二次只需要右击index.js文件
      在这里插入图片描述

    获取数据：
    在这里插入图片描述
    页面循环展示：
    在这里插入图片描述
    云函数获取和本地获取区别
    在这里插入图片描述
    补充
    openid相当于我们在微信的身份证
    在这里插入图片描述

    云存储 使用

    1 云开发控制台管理文件

    在这里插入图片描述
    点击资源文件夹 就可以看到里面的内容了
    在这里插入图片描述
    点击各个文件都会有下载地址，如果是图片可以直接预览，其他文件则需要地址了
    在这里插入图片描述

    2 上传图片到云存储

    在上传图片前我们需选择图片，所以用到一个选择图片功能

    官方文档：
    https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseImage.html

    在这里插入图片描述

    在这里插入图片描述

    在这里插入图片描述
    在这里插入图片描述
    这样设置好，就可以选择图片或者拍照了

    然后就可以设置上传了

    官方文档：
    https://developers.weixin.qq.com/miniprogram/dev/wxcloud/reference-sdk-api/storage/uploadFile/client.uploadFile.html
    在这里插入图片描述
    调用文件上传api接口

    在这里插入图片描述
    图片名称建议使用随机生成，要不然会无限覆盖
    也可以不用这麻烦的，直接使用箭头函数就好了，直接使用this即可

    使用上传即可了
    在这里插入图片描述

    在这里插入图片描述
    打印出上传成功即可了

    返回的值中fileID就是图片地址了
    在这里插入图片描述

    查看云储存，则看见我们刚上传的图片
    在这里插入图片描述

    3 上传视频到云存储

    在上传视频前我们需选择视频，所以用到一个选择视频功能

    官方文档：
    https://developers.weixin.qq.com/miniprogram/dev/api/media/video/wx.chooseVideo.html
    在这里插入图片描述

    在这里插入图片描述
    这么使用就可以调用视频功能了
    在这里插入图片描述
    在这里插入图片描述
    调用文件上传接口↑
    在这里插入图片描述
    上传成功了
    在这里插入图片描述

    封装公用
    在这里插入图片描述

    4 上传word、Excel、pdf文件等到云储存

    官方文档：
    https://developers.weixin.qq.com/miniprogram/dev/api/media/image/wx.chooseMessageFile.html

    在这里插入图片描述
    type值很重要 可以选择我们上传文件格式
    在这里插入图片描述
    在这里插入图片描述
    上面图片和文件上传也可以使用，只要对应上type值就好了（选择all时所有类型文件都可上传哦）
    后面上传步骤都一样啦，参考上面↑↑↑后续上传步骤

    CMS内容管理

    CMS内容管理是一个可视化工具，相当于MySQL数据库可视化工具一样

    小程序云开发–云开发初始化

    这篇我就不做解释了

    开通CMS可视化网页管理

    项目创建好之后点击上方云开发
    在这里插入图片描述
    云开发环境初始化完成以后点击更多中的内容管理
    在这里插入图片描述
    或者
    点击右上角设置->扩展功能->内容管理开通
    在这里插入图片描述
    点击之后如果出现如下列表就证明你的云环境为预付费，我们要切换成按量付费即可
    直接点击确定就好
    在这里插入图片描述
    切换完成之后再次点击出现如下列表
    傻瓜式的点击下一步即可
    在这里插入图片描述
    之后会出现如下列表
    在这里插入图片描述
    填写完账号密码点击确定
    等待他自动处理即可，大概3-10分钟
    在这里插入图片描述
    等待处理完成点击更多->内容管理即可出现如下界面
    在这里插入图片描述
    数据库会多出如下很多东西，切记不要动他，云函数也是如此
    数据库：
    在这里插入图片描述
    云函数
    在这里插入图片描述

    CMS内容管理进入

    点击链接进入之后就是下面这样子，输入账号密码进入后台
    在这里插入图片描述
    进入后台就是下面这样了
    在这里插入图片描述
    创建项目
    在这里插入图片描述
    创建好之后点击进入
    在这里插入图片描述
    进入之后就是这样了
    在这里插入图片描述
    下面一个一个模块来进行讲解

    内容模型

    在这里插入图片描述
    点击创建模型或者新建模型
    弹出如下表格
    如实填写即可
    在这里插入图片描述
    我填写如下，此时数据库中还没有，当我们点击创建时，数据库会同时创建一个数据集合
    在这里插入图片描述
    在这里插入图片描述
    还有就是我们在CMS后台内容管理创建模型在数据库可看到，但是数据库创建我们在CMS内容管理是无法看到的，所以说是单向的

    接下来添加内容
    （想添加什么内容类型直接点击右面的即可）
    在这里插入图片描述
    CMS中内容模型会有商品名字段出现
    如果想添加多个字段单行字符串进行添加即可
    在这里插入图片描述

    内容集合

    点击内容集合里面的商品表
    在这里插入图片描述
    出现
    在这里插入图片描述
    接下来在弹出框填写商品名
    在这里插入图片描述
    输入完之后点击创建
    在这里插入图片描述
    在数据集合中就会同时进行创建
    点击删除也会同时进行删除，如果没有删除那么我们就要手动去删除了

    剩余

    在这里插入图片描述
    剩余这三个大家看一下就好了

    请求在后台创建数据

    看之前我发的博客即可了
    在这就不多啰嗦了
    数据请求与使用

    cs
    上一篇：CSDN凉宸：带你走进React路由的世界
    下一篇：没有了