美文网首页
APP分享小程序到微信(cordova-plugin-wecha

APP分享小程序到微信(cordova-plugin-wecha

作者: IT姑凉 | 来源:发表于2019-12-26 21:11 被阅读0次

1、发起分享的 App 与小程序属于同一微信开放平台帐号。
2、支持分享小程序类型消息至会话,暂不支持分享至朋友圈。
3、若客户端版本低于 6.5.6 或在 iPad 客户端接收,小程序类型分享将自动转成网页类型分享。开发者必须填写网页链接字段,确保低版本客户端能正常打开网页链接。
详见:官方文档

一、微信开放平台,创建移动应用,关联并绑定小程序

1、创建移动应用
2、关联小程序

绑定小程序(开放平台账号需要是开发者资质认证的)

二、APP分享小程序到微信

1、创建cordova项目
$ cordova create wechat-share com.xxx.test  //com.xxx.test 同开放平台的移动应用的包名一致
$ cd wechat-share
2、安装插件

cordova 插件支持分享小程序:cordova-plugin-wechat

$ cordova plugin add cordova-plugin-wechat  --variable wechatappid=YOUR_WECHAT_APPID
//YOUR_WECHAT_APPID 微信开放平台创建的移动应用的appid
3、按照插件修改index.html

3.1 APP直接打开小程序

<button onclick="openMiniProgram()">测试打开小程序</button>
...
function openMiniProgram(){
   var params = {
      userName: 'gh_aaaaaaaaaaaa', // 小程序原始id,不是appid
      path: "pages/home/home", // 小程序的页面路径
      miniprogramType: Wechat.Mini.RELEASE // RELEASE 正式版、TEST 测试版、PREVIEW 体验版 
   };

   Wechat.openMiniProgram(params,function(data){
      alert("直接打开小程序再跳转回来的参数:"+JSON.stringify(data)); // data:{extMsg:""}  extMsg: Corresponds to the app-parameter attribute in the Mini Program component <button open-type="launchApp">
   },function(){
      alert('error');
   })
}

3.2 分享小程序卡片到微信会话

<button onclick="shareMiniProgram()">分享小程序卡片到微信</button>
...
function shareMiniProgram(){
    Wechat.share({
        message: {
            title: "测试分享小程序卡片到微信-标题",
            description: "测试分享小程序卡片到微信-描述",
            thumb: "www/img/logo.png",
            media: {
                type: Wechat.Type.MINI,
                webpageUrl: "https://itguliang.com", // 兼容低版本的网页链接
                userName: "gh_aaaaaaaaaaaa", // 小程序原始id,不是appid
                path: "pages/home/home",    // 小程序的页面路径
                hdImageData: "https://www.itguliang.com/images/logo.png", // 程序新版本的预览图二进制数据 不超过128kb 支持 地址 base64 temp
                withShareTicket: true, // 是否使用带shareTicket的分享
                miniprogramType: Wechat.Mini.RELEASE // RELEASE 正式版、TEST 测试版、PREVIEW 体验版 
            }
        },
        scene: Wechat.Scene.SESSION   // 小程序仅支持聊天界面
    }, function () {
        alert("Success");
    }, function (reason) {
        alert("Failed: " + reason);
    });
}
4、Android端测试
$ cordova platform add android

4.1 生成签名

$ keytool -genkey -v -keystore wechat-share-release.keystore -alias wechat-share -keyalg RSA -validity 4000

执行命令之后会提示你输入密码,设置一些公司名称之类的,密码记住,其他随意
wechat-share-release.keystore:签名文件的名称
wechat-share :签名文件的别名
4000:有效天数
命令执行完之后,应该会在当前目录下创建一个名为wechat-share-release.keystore

4.2 打包

$ cordova build android --release -- --keystore="wechat-share-release.keystore" --alias=wechat-share --storePassword=itguliang --password=itguliang

4.3 获取签名信息,微信开放平台-应用详情-开发信息,点击修改,修改android平台的签名信息

签名生成工具下载地址


Android手机安装打包好的release包,然后安装签名生成工具,打开签名生成工具

按提示填写应用包名,获取签名信息,修改微信开放平台对应移动应用的签名信息即可

运行Apk,分享成功:

APP端界面 分享小程序
5、IOS端测试
$ cordova platform add ios

原创文章,如需转载请注明出处,谢谢!

相关文章

网友评论

      本文标题:APP分享小程序到微信(cordova-plugin-wecha

      本文链接:https://www.haomeiwen.com/subject/hlkcoctx.html