分享绘图 api接入

richard1015 · Jun 25, 2018 · a5ca682 · a5ca682
1 parent a2d9f13
commit a5ca682
Show file tree

Hide file tree

Showing 6 changed files with 211 additions and 132 deletions.
diff --git a/pages/content/content.js b/pages/content/content.js
@@ -8,26 +8,28 @@ Page({
   data: {
     newsArray: [],
     animation: '',
+    shareTitle:"",
+    shareContent:"",
     shareId: 0,
     swiperIndex: 0,
-    previousMargin: 35,//swiper 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
-    nextMargin: 35,//swiper 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
-    isBusy: false,//是否正在请求数据中
-    backButton: false,// 返回首页 按钮显示状态，识别二维码进入显示 ，否则不显示
-    currentPageIndex: 1,//当前请求全局页数
-    currentDateIsNoData: true,//当前天是否还有数据
-  },
-  toPage: function (event) {
+    previousMargin: 35, //swiper 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
+    nextMargin: 35, //swiper 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
+    isBusy: false, //是否正在请求数据中
+    backButton: false, // 返回首页 按钮显示状态，识别二维码进入显示 ，否则不显示
+    currentPageIndex: 1, //当前请求全局页数
+    currentDateIsNoData: true, //当前天是否还有数据
+  },
+  toPage: function(event) {
     wx.navigateTo({
       url: `/pages/contentDetails/contentDetails?id=${event.target.id}`
     })
   },
-  toPageIndex: function (event) {
+  toPageIndex: function(event) {
     wx.redirectTo({
       url: '/pages/index/index',
     })
   },
-  loadData: function () {
+  loadData: function() {
     if (!this.data.isBusy) {
       //查看当天是否还有数据
       if (this.data.currentDateIsNoData) {
@@ -37,7 +39,7 @@ Page({
     }
   },
 
-  swiperChange: function (event) {
+  swiperChange: function(event) {
     console.log(event);
     if (event.detail.current == this.data.newsArray.length - 1) {
       this.loadData();
@@ -74,13 +76,13 @@ Page({
         newsArray: self.data.newsArray
       });
       this.data.isBusy = false;
-    },'get');
+    }, 'get');
   },
-  nothing: function () { },
+  nothing: function() {},
   /**
    * 保存分享事件
    */
-  saveShare: function (event) {
+  saveShare: function(event) {
     console.log('save share event !' + this.data.shareId)
     this.cancelShare();
     wx.navigateTo({
@@ -90,8 +92,17 @@ Page({
   /**
    * 分享事件
    */
-  share: function (event) {
+  share: function(event) {
     this.data.shareId = event.target.id;
+    let title = event.target.dataset.title||"";
+    let info = event.target.dataset.content||"";
+    wx.setStorage({
+      key: "shareInfo",
+      data: JSON.stringify({
+        title: title,
+        intro: info
+      })
+    })
     //弹出
     this.animation.translate3d(0, 0, 0).step();
     this.setData({
@@ -101,7 +112,7 @@ Page({
   /**
    * 取消分享事件
    */
-  cancelShare: function () {
+  cancelShare: function() {
     //收起
     this.animation.translate3d(0, 1000, 0).step();
     this.setData({
@@ -112,7 +123,7 @@ Page({
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad: function (options) {
+  onLoad: function(options) {
     // options 中的 scene 需要使用 decodeURIComponent 才能获取到生成二维码时传入的 scene
     if (options.scene) {
       var scene = decodeURIComponent(options.scene)
@@ -122,12 +133,14 @@ Page({
       });
     }
     var pages = getCurrentPages();
-    var currPage = pages[pages.length - 1];  //当前页面
+    var currPage = pages[pages.length - 1]; //当前页面
     var prevPage = pages[pages.length - 2]; //上一个页面
     //判断入口
     if (prevPage) {
       //直接调用上一个页面的setData()方法，把数据存到上一个页面即编辑款项页面中去  
-      let swiperIndex = prevPage.data.newsArray.findIndex(item => { return item.id == options.id });
+      let swiperIndex = prevPage.data.newsArray.findIndex(item => {
+        return item.id == options.id
+      });
       this.setData({
         swiperIndex: swiperIndex,
         currentPageIndex: prevPage.data.currentPageIndex,
@@ -139,7 +152,9 @@ Page({
     } else {
       let id = options.id;
       var self = this;
-      self.setData({ id });
+      self.setData({
+        id
+      });
       apiHelper.paramData.cmd = "studyAbroadNews/getNewsDetail"; //cmd
       apiHelper.paramData.param = {
         id
@@ -158,50 +173,50 @@ Page({
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
-  onReady: function () {
+  onReady: function() {
     this.animation = wx.createAnimation()
   },
 
   /**
    * 生命周期函数--监听页面显示
    */
-  onShow: function () {
+  onShow: function() {
 
   },
 
   /**
    * 生命周期函数--监听页面隐藏
    */
-  onHide: function () {
+  onHide: function() {
 
   },
 
   /**
    * 生命周期函数--监听页面卸载
    */
-  onUnload: function () {
+  onUnload: function() {
 
   },
 
   /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
-  onPullDownRefresh: function () {
+  onPullDownRefresh: function() {
 
   },
 
   /**
    * 页面上拉触底事件的处理函数
    */
-  onReachBottom: function () {
+  onReachBottom: function() {
 
   },
 
 
   /**
    * 用户点击右上角分享
    */
-  onShareAppMessage: function (res) {
+  onShareAppMessage: function(res) {
 
   }
 })
diff --git a/pages/content/content.wxml b/pages/content/content.wxml
@@ -12,10 +12,10 @@
         </view>
         <view class='content_foot'>
           <view class='page-head-line'></view>
-          <button bindtap='toPage' id="{{item.id}}">查看全文</button>
+          <button bindtap='toPage' id="{{item.newsArray[0].url}}">查看全文</button>
           <button wx:if="{{backButton}}" class='back_index' bindtap='toPageIndex'>返回首页</button>
-          <view class='share-img' id="{{item.id}}" bindtap='share'>
-            <image mode="aspectFill" src='/imgs/share.png' id="{{item.id}}" bindtap='share'></image>
+          <view class='share-img' id="{{item.id}}" data-title="{{item.title}}" data-content='{{item.summary}}' bindtap='share'>
+            <image mode="aspectFill" src='/imgs/share.png' id="{{item.id}}" data-title="{{item.title}}" data-content='{{item.summary}}' bindtap='share'></image>
           </view>
         </view>
       </view>

diff --git a/pages/contentDetails/contentDetails.js b/pages/contentDetails/contentDetails.js
@@ -1,66 +1,85 @@
 // pages/contentDetails/contentDetails.js
+var apiHelper = require("../../utils/api.js");
 Page({
-
   /**
    * 页面的初始数据
    */
   data: {
-
+    webUrl: ""
   },
 
   /**
    * 生命周期函数--监听页面加载
    */
-  onLoad: function (options) {
-
+  onLoad: function(options) {
+    console.log(options)
+    let id = options.id;
+    var self = this;
+    self.setData({
+      webUrl:id
+    });
   },
 
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
-  onReady: function () {
-  
+  onReady: function() {
+
   },
 
   /**
    * 生命周期函数--监听页面显示
    */
-  onShow: function () {
-  
+  onShow: function() {
+
   },
 
   /**
    * 生命周期函数--监听页面隐藏
    */
-  onHide: function () {
-  
+  onHide: function() {
+
   },
 
   /**
    * 生命周期函数--监听页面卸载
    */
-  onUnload: function () {
-  
+  onUnload: function() {
+
   },
 
   /**
    * 页面相关事件处理函数--监听用户下拉动作
    */
-  onPullDownRefresh: function () {
-  
+  onPullDownRefresh: function() {
+
   },
 
   /**
    * 页面上拉触底事件的处理函数
    */
-  onReachBottom: function () {
-  
+  onReachBottom: function() {
+
   },
 
+
   /**
    * 用户点击右上角分享
    */
-  onShareAppMessage: function () {
-
+  onShareAppMessage: function(res) {
+    if (res.from === 'button') {
+      // 来自页面内转发按钮
+      console.log(res.target)
+    }
+    return {
+      title: this.data.info.title,
+      path: '/pages/content/content?id=' + this.data.id,
+      success: function(res) {
+        // 转发成功
+      },
+      fail: function(res) {
+        // 转发失败
+      }
+    }
   }
 })
diff --git a/pages/contentDetails/contentDetails.wxml b/pages/contentDetails/contentDetails.wxml
@@ -1,16 +1,2 @@
 <!--pages/contentDetails/contentDetails.wxml-->
-<scroll-view scroll-y="true" class='contentDetails'>
-  <view class='content_header'>
-  </view>
-  <text class='title'>2018年QS排名最新出炉，悉尼大学的毕业生就业能力在全澳大利亚排名第1</text>
-  <view class='title2'>
-    <text class='left'>来源：新浪</text>
-    <text class='right'>浏览量：200</text>
-  </view>
-  <view class='page-head-line'></view>
-  <view class='content_font'>2018年QS全球毕业生就业能力排名榜于近期公布，其中，悉尼大学发挥稳定，与去年排名同为第4，超过麻省理工、剑桥、牛津等国内大学生心中的梦想大学。而墨尔本大学紧随其后屈居第7，新南威尔士大学排名36，昆士兰大学排名49、悉尼科技大学排名69，美国斯坦福大学毫无意外地占据榜首。值得一提的是，在本次的榜单中，澳洲共有8所大学进入全球前100名，其国民教育水平可见一斑。 2018年QS全球毕业生就业能力排名榜于近期公布，其中，悉尼大学发挥稳定，与去年排名同为第4，超过麻省理工、剑桥、牛津等国单中，澳洲共有8所大学进入全球前100名，其国民教育水平可见一斑。
-    2018年QS全球毕业生就业能力排名榜于近期公布，其中，悉尼大学发挥稳定，与去年排名同为第4，超过麻省理工、剑桥、牛津等国2018年QS全球毕业生就业能力排名榜于近期公布，其中，悉尼大学发挥稳定，与去年排名同为第4，超过麻省理工、剑桥、牛津等国内大学生心中的梦想大学。而墨尔本大学紧随其后屈居第7，新南威尔士大学排名36，昆士兰大学排名49、悉尼科技大学排名69，美国斯坦福大学毫无意外地占据榜首。值得一提的是，在本次的榜单中，澳洲共有8所大学进入全球前100名，其国民教育水平可见一斑。 2018年QS全球毕业生就业能力排名榜于近期公布，其中，悉尼大学发挥稳定，与去年排名同为第4，超过麻省理工、剑桥、牛津等国单中，澳洲共有8所大学进入全球前100名，其国民教育水平可见一斑。
-    2018年QS全球毕业生就业能力排名榜于近期公布，其中，悉尼大学发挥稳定，与去年排名同为第4，超过麻省理工、剑桥、牛津等国2018年QS全球毕业生就业能力排名榜于近期公布，其中，悉尼大学发挥稳定，与去年排名同为第4，超过麻省理工、剑桥、牛津等国内大学生心中的梦想大学。而墨尔本大学紧随其后屈居第7，新南威尔士大学排名36，昆士兰大学排名49、悉尼科技大学排名69，美国斯坦福大学毫无意外地占据榜首。值得一提的是，在本次的榜单中，澳洲共有8所大学进入全球前100名，其国民教育水平可见一斑。 2018年QS全球毕业生就业能力排名榜于近期公布，其中，悉尼大学发挥稳定，与去年排名同为第4，超过麻省理工、剑桥、牛津等国单中，澳洲共有8所大学进入全球前100名，其国民教育水平可见一斑。
-    2018年QS全球毕业生就业能力排名榜于近期公布，其中，悉尼大学发挥稳定，与去年排名同为第4，超过麻省理工、剑桥、牛津等国
-  </view>
-</scroll-view>
+<web-view src="{{webUrl}}"></web-view>