微信开发与 Ruby on Rails

80学院第五次课

大纲

• 微信类八十二十产品开发的目标
• 微信开发的特点
• 微信登录
• 微信sdk

上周任务回顾

微信类八十二十产品开发的目标

• 微信 oauth2 登录和注册
• 发布产品( 可以是短文, 语音, 或视频 )
• 分享产品给朋友或朋友圈
• 利用积分购买产品

微信账号类型

• 订阅号
  • 可定制菜单
  • 每天最多一次的消息
• 服务号
  • 可定制菜单及高级功能
  • 每月最多四条消息
• 企业号
  • 用于企业内部, 类似于slack
• 小程序号
  • 类似于 React Native 技术的 Native APP 体验
  • 新的入口( 目前还没开放出来 )
• 见链接

微信开发与传统web开发的区别

• 更偏重于 HTML5 & CSS3 的应用
• 微信登录 & 微信SDK 的应用
• 独有的生态系统( 支付, 通知, 传播 )

微信登录

• 理解微信的 oauth2
• 掌握 omniauth-wechat-oauth2 和 omniauth gem
• 申请微信公众号, 可临时使用测试号进行测试
  • 申请测试号: 开发者工具 -> 公众平台测试帐号
• 掌握 ngrok 工具方便本地环境测试
  • ngrok 介绍

核心代码(1)

# Gemfile

gem 'omniauth'
gem 'omniauth-wechat-oauth2'

核心代码(2)

# /config/initializers/omniauth.rb

Rails.application.config.middleware.use OmniAuth::Builder do
  provider :wechat,ENV['OMNIAUTH_WECHAT_KEY'], ENV['OMNIAUTH_WECHAT_SECRET'], 
    provider_ignores_state: true
end


# /config/routes.rb

get '/auth/:provider/callback' => 'sessions#create'

核心代码(3)

# app/controllers/sessions_controller.rb

  def create
    auth = request.env["omniauth.auth"]
    logger.debug auth
    user = User.where(uid: uid.to_s).first
    if user.present?
      user.update_user_info(auth)
    else
      user = User.create_with_wechat(auth)
    end

    login_as(user)
    redirect_to root_path
  end

核心代码(4)

# /app/models/user.rb

  def self.create_with_wechat(auth)
    create! do |user|
      user.provider = 'wechat'
      user.uid = auth['uid']
      if auth['info']
         user.name = auth['info']['name'] || auth['info']['nickname'] || ''
         user.avatar = auth['info']['headimgurl']
         user.sex = auth['info']['sex']
         user.province = auth['info']['province']
         user.city = auth['info']['city']
         user.country = auth['info']['country']
      end
    end
  end

微信 JSSDK

• JSSDK
  • 集成微信环境下的 API 调用
  • 了解它: 链接
• Rails5 下使用方法
  • weixin_authorize gem
  • 简化了调用参数的生成
• 项目中可能用到以下特性
  • 定制分享链接与图片
  • 记录分享信息
  • 微信支付

核心代码

# 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>

Break time

任务安排

• 定义任务目标
• 创建 p8020 项目
• 注册微信公众号( 服务号 )
• 实现微信登录功能
• 掌握微信开发的调试

问题答疑

Thx