zoukankan      html  css  js  c++  java
  • JS微信分享不好写?来封装一下

    微信开发这块,作为开发工程师来说,一般是避免不了的,也好像发现一些朋友写微信分享都是在每个页面一大把一大把的代码。

    代码冗余,即便是复制过来再改也很麻烦。

    之前自己封装了一下js,今天来分享一下,希望能给看到的园友带来一点思路,当然希望能帮忙一起改进。

    我的思路:

      1.可以分享到四个地方QQ,朋友,朋友圈,微博,一般情况下他们是一致的,可以配置一个初始参数,赋值给它们四个

      2.如果出现不一致,因为前面已经赋值了初始参数,这时再把需要不一致的内容替换掉

    实现主要代码:

    setData: function(){
            var self = this;
            self.data = {
                title: self.title,
                desc: self.desc,
                link: self.link,
                imgUrl: self.imgUrl,
                type: self.type, // 分享类型,music、video或link,不填默认为link
                dataUrl: self.dataUrl, // 如果type是music或video,则要提供数据链接,默认为空
                success: self.success,
                cancel: self.cancel
            };
            //深度克隆
            self.QQData = JSON.stringify(self.data);
            self.QQData = JSON.parse(self.QQData);
            self.TimeLineData = JSON.stringify(self.data);
            self.TimeLineData = JSON.parse(self.TimeLineData);  
            self.WeiBoData = JSON.stringify(self.data);
            self.WeiBoData = JSON.parse(self.WeiBoData);   

          //反序列化
          self.QQData.success = self.success;
           self.TimeLineData.success = self.success;
              self.WeiBoData.success = self.success;
              self.QQData.cancel = self.cancel;
              self.TimeLineData.cancel = self.cancel;
              self.WeiBoData.cancel = self.cancel;

        }

    wx.ready(function(){
      wx.showOptionMenu();
      if(self.data == '') self.setData();
      wx.onMenuShareQQ(self.QQData);
      wx.onMenuShareAppMessage(self.data);
      wx.onMenuShareTimeline(self.TimeLineData);
      wx.onMenuShareWeibo(self.WeiBoData);

    });

    使用帮助:

    var wxshare = require('wxshare.js');

    如果分享的内容都一致

    wxshare.link = '';
    wxshare.desc = '';
    wxshare.imgUrl = '';
    wxshare.type = '';
    wxshare.dataUrl = '';
    wxshare.start();

    如果有不一致,针对不一致的地方进行修改

    wxshare.link = '';
    wxshare.title = '';
    wxshare.desc = '';
    wxshare.imgUrl = '';
    
    wxshare.setData();//必须加上
    wxshare.TimeLineData.title = ''; 
    wxshare.QQData.desc = '';
    wxshare.start();

    重点说明: setData()

    如果全部的分享内容都一样,直接执行start(), 判断data参数空为true,会执行setData(),
    为四个分享赋值:QQData data TimeLineData WeiboData, 而后初始化

    如果有不一致,首次赋值后,直接调用setData(),为四个参数赋值,之后再根据需求修改不同的对应参数,最后start()初始化。

    --------------------------------------------------------------------------------------------------------------------------------------------

    具体代码 github 地址:   >>>>>>>>>>戳我、戳我、戳我、戳我、戳我<<<<<<<<<<<<

  • 相关阅读:
    [git]使用Idea创建一个git项目
    [git]分支管理策略
    Restful 风格
    [spring boot]idea中实现热部署的方法
    [jquery]JSON.parse()与JSON.stringify()
    [spring mvc]<mvc: annotation-driven />的作用
    [spring mvc][转]<mvc:default-servlet-handler/>的作用
    [mybatis]传值和返回结果
    [spring]@Resource和@Autowired区别对比
    html流程实现
  • 原文地址:https://www.cnblogs.com/1wen/p/4527372.html
Copyright © 2011-2022 走看看