跟着小程序重构迭代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
网友评论