uniapp打包微信公众号网页分享示例

PHP uniapp 微信公众号

背景

因业务需要，由uniapp打包的简单表单提交页面，需要加上微信jssdk支持的分享给朋友、分享到朋友圈

实现

• uniapp
  @/common/utils.js

  import { wexinShare } from '@/common/utils.js'
  
  weixinJSBase({
    isname: 'test',
    url: btoa(encodeURI('https://xxx.tthweixin.com/'))
  }).then((res) => { // 通过接口拿到jssdk的config
    const data = res.wechatJsInfo
    const json = { debug: true, appId: data.appid, nonceStr: data.noncestr, signature: data.signature, timestamp: data.timestamp }
    const shareData = {
        title: '同方全球人寿「全+」康养服务手册已正式上线', // 分享标题
        link: 'https://xxx.tthweixin.com/',
        imgUrl: 'https://xxx.tthweixin.com/logo.png', //
        desc: '臻心守护 美好生活'
    }
    wexinShare(json, shareData)
  })

其他

1. @getJssdkConfig 可以便捷使用线上的微擎站点（如https://shop.tthweixin.com），只要已搭建微信开放平台即可。开箱即用的脚本
2. 注意配置好js安全域名
3. 业务简单的情况下，尽量使用vue的js引入方式，用单页渲染方式实现，打包的话调试十分费时费力

4. uniapp项目，路由模式需要改为history，url要去除掉/#/（打包方式中，加入"template" : "index.html",）
   Nginx配置

   location ^~/h5 {
    alias  /www/wwwroot/项目目录/public/h5; #项目文件位置
    index  index.html;
    try_files $uri $uri/ /h5/index.html;
   }

5. 分享配置值imgUrl，尽量使用绝对路径的图片（放线上）

---

参考资料

jssdk分享接口

H5页面分享不显示自定义标题和图片？

本文由 ben 创作，采用 知识共享署名4.0 国际许可协议进行许可
本站文章除注明转载/出处外，均为本站原创或翻译，转载前请务必署名
最后编辑时间为: Jul 8, 2024 at 05:59 pm