????????目前公司想把剛開發(fā)的h5以及小程序打通,就是通過h5可以跳轉(zhuǎn)到小程序進(jìn)行使用毅人。那么問題來了吭狡,產(chǎn)品希望直接通過一個(gè)事件就直接跳轉(zhuǎn)到小程序,微信的開發(fā)環(huán)境支持這樣的操作嗎丈莺?其實(shí)在開發(fā)文檔上面已近說的比較清楚了划煮,我在這整理出了具體的實(shí)現(xiàn);
一缔俄、跳轉(zhuǎn)到小程序的幾種方式
? ? ? ? 1弛秋、公眾號(hào)跳轉(zhuǎn)到小程序,這個(gè)的話在公眾號(hào)管理頁面配置一下就好了俐载;
????????2蟹略、通過普通的二維碼跳轉(zhuǎn)到小程序里面
雖然小程序的功能越來越強(qiáng)大,但是再開發(fā)的時(shí)候還是受到很多的限制遏佣,對于產(chǎn)品提出的“ 通過點(diǎn)擊一個(gè)按鈕就跳到小程序 ”這個(gè)需求真的就是無能為力了挖炬,不過隨著微信的更能更迭越來越頻繁,相信以后說不定就實(shí)現(xiàn)了呢状婶;最近開發(fā)支付寶小程序時(shí)候發(fā)現(xiàn)意敛,微信小程序和支付寶小程序開發(fā)大部分是一樣的,微信在開發(fā)上回更加成熟些膛虫,代碼審核也快草姻,我們今天實(shí)現(xiàn)的跳轉(zhuǎn)小程序同樣也適用于支付寶小程序開發(fā);
二稍刀、邏輯整理
? ? ? ?實(shí)通過用戶觸發(fā)按鈕生成一個(gè)二維碼撩独,用戶通過使用微信掃一掃或者長按識(shí)別二維碼進(jìn)入小程序(必須要觸發(fā)微信自帶的掃一掃才可以),通過二維碼攜帶的參數(shù),小程序進(jìn)行識(shí)別相關(guān)數(shù)據(jù)综膀,比如登錄狀態(tài)澳迫;
三、配置
? ? ? ? h5端:通過qrcodejs插件動(dòng)態(tài)把url地址生成二維碼剧劝,攜帶相關(guān)的用戶信息纲刀;(用url地址生成二位碼是因?yàn)槲⑿盘D(zhuǎn)到url相關(guān)頁面的時(shí)候會(huì)判斷是否需要跳轉(zhuǎn)小程序,這個(gè)下面小程序配置校驗(yàn)文件有講到)
? ? ? ? ? ? ? ? (因?yàn)閔5也是通過微信掃一掃進(jìn)入的h5項(xiàng)目担平,在微信瀏覽器上可以直接長按進(jìn)行二維碼識(shí)別)
? ? 小程序:進(jìn)入小程序開發(fā)平臺(tái)? -> 開發(fā) -> 開發(fā)設(shè)置 ->掃普通鏈接二維碼打開小程序
二維碼規(guī)則: 微信api里說的很清楚了
? ? ? ? 1示绊、二維碼規(guī)則的域名須通過ICP備案的驗(yàn)證。
? ? ? ? 2暂论、支持http面褐、https、ftp開頭的鏈接(如:http://wx.qq.com取胎、https://wx.qq.com/mp/展哭、https://wx.qq.com/mp?id=123)。
? ? ? ? 3闻蛀、一個(gè)小程序帳號(hào)可配置不多于10個(gè)二維碼前綴規(guī)則匪傍。
前綴占用規(guī)則:
????????開發(fā)者可選擇是否占用符合二維碼匹配規(guī)則的所有子規(guī)則。如選擇占用觉痛,則其他帳號(hào)不可申請使用滿足該前綴匹配規(guī)則的其他子規(guī)則役衡。
如:若開發(fā)者A配置二維碼規(guī)則:https://wx.qq.com/mp?id=123,并選擇“占用所有子規(guī)則“薪棒,其他開發(fā)者將不可以配置滿足前綴匹配的子規(guī)則如https://wx.qq.com/mp?id=1234手蝎。
校驗(yàn)文件:
?? ? ? ? 通過把下載的校驗(yàn)文件存放到二維碼對應(yīng)url所在的服務(wù)器更目錄下就可以了。 剛開始的時(shí)候會(huì)疑惑俐芯,微信掃碼怎么知道是怎么識(shí)別是跳轉(zhuǎn)小程序呢棵介, 這個(gè)關(guān)鍵就在于校驗(yàn)文件上面了,h5通過把url生成二維碼吧史,微信在使用掃碼的啥時(shí)候請求服務(wù)器的時(shí)候先會(huì)去查找有沒有對應(yīng)的校驗(yàn)文件邮辽,有的話就會(huì)跳轉(zhuǎn)到小程序;如果存放地址失敗則不能保存贸营;
測試范圍:
? ? ? ? 這個(gè)通過自己的需求來進(jìn)行配置就可以了吨述,
? ? 保存成功后就可以進(jìn)行跳轉(zhuǎn)了,但是注意一點(diǎn):
? ? ? ? ?必須是通過二維碼+微信掃一掃/長按識(shí)別二維碼才可以
相關(guān)連接:
? ? 微信小程序掃碼打開小程序接入指南
第一次寫文章莽使,有什么不好的歡迎大家指出锐极,想著入行兩年多了笙僚,有些概念要學(xué)會(huì)去整理和歸納才不至于忘記芳肌;