小程序开发问题总结3(分享相关)

跟着小程序重构迭代4个版本,总结一些开发中遇到的问题，第四个版本，可以说是功能真的很杂，也很乱，下面我主要说下我负责的司乘同显的调整优化，行程分享一系列相关需求以及用户感知的随单返

1.页面按钮分享

wxml只能用button

在页面的js文件中定义 onShareAppMessage 函数时，表示该页面可以进行转发。可以在函数中设置页面转发的信息。

只有定义了该函数，小程序右上角的菜单中才会有转发按钮
用户点击转发按钮的时候回调用该函数
该函数内需要 return 一个 Object，Object中包含转发的信息（可自定义转发的内容

2.触发分享转发位置

页面中可以触发转发的地方有两个：
　　一个是右上角菜单中的转发按钮
　　另一个是页面中具有属性open-type且其值为share的button。（注：必须是button组件，其他组件中设置 open-type="share" 无效）
　即：
　　<button data-name="shareBtn" open-type="share">转发</button>

注意：实际开发中会发现这个 button 自带有样式，当背景颜色设置为白色的时候还有一个黑色的边框，刚开始那个边框怎么都去不掉，后来给button加了一个样式属性 plain="true" 以后，再在样式文件中控制样式 button[plain]{ border:0 } ，就可以比较随便的自定义样式了。
eg:
将分享按钮做成一个图标等
或者不加 plain="true",用伪类

button::after{
   border: none;
}

3.页面跳转传递参数

就算传入的参和接的参不一致，也尽量不要在传参的地方做修改。不改变原有的，

4.分享后页面

  // 分享来自页面内转发按钮
  onShareAppMessage: function (res) {
    if (res.from === 'button') {
      console.log(res.target)
    }
    return {
      title: 自定义标题,
      imageUrl: 自定义图片,
      path: 用户点击分享卡片后看见的页面，注意必须以‘/’开头,
      success: function (res) {
        console.log('分享成功的处理')
      },
      fail: function (res) {
         console.log('分享失败的处理')
      }
    }
  },

5.从何处分享来

从小程序分享过来的只能打开小程序
从app分享过来的既能打开小程序也能打开app

打开app

需要用户主动触发才能打开 APP，所以不由 API 来调用，需要用 open-type 的值设置为 launchApp 的 <button> 组件的点击来触发。
eg:

<button open-type="launchApp" app-parameter="wechat" binderror="launchAppError">打开APP</button>

Page({
  launchAppError (e) {
    console.log(e.detail.errMsg)
  }
})

相关文档： https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/launchApp.html