小程序轉發分享、小程序登錄流程

小程序轉發分享是一個Page里的函數

文檔地址：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

Page中有了onShareAppMessage 這個方法后才支持轉發

onShareAppMessage(Object object)

監聽用戶點擊頁面內轉發按鈕（button 組件 open-type="share"）或右上角菜單“轉發”按鈕的行為，並自定義轉發內容。

注意：只有定義了此事件處理函數，右上角菜單才會顯示“轉發”按鈕

參數	類型	說明	最低版本
from	String	轉發事件來源。 button：頁面內轉發按鈕； menu：右上角轉發菜單	1.2.4
target	Object	如果 from 值是 button，則 target 是觸發這次轉發事件的 button，否則為 undefined	1.2.4
webViewUrl	String	頁面中包含web-view組件時，返回當前web-view的url	1.6.4

此事件處理函數需要 return 一個 Object，用於自定義轉發內容，返回內容如下：

自定義轉發內容 基礎庫 2.8.1 起，分享圖支持雲圖片。

字段	說明	默認值	最低版本
title	轉發標題	當前小程序名稱
path	轉發路徑	當前頁面 path ，必須是以 / 開頭的完整路徑
imageUrl	自定義圖片路徑，可以是本地文件路徑、代碼包文件路徑或者網絡圖片路徑。支持PNG及JPG。顯示圖片長寬比是 5:4。	使用默認截圖	1.5.0

示例：

onShareAppMessage(res){
    console.log(res);
    if (res.from === 'button') {
      // 來自頁面內轉發按鈕
      console.log(res.target)
    }
    return {
      title: '自定義轉發標題',
      path: '/page/user?id=123',//默認分享到首頁，如果分享其它頁面，將對應的頁面路徑寫上去即可
    }
  }

小程序不能分享到朋友圈，只能分享到好友

示例2（加分享圖片）

onShareAppMessage(res){
    console.log(res);
    if (res.from === 'button') {
      // 來自頁面內轉發按鈕
      console.log(res.target)
    }
    return {
      title: '自定義轉發圖片',
      path: '/pages/logs/logs',
      imageUrl:"/assets/image/touxiang.png",//也可以用線上圖片，支持png jpg格式
    }
  }

用按鈕觸發轉發分享，同樣是觸發Page中的onShareAppMessage函數

<button size="mini" open-type="share">分享按鈕</button>

小程序登錄流程：

 

 

 小程序登錄接口在API的開放接口里可以找到

 

 前台調用wx.login之后，會返回一個code，之后，將code通過網絡請求發送給后端，后端需要appId+code+AppSecret向微信服務器發送請求，拿到openid和session_key

 AppId和AppSecret可以在 左側導航的開發模塊，開發設置里，找到，AppSecret需要管理員掃碼后生成

 

 服務器拿到code、appid、appscecret后想微信發送一個請求，會返回一個openid和session_key，其中openid服務器會存一份，另外返回給前台

一般情況下，前台在給后台發送code時，會附帶賬號和密碼，后台拿到code、appid、appscecret后，生成openid，然后后台再將openid和賬號密碼綁定到一起，存到數據庫中，如果賬號密碼和openid都匹配，則返回登錄成功的信息（一般會返回一個token），客戶端拿到token后，就可以將token保存起來了，保存在storage就行，當用戶退出小程序時，下次進入小程序，就不用通過接口來登錄了，直接從storage中拿到token就可以登錄成功。之后，前台就可以用網路請求，攜帶這個token和自定義的登錄態去拿到 首頁信息，openid，購物車相關保密信息了

 

登錄演練：

一般登錄在app.js中去做，不用在某個頁面中去做

一般在App的onLaunch（小程序加載完去做登錄）

// 登錄
    wx.login({
      success: res => {
        // 發送 res.code 到后台換取 openId, sessionKey, unionId
　　　　　//這個code只有5分鍾有效期

        console.log(res)
      }
    })

小面上一份真實的登錄流程代碼：

//app.js
import api from "./utils/api.js"
var TOKEN;
App({
  onLaunch: function () {
    

    // 登錄
    // 先嘗試從緩存中取出token，如果沒有再掉登錄接口
    TOKEN = wx.getStorageSync('token');
    console.log(TOKEN)
    // 判斷token私有有值
    if (TOKEN && TOKEN.length > 0){//已經有token了  驗證token是否過期
      // 驗證token是否過期
      this.check_token(TOKEN);
    }else{//沒有token進行登錄操作
      this.login();
    }
    


  },
  globalData: {
    userInfo: null,
    token:""
  },
  check_token(token){//驗證token是否過期
    console.log("執行了驗證token的操作")
    wx.request({
      url: 'http://123.207.32.32:3000/auth',
      method:"post",
      header:{
        token
      },
      success:res=>{
        console.log(res)
        if(!res.data.errCode){//說明token有效
        console.log("token有效")
          this.globalData.token = token;//將有效的token放到global對象中
        }else{//若token有問題 不管過期還是怎么樣
          console.log("token無效")
          this.login();//調用登錄接口
        }
      },
      fail:err=>{
        console.log(err)
      }
    })
  },
  login(){//登錄
    console.log("執行了登錄操作")
    wx.login({
      success: res => {
        // 發送 res.code 到后台換取 openId, sessionKey, unionId
        console.log(res)
        const code = res.code;
        api.post("http://123.207.32.32:3000/login", { code }, res => {
          console.log(res)
          // 取出token
          TOKEN = res.data.token;
          // 將token保存在globalData中
          this.globalData.token = TOKEN;
          console.log(this.globalData.token)
          // 將token存儲在本地
          wx.setStorageSync("token", this.globalData.token)//不帶sync的是異步，帶上sync是同步，存儲不完，不往下執行
        }, err => {
          console.log(err)
        })
      }
    })
    
  }
})

 

 

 

。