如何實現短信跳轉小程序?


先看效果

小程序支持短信跳轉小程序了,可以說是打開了一個巨大的流量入口。

效果過程分析

  1. 從短信到網頁
  2. 從網頁到小程序

那么就涉及到兩個點

  1. 發送短信
  2. 網頁跳轉

實現步驟分析

  1. 先要有個網頁,可以跳轉到小程序
  2. 然后發送短信,短信內容包含地址

具體實現步驟

1. 先要有個網頁,可以跳轉到小程序

首先開通靜態網頁托管

image.png

創建一個雲開發的項目,點擊左上方「雲開發」按鈕

image.png

點擊靜態網頁進行開通。

然后點擊「下載資源包」,解壓縮我們會看到

image.png

第一個是雲函數,第二個是跳轉的網頁。首先我們編輯下跳轉的網頁

image.png

打開文件編輯以下 6 處即可(通過“replace”搜索可以快速定位修改的地方):

image.png
image.png

添加好對應參數后,上傳部署到你的靜態托管文件目錄中
image.png

這個時候網頁這塊就已經搞定了,接下來部署下雲函數。

剛才的 cloudfunctions 文件夾下面有個 public 文件夾里面的 index.js 復制內容到自己新建的雲函數的 index.js 中,然后替換自己小程序的path(友情提示:覆蓋完成后別忘記上傳部署雲函數)

image.png

這個雲函數的作用,主要是靜態網頁會調用它生成跳轉的URL Scheme。以下為網頁調用這個函數的代碼區域

image.png

到這里網頁顯示與網頁跳轉就只差最后一步了,設置雲函數權限。

第一步,點擊設置,滑到地步打開「未登錄用戶權限開關」。
image.png
第二步,點擊雲函數,修改權限復制下方代碼覆蓋即可。
image.png

自定義安全規則配置:

{
    "*": {
    "invoke": "auth != null"
    },
    "public": {
    "invoke": true
    }
}
復制代碼

2. 然后發送短信,短信內容包含地址

創建一個sendSms到雲函數,復制以下代碼:

const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async (event, context) => {
  try {
    const result = await cloud.openapi.cloudbase.sendSms({
        env: 'online-12345678910', // 替換環境ID
        content: '雲開發支持短信跳轉小程序了',// 替換短信文案
        path: '/index.html',// 替換網頁路徑
        phoneNumberList: [
          "+8612345678910"
        ]
      })
    return result
  } catch (err) {
    return err
  }
}
復制代碼

替換以上 3 處內容即可。

  1. 環境ID,可以在設置中找到
  2. 短信內容,這個自己自定義
  3. 網頁路徑,在靜態網頁托管中點擊上傳到網頁即可查看復制

image.png

修改完成后,部署即可。


作者:宇明
鏈接:https://juejin.cn/post/6916051417434161166
來源:掘金
著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM