[图片] 导语 React是目前比较火的前端框架之一，除了可以在自有服务器、Github Pages部署以外，现在你有了一个新的选择，那就是使用云开发静态网站功能来进行部署。 云开发（CloudBase）是一款云端一体化的产品方案 ，采用 serverless 架构，免环境搭建等运维事务 ，支持一云多端，助力快速构建小程序、Web应用、移动应用。 云开发静态网站托管支持通过云开发SDK调用服务端资源如：云函数、云存储、云数据库等，从而将静态网站扩展为全栈网站。 无论是腾讯云·云开发用户，还是小程序·云开发用户，只要开通按量付费，即可享有云开发静态网站托管服务。 作者介绍 陈碧棋，前端开发工程师，熟悉React、NodeJS，在小程序、云开发方面有深入研究，通过云开发开发多套商用小程序，热衷于新技术的向往，《小程序·云开发实战智慧衣橱小程序》直播课讲师。作为小程序云开发的布道师，负责视频课程方向。 系统依赖在进行后续的内容前，请先确保你的电脑中安装了 Node.js 运行环境。如果没有安装，可以访问 nodejs.org  下载安装。 安装云开发 cli 工具 和 React脚手架在配置好 NodeJs环境后，执行如下命令，安装云开发 cli 工具以及 React脚手架： npm install -g @cloudbase/cli create-react-app npx create-react-app reactdemo 本地初始化一个React项目过程中脚手架会自动安装项目中需要的相关依赖，安装完成后可以看到下面这样的输出： [图片] 安装完成之后进入到项目目录，启动本地预览，成功后项目将会运行在本地的3000端口： cd reactdemo npm run start [图片] 在浏览器中打开localhost:3000，可以看到React的界面，这样说明成功完成了本地开发的项目搭建： [图片] 创建云开发环境创建一个云开发环境用来部署React项目，可以从微信开发工具创建，也可以通过腾讯云控制台，在产品中找到云开发，这边举例如何从腾讯云中找到云开发： [图片] 进入到云开发的管理控制台，点击新建环境，或者使用现有的环境来进行部署： [图片] 新建一个环境，或者使用已创建的环境，注意这里计费方式需要选择按量计费，因为只有按量计费才可以进行开通静态网站。 [图片] 开通环境后，有一个环境ID，这个ID后续会使用到，点击对应的环境进入环境的管理页面，点击菜单栏中的静态网站，开通静态网站服务： [图片] 出现下面图示的界面，说明已经开通成功了。 [图片] 现在我们通过云开发的CLI来完成React项目的部署。 初始化云开发CLI完成了云开发环境的配置后，需要登陆云开发 cli ，从而实现借助 cli 来进行部署（当然， 也可以通过网页端直接上传） 在命令行中输入 cloudbase login [图片] 将会跳转到云开发控制台页面进行授权， [图片] 确认授权后出现下图的界面，证明登陆成功了，同时有个小 tips，就是 cloudbase 可以使用简写命令 tcb： [图片] 打包React项目并部署回到React项目目录中执行yarn build对项目进行打包，React脚手架将会默认将文件打包到build的目录下： [图片] 打包完成后，进入到build后的目录执行如下命令来进行部署，envID需要替换成自己的envID： tcb hosting:deploy -e envId 部署完成后，就可以进行预览了： [图片] 线上访问进入对应环境设置页面，可以找到默认的的域名，点击域名，就可以看到你刚刚部署React项目，由于默认域名仅供测试使用，限制下行速度10KB/S。 [图片] 如果需要对外正式提供网站服务，最好绑定已备案的自定义域名。 [图片] 总结只需简单的几步，你就可以轻松实现将React生成的SPA应用部署到云开发上，不需要去购买服务器来进行部署，也不用去部署在Github上无法忍受的龟速！省去服务器购买的费用，还不赶快行动起来？ One More Things9.9元包年静态网站托管服务赞助计划正在进行中，只要是技术站点即可参与。

小程序·云开发的云调用能力，让用户可以免鉴权快速调用微信的开放能力，极大节约了开发成本。现在，大家期待已久的云开发 CMS 内容管理系统，终于上线啦！顺便提示，接下来还可以二次开发哦！ 云开发 CMS 管理系统是什么？ 云开发 CMS 内容管理系统是云开发提供的一个扩展程序，可以在云开发控制台一键安装在自己的云开发环境中，方便开发人员和内容运营者随时随地管理小程序 / Web 等多端云开发内容数据。不用编写代码就可以使用，还提供了 PC /移动端浏览器访问支持，支持文本、富文本、图片、文件、关联类型等多种类型的可视化编辑。 [图片] 先来看看云开发CMS的"庐山真面目" 首先我们通过几张截图来直观感受一下 CMS 内容管理系统扩展： 图1 云开发控制台的安装界面截图 [图片] 图2 安装并配置好内容的 CMS 内容管理系统界面演示 [图片] 图3 CMS 内容管理系统界面的移动端演示 [图片] 云开发 CMS 内容管理系统有哪些功能特性 ？ 特性 介绍 免开发 基于后台建模配置生成内容管理界面，无须编写代码 多端适配 支持 PC/移动端访问和管理内容 功能丰富 支持文本、富文本、图片、文件 等多种类型内容的可视化编辑，并且支持内容关联 权限控制 系统基于管理员/运营者两种身份角色的访问控制 外部系统集成 支持 Webhook 接口，可以用于在运营修改修改内容后通知外部系统，如自动构建静态网站、发送通知等 数据源兼容 支持管理小程序/ Web / 移动端的云开发数据，支持管理已有数据集合，也可以在 CMS 后台创建新的内容和数据集合 部署简单 可在云开发控制台扩展管理界面一键部署和升级 什么场景下适合使用 CMS ？ 1. 适用于需要为小程序应用增加一个运营管理后台的业务 小程序应用有偏运营方面的文章编辑和发布、运营活动配置、素材管理等数据管理需求，使用 CMS 扩展之后，不用手动线上修改 db 数据，也不用投入人力物力开发管理后台，可以随时随地使用自己环境下部署的 CMS 内容管理系统来管理，同时还支持区分管理员和运营者的身份权限。 2. 适用于快速开发内容型的网站应用、小程序应用等场景 CMS 内容管理系统还可以帮助开发者提升开发网站应用、小程序应用的效率，省去一部分后端开发工作。例如安装了CMS 扩展之后，解决了内容和数据的管理和生产问题，直接可以结合前端应用框架读取 db 数据进行渲染。例如基于 CMS 可以快速开发博客、企业官网等小程序/网站应用，最后悄悄透露一下，云开发的官网 (http://cloudbase.net/) 就是基于 CMS 扩展 + Next.js + 云开发静态托管搭建和部署的。 如何安装和使用 CMS ？ 第一步：切换为按量付费 由于 CMS 扩展需要用到静态网站托管资源，必须在按量计费的环境下才可以部署，因此首先要切换计费方式为按量付费。 1. 微信小程序开发者 登录微信开发者工具-云开发控制台 在【云开发控制台】-【设置】-【环境设置】-【支付方式】中点击切换【按量付费】即可。 注意：这里需要先保证腾讯云账户中是有充值金额的哦~ [图片] 2. 腾讯云开发者 登录腾讯云云开发控制台 在【云开发 CloudBase 控制台】-【环境】-【资源购买】-【计费模式】中点击【切换按量付费】即可。 [图片] 第二步：在腾讯云控制台安装扩展 登录腾讯云控制台 微信小程序开发者需要使用微信公众号登录! [图片] 在【云开发 CloudBase 控制台】-【扩展能力】-【扩展管理】中找到 CMS内容管理系统 扩展进行安装 安装时需要进行资源的授权和扩展程序的配置，比如管理员和运营者的账号密码配置等，同时需要提供自定义登录的密钥，可以点击自定义登录密钥旁边的小图标了解如何填写。 [图片] 第三步：使用 CMS 内容管理系统 完成【CMS内容管理系统】的安装以后，然后访问该扩展的管理页，可以在【扩展运行方式】Tab 查看使用指引，依照文档完成 CMS 的使用，下面简单介绍一下快速上手的步骤，更多细节可以参考运行方式。 [图片] 访问 CMS 系统 CMS 扩展已经部署在当前环境下的静态网站托管中，访问路径为“静态托管的默认域名+安装设置的部署路径” 访问地址的格式如下： [代码]云开发静态托管默认域名/部署路径[代码]，例如 [代码]https://xxxx.tcloudbaseapp.com/tcb-cms/[代码] 账号登录 打开 CMS 系统后首先会提示需要登录，我们首先使用使用安装扩展时设置的管理员账号和密码进行登录 内容建模 登录成功后，首先需要进行内容的建模设置，例如我们想为自己的博客应用（小程序/网站）来生成管理界面。 假设当前已有一个管理 文章的数据库集合 [代码]articles[代码]，我们可以在 CMS 管理后台新建一个 “文章” 内容（如果新建内容的时候指定的集合名不存在，CMS 扩展会自动新建集合）来生成“文章”类型的内容管理界面。 假设数据库集合 [代码]articles[代码] 的结构如下： 字段名 类型 描述 _id ID 文章唯一 id name String 文章标题 cover String 封面图，这里存放云开发的存储的文件的 cloudID content String 文章内容，采用 markdown 格式 author ID 作者的用户 id createTime DateTime 创建时间 updateTime DateTime 更新时间 tag String[] 标签，例如 [代码]["serverless","cms"][代码] category String[] 分类，例如 [代码]["前端","开发"][代码] 我们在“内容设置”中点击“新建”来创建“文章”类型时，可以对照上面的集合数据把字段类型和字段的限制进行配置，例如封面图可以直接选择 “图片”字段类型，文章内容可以直接选择 “Markdown” 类型，这样在生成的管理界面里可以直接上传图片和通过编辑器编写文章，保存在数据库集合的时候，依然会保存为数据库支持的类型，图片会存储为云存储的 CloudID, 内容会存储为字符串等。 [图片] 创建并保存之后会自动刷新生成”文章“的运营界面 管理内容 接下来就可以进行运营管理内容操作了，可以使用运营者身份登录，对新创建的“文章”进行操作，我们可以新建一篇文章。 [图片] 文章发布成功后，即可在文章列表中看到这篇文章 [图片] 使用内容数据 采用 CMS 管理的内容，依然可以通过云开发各端 SDK 进行访问（需要注意的是在前端访问时，需要正确设置数据库的安全规则设置，例如设置为所有用户可读，仅创建者可写）。 例如，在上面的例子里，我们需要在云函数中获取文章的标签是 [代码]CloudBase[代码] 的最新 10 条文章，可以采用以下代码来获取数据： [代码]db.collection("articles") .where({ tag: "CloudBase" }) .orderBy("createTime", "desc") .limit(10) .get(); [代码] 获取到内容数据就可以在各种场景使用了，比如在小程序/ Web 中构建应用和网站，具体的CMS + 应用开发的实践可以关注后期我们的实践教程。 [图片] 后续，云开发CMS内容管理系统将支持二次开发，用户可以自由定制自己的管理后台。云开发将始终坚持，为开发者提供一站式云服务！ [图片] 最后，小编赠上《5分钟部署云开发CMS系统》教程，帮助大家快快上车！ 视频链接： https://v.qq.com/x/page/f09687on1qv.html 文档链接 ：（CMS 内容管理系统链接） https://cloud.tencent.com/document/product/876/44547

可能已经有不少静态网站的教程了，但这次拎包哥带来最核心的东西，花最少的时间，有最大的享受！ 跟着我走，半小时内收获（白嫖）自己的免费网址！ 1.登录腾讯云 - 云产品 - 云开发cloudbase [图片] 2.点击新建环境 - 创建 - 按量计费 - 开启免费资源 因为只能有一个免费环境，所以千万不要先开通免费的包年包月环境（预付费）环境。 如果真的手残开通了，又没有怎么用这个免费的包年包月的话，可以选择注销（7天隔离期过后可以注销环境），再开通。[图片] 3.点击你新建的环境 - 静态网站托管 - 开通静态网站托管 [图片] 4.静态网站托管 - 上传文件 - 上传你的index.html文件 [图片] 5.静态网站托管 - 基础配置 - 默认域名 点击这个网址，你就会看到你刚上传的index.html里的内容。 不用漫长的3个月备案，你已经有一条属于自己的专属域名。虽然下行速度仅100KB/S， 但对于开放平台里的第三方平台的官网演示（官方，只有你才会看的）和平时自己的HTML XJB玩玩已经差不多ok了。 [图片] 6.这些都是基础中的基础，后面的大家慢慢玩我就不写了，因为不能即抄即用真的没人点赞。 是不是很阔以？ [图片] =================end===================

云开发静态托管是云开发提供的静态网站托管的能力，静态资源（HTML、CSS、JavaScript、字体等）的分发由腾讯云对象存储 COS 和拥有多个边缘网点的腾讯云 CDN 提供支持. 在云开发静态托管中，你同样可以托管一个 Vue.js 项目，接下来，我就介绍一下应该如何将一个 Vue.js 项目部署到云开发静态网站托管服务中。 初始化一个 Vue 项目 首先，使用 Vue cli 创建一个项目，来作为演示。同时，为了符合日常使用场景，引入 Vue Router 组件，并配置 Router 为 Histroy 模式。 [代码]vue create cloudbase cd cloudbase vue add router [代码] [图片] 执行完成后，可以执行 npm run serve 启动预览，查看一下效果 [图片] 创建云开发环境 完成了Vue 项目的创建后，接下来创建云开发的环境,访问云开发控制台,点击上方的新建环境，创建一个新的环境。在弹出的界面中输入你的环境名称，并选择按量计费，点击下方的立即开通，就可以开通一个云开发环境了。 [图片] 等待环境初始化完成后，点击刚刚创建好的环境，进入到详情页，点击左侧的环境设置，可以看到环境的 ID， 记住这里的环境 ID，后续上传文件的时候会用到。 [图片] 再次选择左侧列表的「静态网站托管」 [图片] 在静态网站托管页面选择立即开通。 [图片] 等待静态网站托管服务开通后，你就可以看到这样的界面。点击上方的「设置」，可以看到你的测试域名，后续上传后，你就可以在这个测试域名中查看你的站点。 [图片] 初始化云开发 Cli 完成了环境的创建后，接下来配置云开发 Cli。 安装云开发 Cli 并登陆 首先，我们执行命令安装云开发 Cli [代码]npm i -g @cloudbase/cli [代码] 安装完成后， 执行命令登陆 Cli [代码]tcb login [代码] 系统会自动打开浏览器，你只需要在弹出的页面中登陆你的腾讯云账号，并授予 Cli 权限就可以操作了。 上传文件 完成了 Cli 的登陆后，接下来就可以上传文件了。首先，进入到 vue 项目的 dist 目录: [代码]cd dist [代码] ，然后，执行命令来上传文件 [代码]tcb hosting:deploy -e envId [代码] 这里你需要将 envId 替换为你自己的环境 ID，比如我的替换为 website-126ca8，结果如下 [图片] 可以看到，我成功的上传了文件，这个时候，我可以直接访问我的测试域名来查看我刚刚上传的 Vue.js 项目。 当你看到这样的界面时，就说明你配置成功了。 [图片] 一些配置 在 Vue 中，我们常常会用到 Vue Router 的 History Mode 来做更好的 URL，但如果你不做任何配置，在云开发的 Hosting 上就会导致访问时出现 404 错误 [图片] 这个问题可以通过在云开发静态网站托管的设置页面将索引文档和错误文档均设置为 index.html 即可解决。 [图片] 总结 云开发的静态托管中想要上传 Vue 项目也十分简单，你只需要初始化一个 Vue 项目，并使用云开发的 CLi 工具就可以完成文件的上传。此外，还可以通过修改索引文档和错误文档来实现 Vue Router 的 History Mode 的支持。

前面给大家讲过一个借助小程序云开发实现微信支付的，但是那个操作稍微有点繁琐，并且还会经常出现问题，今天就给大家讲一个简单的，并且借助官方支付api实现小程序支付功能。 传送门： 借助小程序云开发实现小程序支付功能 老规矩，先看本节效果图 [图片] 我们实现这个支付功能完全是借助小程序云开发实现的，不用搭建自己的服务器，不用买域名，不用备案域名，不用支持https。只需要一个简单的云函数，就可以轻松的实现微信小程序支付功能。 核心代码就下面这些： [图片] 一、创建一个云开发小程序 关于如何创建云开发小程序，这里我就不再做具体讲解。不知道怎么创建云开发小程序的同学，可以去翻看腾讯云云开发公众号内菜单【技术交流-视频教程】中的教学视频。 创建云开发小程序有几点注意的 1.一定不要忘记在app.js里初始化云开发环境。 [图片] 2.创建完云函数后，一定要记得上传 二、创建支付的云函数 1.创建云函数pay [图片] [图片] 三、引入三方依赖tenpay 我们这里引入三方依赖的目的，是创建我们支付时需要的一些参数。我们安装依赖是使用里npm 而npm必须安装node,关于如何安装node，我这里不做讲解，百度一下，网上一大堆。 1.首先右键pay，然后选择在终端中打开 [图片] 2.我们使用npm来安装这个依赖。 在命令行里执行 npm i tenpay [图片] [图片] [图片] 安装完成后，我们的pay云函数会多出一个package.json 文件 [图片] 到这里我们的tenpay依赖就安装好了。 四、编写云函数pay [图片] 完整代码如下 [代码]//云开发实现支付 const cloud = require('wx-server-sdk') cloud.init() //1，引入支付的三方依赖 const tenpay = require('tenpay'); //2，配置支付信息 const config = { appid: '你的小程序appid', mchid: '你的微信商户号', partnerKey: '微信支付安全密钥', notify_url: '支付回调网址,这里可以先随意填一个网址', spbill_create_ip: '127.0.0.1' //这里填这个就可以 }; exports.main = async(event, context) => { const wxContext = cloud.getWXContext() let { orderid, money } = event; //3，初始化支付 const api = tenpay.init(config); let result = await api.getPayParams({ out_trade_no: orderid, body: '商品简单描述', total_fee: money, //订单金额(分), openid: wxContext.OPENID //付款用户的openid }); return result; } [代码] 一定要注意把appid，mchid，partnerKey换成你自己的。 到这里我们获取小程序支付所需参数的云函数代码就编写完成了。 不要忘记上传这个云函数。 [图片] 出现下图就代表上传成功 [图片] 五、写一个简单的页面，用来提交订单，调用pay云函数。 [图片] 这个页面很简单： 1.自己随便编写一个订单号（这个订单号要大于6位） 2.自己随便填写一个订单价（单位是分） 3.点击按钮，调用pay云函数。获取支付所需参数。 下图是官方支付api所需要的一些必须参数。 [图片] 下图是我们调用pay云函数获取的参数，和上图所需要的是不是一样。 [图片] 六、调用wx.requestPayment实现支付 下图是官方的示例代码： [图片] 这里不在做具体讲解了，把完整代码给大家贴出来 [代码]// pages/pay/pay.js Page({ //提交订单 formSubmit: function(e) { let that = this; let formData = e.detail.value console.log('form发生了submit事件，携带数据为：', formData) wx.cloud.callFunction({ name: "pay", data: { orderid: "" + formData.orderid, money: formData.money }, success(res) { console.log("提交成功", res.result) that.pay(res.result) }, fail(res) { console.log("提交失败", res) } }) }, //实现小程序支付 pay(payData) { //官方标准的支付方法 wx.requestPayment({ timeStamp: payData.timeStamp, nonceStr: payData.nonceStr, package: payData.package, //统一下单接口返回的 prepay_id 格式如：prepay_id=*** signType: 'MD5', paySign: payData.paySign, //签名 success(res) { console.log("支付成功", res) }, fail(res) { console.log("支付失败", res) }, complete(res) { console.log("支付完成", res) } }) } }) [代码] 到这里，云开发实现小程序支付的功能就完整实现了。 实现效果 1.调起支付键盘 [图片] 2.支付完成 [图片] 3.log日志，可以看出不同支付状态的回调 [图片] 上图是支付成功的回调，我们可以在支付成功回调时，改变订单支付状态。 下图是支付失败的回调： [图片] 下图是支付完成的状态： [图片] 到这里我们就轻松的实现了微信小程序的支付功能了，是不是很简单啊。 源码地址： https://github.com/TencentCloudBase/Good-practice-tutorial-recommended 如果你有关于使用云开发CloudBase相关的技术故事/技术实战经验想要跟大家分享，欢迎留言联系我们哦~比心！ [图片]

小程序在web-view组件内打开的网页，是否支持h5支付或公众号支付？请官方人员给予明确回答。 打开小程序的调试后，能成功完成支付流程，对此，请给予详细解释！！！ 建议：开发时和正式上线后的功能请保持一致！！！

小程序挂在主体A上面， H5是其它公司的支付页面，支付商户是主体B 请问下在小程序内通过webview打开H5，能成功支付吗。（两个主体不相同，会不会有问题） 麻烦官方，或有相关经验的高人解释下。谢谢

由于业务需要，需要将公众号的页面移植到小程序上，但是公众号上存在支付部分，移植后发现，在手机预览版本调试模式下支付正常，关闭调试模式则无法调用支付JSSDK，当前域名为HTTPS