微信云环境-1-基础配置-vant

简介: 微信云环境-1-基础配置-vant

1. 前言

  1. 微信云开发
  2. 会者不难,难者不会,那就迎难而上,
  3. 云开发确实非常简单,所以一直没想好怎么写,最近突然想出去看看,所以想起一个非常简单的案例,仅做分享吧
  4. 下边有demo演示

2. 是什么 what

  1. 微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务
  2. 开发者可以使用云开发快速开发小程序小游戏公众号网页等,并且原生打通微信开放能力
  3. 开发者无需搭建服务器,可免鉴权直接使用平台提供的 API进行业务开发
  4. 统一开发多端应用。支持环境共享,一个后端环境可开发多个小程序、公众号、网页等,便捷复用业务代码与数据。
  5. 按量计费,成本更低 。支持按量计费模式,后端资源根据业务流量自动扩容,先使用后付费,无需支付闲置成本。

3.  项目创建

  1. 无游客模式、也不可以使用测试号
  2. 创建项目image.png
    创建项目.png
  3. 目录结构分析
  4. 根目录多了cloudfunctions,是存放我们所有的云函数的地方,也就是相当于我们进行数据存储、删除等操作的地方,也可以简单理解为传统开发后端的逻辑
  5. miniprogram我们所有的小程序页面存放的地方。(二者之间通过通信,形成一个完整的信息录入、存储、查询、展示的闭环)

4. 云环境创建

  1. 点击顶部云开发image.png
    1.png
  2. 根据提示开通云开发、创建云环境,默认配额可以创建2个云环境
  3. 各个环境相互隔离,每个环境都包含独立的数据库实例、存储空间、云函数配置等资源
  4. 每个环境都有唯一的环境 ID 标识
  5. 初始创建的环境自动成为默认环境。
  6. 注:AppID 首次开通云环境后,需等待大约 10 分钟方可正常使用云 API,在此期间官方后台服务正在做准备服务,如尝试在小程序中调用云 API 则会报 cloud init error:{ errMsg: "invalid scope" } 的错误
  7. 创建后在点击云开发界面 image.png
    云开发.png
  8. 设置 也可以创建新的环境image.png
    设置.png
  9. 更多的功能自己玩玩

5. demo演示

  1. image.png
    演示.gif
  2. 疫情这几年一直没出远门,工作也比较忙,就突然又蹦出来了想去旅行的躁动不安的心.先列个想去地方的清单吧

6.  vant 安装

  1. 看效果使用vant组件库
  2. miniprogram右键终端打开image.png
    1.png
  3. 创建package.json文件 : npm init -y
  4. 安装依赖: npm i @vant/weapp -S --production
  5. 工具----> 构建 npmimage.png
    构建.png
  6. app.json 删除 "style": "v2"  小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。
  7. project.config.json

"packNpmRelationList": [
            {
                "packageJsonPath": "./package.json",
                "miniprogramNpmDistDir": "./"
            }
        ],

7. 后记

1.一个环境写这么多,下篇文章在上代码吧


参考资料

微信云开发

vant


初心

我所有的文章都只是基于入门,初步的了解;是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉


相关文章
|
3月前
|
iOS开发 开发者
iOS微信分享配置universal links步骤
iOS微信分享配置universal links步骤
1392 58
|
3月前
|
小程序 搜索推荐 JavaScript
微信小程序使用Vant
微信小程序使用Vant
152 2
|
3月前
|
存储 安全 小程序
在微信小程序中使用 Vant 时如何确保数据的安全?
在微信小程序中使用 Vant 时如何确保数据的安全?
52 1
|
3月前
|
SQL 监控 小程序
在微信小程序中使用 Vant 时如何防止 SQL 注入攻击?
在微信小程序中使用 Vant 时如何防止 SQL 注入攻击?
173 58
|
3月前
|
小程序 前端开发
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
本文介绍了在微信小程序中使用Vant Weapp组件库时,如何将外部的icon作为图标引入的步骤。包括在项目中创建静态资源文件夹、在iconfont官网添加图标并生成在线链接、下载iconfont代码并解压到小程序目录中、修改iconfont.wxss文件将本地链接替换为在线链接、在全局样式文件中引入iconfont.wxss样式,以及在页面中使用图标的方法。
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
|
2月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
260 1
|
2月前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
39 0
|
3月前
|
小程序 JavaScript 前端开发
微信小程序安装和使用 Vant Weapp 组件库
本文介绍了如何在微信小程序中安装和使用Vant Weapp组件库,包括通过npm安装、构建npm、修改配置文件以及在小程序中使用Vant Weapp提供的组件。
微信小程序安装和使用 Vant Weapp 组件库
|
4月前
|
Linux 网络安全 API
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
企业微信自定义应用 企业可信IP配置 企业可信ip怎么设置
|
5月前
|
前端开发
支付系统--微信支付21--搭建前端环境,payment-demo-front这个项目文件夹是前端显示文件,payment-demo是后端项目,支付页面常见三个页面:购买课程,我的订单,下载账单
支付系统--微信支付21--搭建前端环境,payment-demo-front这个项目文件夹是前端显示文件,payment-demo是后端项目,支付页面常见三个页面:购买课程,我的订单,下载账单