【小程序】微信小程序开发，分享给朋友或者朋友圈的功能增加地址参数，以及如何进行带参数本地测试

🌹欢迎来到《小5讲堂》🌹

🌹这是《小程序》系列文章，每篇文章将以博主理解的角度展开讲解。🌹

🌹温馨提示：博主能力有限，理解水平有限，若有不对之处望指正！🌹

前言

隔一段时间没有接触微信小程序，好多功能就容易忘记，今天在做分享带参数并后端接收参数的功能测试，发现后端一直拿不到参数值。在小程序端打印日志发现也是空值，然后导出搜索了一遍没找到解决方案，以为是官方禁用了，最后是通过发布体验方式来测试获得了参数值。

模拟参数测试

没什么经验，还在想怎么本次测试带参数的情况，后来琢磨了下，微信开发者工具应该会提供测试的场景，果然是有的，比如下面的截图。

博主之前做过生成带有参数的小程序二维码，也是可以通过这方式来测试。

从下图可以知道，是支持带上多个参数

name=vendor&color=black

添加带有参数编译模式

比如博主这里设置了一个id=2的参数，确定后就会带上参数进行编译，如果要恢复原来的编译模式，直接点击删除该模式即可。

下图就是打印整个options参数，并且参数是放在query这个参数下

分享给朋友

第一是直接通过开发者预览方式转发给另一个微信号来点击测试，在手机打开调试模式，发现无法打印出来地址参数。

最后是通过提交生成体验二维码的方式打印出来了地址参数，有可能是分享给的微信号只有体验权限没有开发者权限的原因，如果有小伙伴也是遇到这种情况，那么就可以试下发给含有体验权限的好友号里测试。

html 复制代码

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {
        const path = '/pages/home/home?id=123';
        console.log('分享路径:', path);
        return {
            title: '分享标题',
            path: path
        }
    },

分享到朋友圈

官方地址：https://developers.weixin.qq.com/miniprogram/dev/wxcloudservice/wxcloud/guide/practice/appshare.html

在朋友圈点开的小程序预览界面是默认单页模式，此时只会显示默认静态内容，不会加载接口和互动内容，所以需要开发者根据1154场景进行静态内容显示，提示用户点击《前往小程序》进行体验。

并且分享到朋友圈的参数和分享给朋友设置的参数还点不同，需要给query参数赋值，否则无效，博主亲测有效。

html 复制代码

    /*
        分享朋友圈 
    */
    onShareTimeline(){
        return {
            title: title,
            query: 'id='+id
        }
    },

开发小技巧

基础优化技巧

合理使用setData
- 避免频繁调用setData，合并数据更新
- 只更新必要的数据字段，不要传递大量无关数据
- 对于大数据列表，使用局部更新而非全量更新
页面生命周期优化
- 在onLoad中完成必要数据初始化
- 在onShow中处理需要频繁更新的逻辑
- 在onHide中清理定时器或暂停耗性能的操作
WXML优化
- 减少不必要的节点嵌套
- 使用block标签作为逻辑包裹容器
- 合理使用hidden和wx:if
  - hidden适用于频繁切换显示/隐藏
  - wx:if适用于初始渲染时条件判断

性能提升技巧

图片优化
- 使用合适的图片格式(WebP在小程序中支持良好)
- 按需加载图片，使用懒加载技术
- 适当压缩图片，控制图片尺寸
列表渲染优化
- 长列表使用wx:for的优化属性
html 复制代码
```
<view wx:for="{{list}}" wx:key="id" wx:for-item="item" wx:for-index="index">
```
- 考虑使用recycle-view等组件处理超长列表
减少不必要的全局样式
- 避免在app.wxss中定义过多全局样式
- 使用页面或组件级别的样式

开发效率技巧

组件化开发
- 合理拆分组件，提高复用性
- 使用behaviors共享组件逻辑
- 善用slot插槽增加组件灵活性
自定义tabBar
- 通过自定义组件实现个性化tabBar
- 注意处理iPhoneX等全面屏设备的底部安全区域
调试技巧
- 使用console.time()和console.timeEnd()测量代码执行时间
- 善用小程序开发者工具的调试面板
- 使用真机调试功能测试实际表现

高级技巧

数据预加载
- 在页面跳转前预加载数据
- 使用getCurrentPages()获取页面栈进行跨页面通信
动画优化
- 使用CSS动画替代JS动画
- 合理使用transform和opacity属性实现高性能动画
- 考虑使用WXS响应事件提升交互性能
分包加载
- 合理规划分包，主包控制在2MB以内
- 按需加载分包，提升首屏加载速度
- 使用独立分包优化关键路径
云开发技巧
- 合理设计数据库索引
- 使用云函数处理复杂逻辑
- 利用云存储托管静态资源

常见问题解决

解决页面栈限制
- 使用redirectTo替代navigateTo避免页面栈过深
- 合理设计页面跳转逻辑
解决setData数据过大
- 分片加载大数据
- 使用虚拟列表技术
解决自定义组件样式隔离
- 使用options: { styleIsolation: 'shared' }共享样式
- 合理使用外部样式类