爽Boy
爽Boy
  • 发布:2020-12-16 17:36
  • 更新:2021-09-01 08:15
  • 阅读:5181

uni-app H5分享到微信 配合uniCloud 完整流程

分类:uni-app

【小白,勿喷】第一次尝试,花了差不多一天的时间,仅仅是Demo
【需求说明】将自己的H5 vlog 分享给微信好友或是微信朋友圈时 带图文,总之好看即可,不是单纯的链接就行
以下会分以下处理:

我在DCLOUD社区里面找了好久,也没有找到完整的教程,索性,自己去摸索!

1.注册一个 微信 公众号测试号 https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo

参数配置:且看下图:

一一讲解:
url:

  • 这里需要创建一个云函数 getWXToken 这个是云函数的名称(h5绑定云函数不细讲)
  • 云函数url 化 进入云函数列表 官方文档
  • 云函数里面我仅用于测试,没有做验证;如果没有配置好云函数,填写链接和token完,会提示配置失败,所以先配置好,再点击配置即可
    代码如下:
    'use strict';  
    exports.main = async (event, context) => {  
    //event为客户端上传的参数  
    console.log('event : ', event)  
    let WECHAT_TOKEN = "这里是在测试公众号填写的token";  
    let params = event.queryStringParameters  
    if(params){  
        let signature = params.signature  
        let nonce = params.nonce  
        let echostr = params.echostr  
        let timestamp = params.timestamp  
        return echostr //返回随机字符串即可  
    }  
    return event  
    };

    接下来是:JS接口安全域名
    这里我用的是本地测试,所以就将项目运行,然后获取 即可。h5使用的是hash模式 具体配置参考 H5去除# https://blog.csdn.net/impossible1994727/article/details/111183533

配置公众号和H5项目,接下里开始准备编写云函数:

获取签名:

获取签名,这里有用到官方提供的Demo里面的node的代码 下载链接
http://caibaojian.com/wxwiki/2c93473a5a98ae637b8af251cae883ffed11cf5e.zip

云函数名称 wxAction

引入微信jssdk 文章参考

https://ask.dcloud.net.cn/article/36813

jwx.js 我这边稍作修改

在页面中调用:这里看个人如何处理分享逻辑,怎么喜欢怎么来

initShare(){  
    if (this.$jwx && this.$jwx.isWechat()) {  
                    uni.showToast({  
                        title:'微信环境'  
                    })  
                    this.$jwx.initJssdk({shareTitle:'微信分享测试',shareDesc:'我是分享的描述'})  
                }  
    },  

做完以上 的步骤之后,就开始来测试吧。使用微信开发者工具进行测试

当出现以上的界面是,说明测试成功了

感谢以上的大神的文章参考
完整内容请看 完整文章 https://blog.csdn.net/weixin_41104307/article/details/111296303

吐槽一下,由于内容比较多,写完之后,居然发不出,提示FEIFA。我也醉了。

1 关注 分享
此言很差矣

要回复文章请先登录注册

爽Boy

爽Boy (作者)

回复 xuwantang :
微信内置的方法,我也不是很轻清楚,没有试过,可能是生命周期的onsharexxxxx
2021-09-01 08:15
xuwantang

xuwantang

请问下,如果点右上角三个点分享,点击后会触发什么方法
2021-07-26 10:19
此言很差矣

此言很差矣

有个疑惑,为什么开发者认证只要返回echostr,而不是签名比对后的结果返回布尔值,是uniCloud内部做了处理吗
2021-01-23 01:44
爽Boy

爽Boy (作者)

实在抱歉,内容无法发出来;老是提示 非法内容。没办法,完整的可以看 这里:https://blog.csdn.net/weixin_41104307/article/details/111296303
2020-12-16 17:37