微信菜单与 JSSDK 应用

80学院第九次课

大纲

  • JSSDK
  • View 中整合 JS

再谈 JSSDK

  • 了解它: 链接
  • 微信浏览器原理
    • 开启 ngrok, 绑定域名
    • 引入 JS 文件
    • 通过config接口注入权限验证配置
    • 调用接口
  • 讨论一下微信分享功能定制

朋友圈分享功能定制

核心代码

# Gemfile 

gem 'weixin_authorize'

# _share.js.erb
<% sign_package = WxAuth.get_jssign_package(request.url) %>
<script>
  wx.config({
    debug: false,
    appId: "<%= sign_package['appId'] %>",
    timestamp: "<%= sign_package['timestamp'] %>",
    nonceStr: "<%= sign_package['nonceStr'] %>",
    signature: "<%= sign_package['signature'] %>",
    jsApiList: [
      'onMenuShareTimeline',
    ]
  });

  wx.ready(function () {
    // 设置“分享到朋友圈”按钮点击状态及自定义分享内容
    wx.onMenuShareTimeline({
      title: "<%= @share_puppy_info[:title] %>",
      link: "<%= @share_puppy_info[:url] %>",
      imgUrl: "<%= avatar_url(@share_puppy_info[:img]) %>",
      success: function(){
      },
    });
  });
</script>

View 中整合 JS

  • 一般将 JS 放在 /app/assets/javascripts 目录
  • 需要引入某些变量时才将 JS 整合进入 view 中
  • 使用 script 标签来标记
  • 使用 <%= %> 来引用 controller 中的变量
  • 适用于微信 JSSDK 这种场景

Break time

任务安排

  • 微信朋友圈分享功能
  • 微信朋友分享功能( 额外工作 )

问题答疑

Thx

80academy-lession-9

By Li Yafei

80academy-lession-9

  • 2,169