云开发静态网站的创建

1.官网上下载静态网站事例

2.将下载下来的代码打开将html里面含有替换成自己小程序的信息：

小程序 AppID：填入你的小程序 AppID
云开发环境 ID：填入你的开通了静态网站托管的云开发环境 ID
小程序原始账号 ID：填入要跳转的小程序原始账号 ID（gh_ 开头）
小程序页面路径：填入要跳转到的小程序的页面路径
小程序名称：填入要跳转到的小程序名称

3.完成静态页面的内容后，微信开发者工具 => 云开发 => 更多 => 静态网站 => 上传文件
4.上传成功后，可以在文件后面点击详情 => 下载地址，进行访问

云函数及copy-webpack-plugin

1.uniapp 项目中创建存放云函数的文件夹，我这里创建的名为 cloud，并在其中创建个js文件随便写点什么（为了后面识别到目录）

2.uniapp manifest.json文件关联云函数目录(目录名称和刚才建的目录名一致，我的是cloud)

"mp-weixin" : {"appid" : "xxxxxxxx","cloudfunctionRoot" : "./cloud/"// 这一行就是标记云函数目录的字段},

3.引入copy-webpack-plugin，新建vue.config.js,

（copy-webpack-plugin插件的作用是将项目中的某单个文件或整个文件夹在打包的时候复制一份到打包后的文件夹中，避免了每次将uniapp打包后丢失云函数）

const path = require('path')
const CopyWebpackPlugin = require('copy-webpack-plugin')module.exports = {configureWebpack: {plugins: [new CopyWebpackPlugin([{from: path.join(__dirname, 'cloud'),//关联cloud目录to: path.join(__dirname, 'unpackage/dist', process.env.NODE_ENV === 'production' ? 'build' : 'dev', process.env.UNI_PLATFORM, 'cloud')//关联cloud目录}])]}
}

4.运行项目，根据报错安装插件，

npm install -save copy-webpack-plugin

5.HBuilderX运行小程序到小程序开发工具
6.右键函数目录 => 新建Node.js 云函数（我这里命名为open）

7.修改云函数中的index.js 文件，替换为官网的事例，并修改为自己的页面路径
8.完成云函数后，右键云函数（我这里命名为open），上传并部署

9.这时候微信开发工具 =》云开发 => 云函数，能看到刚才部署的open函数
10.云函数创建好后，将其代码复制到Hbuilder X的uni-app项目，后续代码改动可直接在uni-app项目中修改，但是云函数上传部署依旧在微信开发者工具。

安装copy-webpack-plugin可能遇到的问题

1.报错TypeError: compilation.getCache is not a function
主要是安装的copy-webpack-plugin版本太高，而当前webpack版本太低，不支持，高版本的配置语法也变了。
移除copy-webpack-plugin, 安装5.0版本的copy-webpack-plugin即可解决！

npm install -save copy-webpack-plugin@5.0

静态网站和云函数的搭配使用

静态网站代码

1.onclick="openWeapp()" 页面点击事件调用云函数方法

name：对应云函数名称， action：云函数中的方法名

async function openWeapp(onBeforeJump) {var c = window.cconst res = await c.callFunction({name: 'open', //对应云函数名称data: {action: 'getUrlScheme',//云函数中的方法名},})console.warn(res)if (onBeforeJump) {onBeforeJump()}location.href = res.result.openlink
}

2.wx-open-launch-weapp 用于处理在微信浏览器环境的跳转小程序，

path：页面的跳转路径，可拼接参数，如：path=“/pages/webview/webview?url=xxxx”

云函数代码

1.getUrlScheme 方法

async function getUrlScheme() {return cloud.openapi.urlscheme.generate({jumpWxa: {path: '/pages/webview/webview', // 页面跳转小程序的页面路径query: '',//参数},// 如果想不过期则置为 false，并可以存到数据库isExpire: false,// 一分钟有效期expireTime: parseInt(Date.now() / 1000 + 60),})
}

云开发权限配置

需要将权限都打开，否则可能会导致不能正常跳转

1.云开发 => 设置 => 权限设置，将未登录用户访问权限、云托管令牌使用权限等权限打开
2.云开发 => 云函数 => 云函数权限设置 => 修改 => 允许所有用户访问

uniapp 微信云开发静态网站和云函数跳转小程序相关推荐

云开发--实现发送邮件+短信+链接跳转小程序功能
目录 1.小程序实现发送邮件准备一个qq邮箱,并启动SMTP服务确定小程序云开发环境,并新建云函数 2.小程序实现发送短信确定应用确定签名确定模板编写云函数-发送短信 3.链接跳转小程序 ...
1分钟部署一个属于自己的网站，借助云开发静态网站部署属于自己的网站,部署vue静态网站
今天来教大家部署一个属于自己的第一个静态网站,因为这里借助小程序云开发的静态服务器资源,所以可以轻松的实现自己网站的部署,部署完以后可以在电脑浏览器,手机浏览器,微信公众号里面展示. 老规矩,先看效果 ...
小程序·云开发实战：SCRM社交化客户管理小程序
点击观看大咖分享随着微信小程序不断发展壮大,传统的 CRM 厂商也在不断向微信上迁移,毕竟微信的背后是巨大的用户和流量,还有极其方便的移动支付渠道.用微信小程序来做CRM,和以前的做法存在一些比较明 ...
小程序·云开发实战：实现 AI 智能名片识别小程序
开发者在开发小程序时往往需要花费精力进行后端基础设施建设及维护,但利用小程序·云开发开发,则可以跳开这一环节,无需再搭建服务器. 本次分享是针对对小程序·云开发感兴趣的朋友推出的入门课程,内容以基础+ ...
微信小程序实现微信APP上的扫一扫扫码跳到小程序对应的结果页面和签字等功能
最近做了一个小程序项目,这个小程序是搭配APP端使用的,大概需求是这样的,用户用微信的扫一扫或小程序首页的扫一扫都可以实现对APP上的二维码进行扫码识别,识别成功之后跳到页面进行渲染,然后用户可以对其 ...
名片识别 php,小程序云开发实战：实现 AI 智能名片识别小程序
本次分享是针对对小程序·云开发感兴趣的朋友推出的入门课程,内容以基础+实战的方式呈现,通过实战"名片小程序"开发,讲解云开发的功能与开发优势,为开发者提供提高开发效率的方法与灵感. ...
实战丨用云开发快速构建最美AI毕业照小程序
项目背景为什么要做这个小程序疫情原因,2020年的毕业季也不同了.很多毕业生没有举办正式的毕业典礼,也没有照毕业照,觉得这是人生的一大遗憾.为了弥补这一遗憾,我尝试用云开发快速实现一个云毕业照小程 ...
使用小程序·云开发静态托管实现免鉴权h5跳转小程序
背景微信虽然推出了微信开放标签可以实现h5跳转小程序. 但是,开发者在使用之前要在公众号设置JS接口安全域名,不仅限制个数还限制修改次数,而且在使用之前还得获取access_token.ticket ...
从微信小程序到QQ小程序：云开发CloudBase的一云多端实践
本文整理自<IGS.全球数字文创大会>上腾讯云云开发CloudBase团队,高级产品经理史燕飞的分享,主要介绍云开发CloudBase的多端探索,及对QQ小程序开发者的全栈支持. 前言 Q ...

uniapp 微信云开发静态网站和云函数跳转小程序