APP开发平台 > Blog > WebAPP应用添加微信分享功能

WebAPP添加微信分享功能

  首先,实现微信分享需要具备的条件:

  ❶ 微信开放平台账号并且提交移动应用需要通过审核 参考官方教程:http://docs.apicloud.com/APICloud/开放平台接入指南/weChat

  APP微信分享需要微信开放平台的appid,而不是公众平台appid,开发小白千万别把这两个弄混了。

  ❷ 模块中添加WX模块

  ❸ 在APICloud控制台编辑应用,添加好证书

  接下来,分享实现微信分享的步骤:

  主要分享代码,应用管理下面一带而过

  ➀ 首先在APICloud控制台,创建一个应用,选择类型为webAPP,填入名称,描述,还有你的网址,如下图:

  ➁ 点击新创建的应用,然后,选择 云编译 编译出安卓的APP

  ➂ 把app下载到电脑,将后缀名.apk 改为 .zip ,解压 ---》寻找路径\assets\widget ----》将widget 里的内容复制到你的APP编辑工具下即可开始编辑了

  ➃ 打开config.xlm 在 前面添加

<feature name="weixin">
   <param name="urlScheme" value="微信开放平台APPID,改成你自己的"/>
   <param name="apiKey" value="微信开放平台APPID,改成你自己的"/>
   <param name="apiSecret" value="微信开放平台apiSecret,改成你自己的"/>
 </feature>

  ➄ 打开index.html 在 前面,添加

<script>
               function wx(title,description,thumb,contentUrl,wx_scene,wxpc) {
               var v_title = title;
               var v_description = description;
               var v_thumb = thumb;
               var v_contentUrl = contentUrl;
               var v_scene = wx_scene;
               var wx = api.require('wx');
               var wx_thumb= wxpc;
                          api.download({
                        url: thumb,
                        savePath: wxpc,
                        report: false,
                        cache: true,
                        allowResume: true
                        },function( ret, err ){
                        if(ret.state==1){
                        wx.isInstalled(function(ret, err) {
                               if (ret.installed) {
                                       wx.shareWebpage({
                                               apiKey : '这里填你的APPID',
                                               scene : v_scene,
                                               title : v_title,
                                               description : v_description,
                                               thumb : wx_thumb,
                                               contentUrl : v_contentUrl
                                       }, function(ret, err) {
                                               if (ret.status) {
                                                       alert('分享成功');
                                               } else {
                                                       alert('分享失败');
                                                       if(err.code ==3){
                                                       api.toast({
                                                       msg: '发送失败',
                                                       duration:1500,
                                                       location:'middle'
                                                       });
                                                       }
                                               }
                                       });
                               } else {
                                       alert('当前设备未安装微信客户端');
                               }
                       });
                         }
                         else{
                          alert('分享图片下载失败');
                          }
                         }); 


               }
       </script>    

  ➅ 剩下的代码,需要在你的网站中完成,将下面的代码放入你需要分享的页面,蓝色部分,分别是标题、描述、图片、链接地址、需要根据你的网站页面,进行修改。

<a><p>发送给好友</p></a>
<a><p>分享到朋友圈</p></a>
       
       <script>
       var wx_scene; 
 apiready = function() {
               };
               function wx(w_scene) {
                               wx_scene = w_scene;
                       api.execScript({
                               name : 'root',  //由于直接在index上使用openFrame,因此只需name root。
                               script : "wx('$bd['name']','$bd['name']','http://www.lianooo.com/{if $bd['logo']}$bd['logo']{else}source/plugin/aljbd/images/zz.jpg{/if}','http://www.lianooo.com/plugin.php?id=aljbd&act=view&bid={$bd['id']}','"+wx_scene+"','fs://thumb_lian_{$bd['id']}.png')" //这里的六个参数分别在本地页面出发方法后由php传给js再传给本地的index,分别是:分享标题,描述,缩略图地址,分享类型(好友/朋友圈),图片缓存到本地名称。
                       });
               }
</script>

  

  ▌本文作者:APICloud 版主 链www.apicloud.com


2017-12-26 来源:APICloud

高效的App定制平台,保上线、便宜、快!

提交APP定制开发需求
qq客服咨询