web怎么插入图片_双端之“桥”：小程序端与Web端云开发的跨端研究

导语

腾讯云云开发同时提供了小程序端 SDK 和 Web 端 SDK，那么小程序端和 Web 端云开发之间是否有连通的“桥梁”？本文重点研究打通两端数据的可行性，进而实现同一用户在小程序端和 Web 端(H5)共用一份数据，由此达到页面和数据同时跨端的目的。

一、DEMO 演示

本 DEMO 实现了小程序端 和 Web 端页面跨端，数据互通、共用。

效果展示

二、操作步骤

1、前期准备 (1)准备一个腾讯云帐号和小程序帐号。 (2)给小程序帐号开通云开发，创建云环境 ID。 (3)登录腾讯云帐号 -> 帐号信息 -> 登录方式 -> 关联微信公众号(小程序管理员微信扫码后选择上面的小程序帐号进行关联)。 (4)退出腾讯云帐号登录 -> 重新登录时选择微信公众号登录(选择上面关联的小程序帐号进行登录)。 2、配置 Web 端云开发 (1) 进入腾讯 云 TCB 页面，点击在小程序帐号中创建的云环境 ID，进入页面。

(2)点击用户管理 -> 登录设置 -> 启用微信公众平台登录方式 -> 登记你的微信服务号 AppID 和 AppSecret，用于 H5 微信登录获取用户信息。在微信服务号管理端需配置授权回调域名为你的 H5 站点域名，才能正常登录。目前 Web 端云开发暂不支持匿名访问，需要在初始化资源后，立即调用登录授权方法，登录后才可正常调用 TCB 提供的功能接口。

(3)在用户管理 -> 登录设置 -> WEB 安全域名登记你的 H5 站点域名，没有配安全域名页面会报错。

3、在小程序和 Web 中进行云开发

(1)在小程序中往云数据库插入数据，并在 Web 端实时获取小程序端插入的数据。

(2)在 Web 端往云数据库插入数据，并在小程序端实时获取 Web 端插入的数据。

这里注意云数据库的权限设置问题，开发完的 DEMO 如上(DEMO 演示)，新手请看云开发官方文档。

三、优势

1、在 Web 端接入云开发，支持微信天然鉴权，自动登录，开发者无需自己部署微信网页授权登录后端服务。 2、Web 端云开发，提供与小程序端云开发一样的用户管理界面、数据库、文件存储、云函数、统计分析。

四、需要注意的几点

1、Web 端云开发用户在微信网页授权登录后，用户信息未自动记录到用户管理 -> 用户列表中。 2、Web 端云开发写入数据库时，记录的 _openid 实则为用户 uuid，不是用户在微信服务号中真实的 openid。 而小程序端云开发在写入数据库时，记录的 _openid 为用户在小程序中真实的 openid。 3、同个用户进入小程序端和 Web 端，记录到云数据库的是两个 openid(因为微信网页登录和小程序登录本身是两个 appid，这里 Web 端记录的 openid 实则为 uuid)，也就相当于两个用户。 这里官方缺少 openid 转换接口去判断两个 openid 是否为同一用户，如果有这个接口，开发者就可打通同一用户在小程序端和 Web 端的数据，使其共用一份数据。

当然，开发者也可根据微信官方提供的 unionid 机制自行判断是否为同一个用户，进而把同一个用户在小程序端和 Web 端的数据进行打通，unionid 机制需要两个 appid 提前关联到同一个微信开放平台帐号。

☁

 更多精彩 

点击下方图片即可阅读

关注我们，离新的开发模式更近

云开发

Tencent CloudBase

      点击在看让更多人发现精彩