小程序通用能力辆苔,你一定用得上

楊小姐的feelstyle算灸,搗鼓5個月小程序,良心總結(jié)驻啤,跨年之作hahaha~菲驴!

所謂小程序通用能力,就是如果你要做小程序街佑,以下問題你通通都會遇到哦谢翎,我總結(jié)如下,讓大家少踩坑沐旨,如有寫得不當之處請指出森逮。

設計指南

微信官方提供的小程序界面設計指南和建議,附psd和sketch組件庫下載磁携。
官方文檔:https://developers.weixin.qq.com/miniprogram/design/index.html?t=18111920

登錄授權(quán)

什么是登錄授權(quán):
確切的說是使用微信號登錄小程序褒侧,需要用戶手動點擊同意授權(quán),即可使用微信號登錄谊迄,便利性在于不用注冊闷供,一鍵登錄!
接口文檔:https://developers.weixin.qq.com/miniprogram/dev/api/wx.login.html

小程序登錄流程時序圖

授權(quán)后獲取的是微信什么信息统诺?
獲取微信號歪脏、頭像、昵稱粮呢、性別婿失、地區(qū)、綁定的手機號碼啄寡、openid豪硅、unionid。

怎么設計挺物?
1懒浮、筆者的設計思路是:在需要獲取用戶信息的地方,如互動操作识藤、表單交互砚著、個人中心,而不是一打開小程序就讓授權(quán)痴昧,一打開就提示授權(quán)容易被用戶拒絕赖草。這里需要特別強調(diào)常遺漏拒絕授權(quán)后的場景設計〖舾觯可以參考「美團」系列小程序,都是在適當?shù)臅r候提示授權(quán)。
2扣囊、但是筆者還是看見絕大多數(shù)小程序是在首次進入小程序就讓授權(quán)乎折,如「步數(shù)寶」小程序授權(quán),但是這個拒絕后是無法使用其它服務的侵歇。這種設計方式就是簡單粗暴骂澄,無腦設計,因為完全可以不用考慮拒絕后的場景設計惕虑。

步數(shù)寶小程序授權(quán)界面

「美篇」小程序也是首次登錄就讓授權(quán)坟冲,否則無法瀏覽任何界面信息,如下圖:

美篇小程序授權(quán)界面

可以不用微信號登錄嗎溃蔫?
可以健提,除了使用微信號登錄外還可以使用手機號碼和驗證碼登錄,如美團小程序的登錄界面有兩種選擇:

美團小程序登錄頁

使用微信號登錄后可以退出登錄嗎伟叛?
1私痹、大部分小程序都沒有設計退出登錄功能,理由可能就是不想讓用戶退出登錄统刮,當用戶刪除小程序后需要重新登錄紊遵。
2、更甚有開發(fā)者這么設計侥蒙,刪除后再打開不用重新授權(quán)暗膜,等于永遠都是登錄狀態(tài),如「泰禾生活」小程序鞭衩,感興趣的朋友可以去體會一下~Q选(ps:這是朋友公司的老板需求??)
3、當然也可以設計退出出口醋旦。

刪除小程序后用戶數(shù)據(jù)還在嗎恒水?
1、如果用戶信息是存儲在微信緩存里饲齐,那么刪除小程序就沒有用戶數(shù)據(jù)了钉凌,筆者曾經(jīng)玩一個切水果的小游戲,玩到300多關(guān)不小心刪除了小游戲捂人,結(jié)果重新打開后發(fā)現(xiàn)數(shù)據(jù)沒了……所以刪除需謹慎御雕,天黑路滑,你是猜不到偉大的開發(fā)者是怎么設計的滥搭。酸纲。
2、如果用戶信息是存儲在數(shù)據(jù)庫里瑟匆,刪除后當然還在啦闽坡。

Openid和UnionID

什么是openid?
用戶的唯一標識,一個openid對應一個公眾號疾嗅。

什么是unionid外厂?
用戶的統(tǒng)一標識,同一用戶代承,對同一個微信開放平臺下的不同應用汁蝶,unionid是相同的,即用戶帳號互通论悴。
接口文檔:https://developers.weixin.qq.com/miniprogram/dev/api/uinionID.html

微信的用戶隱私策略:每個接入微信的應用(公眾號掖棉、APP)就像一個獨立的商場,用戶使用這些應用就像逛商場膀估,商場用會員卡識別用戶幔亥,類似的,我們根據(jù)商場名字為每個用戶生成了一張專屬會員卡(openid)玖像,每張會員卡只能在對應的商場才能夠使用紫谷,你不能拿著沃爾瑪?shù)臅T卡去華潤萬家積分。這是一種安全的授權(quán)方式捐寥,如果沒有這個會員卡笤昨,直接暴露微信號,就相當于拿著身份證去逛商場握恳,丟失一個會員卡號遠比丟失身份證號要安全瞒窒。

那么問題來了,都是萬達集團乡洼,萬達大歌星與萬達商場希望做到會員卡通用崇裁。微信在這里做了一個打通機制,對于同一個企業(yè)束昵,在用戶屬性里面加了一個企業(yè)屬性(UnionID)拔稳,方便同一個企業(yè)在不同的產(chǎn)品中識別到同一個用戶。

這個機制伴隨著微信聯(lián)合登錄已經(jīng)在微信開放平臺(open.weixin.qq.com)推出了锹雏。獲得了開放平臺認證的企業(yè)巴比,可以綁定10個手機應用、10個網(wǎng)站礁遵、10個公眾號轻绞,他們對應的用戶信息也可以互聯(lián)互通。

強烈提示:對于開發(fā)團隊而言佣耐,在接入微信登錄之初政勃,往往會忽視用戶的UnionID,只記錄了openid兼砖。這會導致后期賬號打通時候奸远,需要用戶重新授權(quán)既棺,運營成本增高,遇到此類問題的團隊不在少數(shù)懒叛。

獲取地理位置

獲取的是用戶的什么地理位置援制?
獲取用戶當前的微信地理位置、速度芍瑞,調(diào)用此接口需要用戶授權(quán)侯繁。
接口文檔:https://developers.weixin.qq.com/miniprogram/dev/api/wx.getLocation.html

何時出現(xiàn)彼哼?
筆者的設計原則是:在需要獲取地理位置的頁面調(diào)用此接口乓梨,非首次進入就調(diào)用此接口织咧。

小程序銷毀

微信主動銷毀
當小程序進入后臺吗冤,客戶端會維持一段時間的運行狀態(tài)拇囊,超過一定時間后(目前是5分鐘)會被微信主動銷毀盗誊。

自動銷毀

小程序緩存

什么是小程序緩存甩栈?
同瀏覽器緩存逝钥,保存在本地屑那。

怎么清除緩存?
同一個小程序的開發(fā)版艘款、體驗版持际、線上版的緩存是共用的,你需要同時刪除這三個版本的小程序哗咆,緩存才會被刪除蜘欲。

不清除緩存就不能看見最新版小程序了嗎?
1晌柬、微信會固定一段時間后自動清除小程序緩存姥份,如果沒清除緩存則不能馬上看到最新版的小程序;
2年碘、如果想看到最新版的小程序可以手動刪除小程序澈歉,如果不想讓用戶手動清除緩存,可以添加更新提示屿衅,詳見下一條更新提示埃难。

更新機制

冷啟動
小程序首次打開或銷毀后再次被打開,小程序冷啟動時傲诵,會檢查小程序是否有最新版本凯砍。如果有則將異步下載最新版本,但是仍將運行當前版本等到下一次冷啟動時再運行最新版本拴竹。
熱啟動
小程序打開后悟衩,在一段時間內(nèi)(目前:5分鐘)再次被打開,此時會將后臺的小程序切換到前臺栓拜。
小程序迭代速度比較快座泳,比如修復某個BUG惠昔,每次發(fā)布了新的代碼,更新不及時挑势,著急的時候镇防,得讓用戶刪除小程序再進入才可以。這時候就需要使用強制更新技術(shù)潮饱,調(diào)用wx.getUpdateManager API進行處理来氧,這樣用戶打開小程序?qū)霈F(xiàn)更新提示,就不用讓用戶手動刪除小程序啦香拉。接口文檔:https://developers.weixin.qq.com/miniprogram/dev/api/wx.getUpdateManager.html?search-key=%E6%9B%B4%E6%96%B0

引導添加小程序

什么情況下引導啦扬?
在最能吸引用戶回頭率的業(yè)務場景中引導用戶添加小程序。

可以判斷用戶是否添加過當前小程序嗎凫碌?
因為微信沒有提供此接口扑毡,所以開發(fā)者無法判斷用戶是否添加過某小程序。

如何設計盛险?
手動點擊「已添加小程序」或者「我知道了」后則不再彈出瞄摊,如下圖:

首次打開美團小程序

公眾號關(guān)注組件

用戶掃碼打開小程序時,開發(fā)者可在小程序內(nèi)配置公眾號關(guān)注組件苦掘,方便用戶快捷關(guān)注公眾號换帜,實現(xiàn)一碼兩用使用場景。
開發(fā)文檔:https://developers.weixin.qq.com/miniprogram/dev/component/official-account.html
例:騰訊官方小程序「小經(jīng)費」鸟蜡,在小程序首頁加入公眾號關(guān)注組件

騰訊小經(jīng)費小程序

壓縮圖片接口

用于前端壓縮圖片膜赃,可選壓縮質(zhì)量。
接口文檔:https://developers.weixin.qq.com/miniprogram/dev/api/wx.compressImage.html?from=groupmessage&isappinstalled=0

小程序轉(zhuǎn)發(fā)

微信不提倡開發(fā)者誘導或強制用戶轉(zhuǎn)發(fā)至朋友圈揉忘,如轉(zhuǎn)發(fā)后才能解鎖某項功能等跳座。
不自定義轉(zhuǎn)發(fā)圖片的情況下,默認會取當前頁面泣矛,從頂部開始疲眷,高度為 80% 屏幕寬度的圖像作為轉(zhuǎn)發(fā)圖片。
文檔說明:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share.html

小程序跳轉(zhuǎn)

在小程序里打開另外一個小程序
接口文檔:https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateToMiniProgram.html

返回到上一個小程序
只有在當前小程序是被其他小程序打開時可以調(diào)用成功您朽。
接口文檔:https://developers.weixin.qq.com/miniprogram/dev/api/wx.navigateBackMiniProgram.html

內(nèi)容安全

當小程序提供UGC內(nèi)容時狂丝,需要接入內(nèi)容安全接口,否則審核有可能不通過哗总。
文字審核接口:https://developers.weixin.qq.com/miniprogram/dev/api/msgSecCheck.html
圖片審核接口:https://developers.weixin.qq.com/miniprogram/dev/api/imgSecCheck.html

模版消息

去「微信公眾平臺」設置模版几颜,拿到模板ID和模版格式,然后進行開發(fā)讯屈。開發(fā)完成后用戶就可以在微信服務通知里接收到模版消息了蛋哭。
開發(fā)文檔:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/template-message.html

服務通知

什么是服務通知?
可以理解為它是個推送消息的微信服務號涮母,用于接收各個小程序的模版消息谆趾,對應技術(shù)是模版消息躁愿。
小程序不能隨意給用戶推送消息,只有當用戶跟小程序發(fā)生互動行為后沪蓬,才具備推送通知的能力彤钟。

如何讓用戶與小程序發(fā)生互動行為?
1跷叉、支付逸雹,1次支付可推送3條,多次支付時推送條數(shù)獨立云挟,支付后7天內(nèi)有效峡眶;
2、提交表單植锉,1次提交表單可推送1條,多次提交時推送條數(shù)獨立峭拘,表單提交后7天內(nèi)有效俊庇。

注意事項:
1、用戶基本都不會關(guān)閉微信的消息推送鸡挠,所以相比較 App推送和短信推送來說辉饱,小程序的推送觸達率會高很多。
2拣展、但如果做的太過分了彭沼,惡意誘導用戶進行觸發(fā)操作令用戶反感,會有被用戶拒收該小程序模版消息的風險备埃。

如何設計姓惑?
很多開發(fā)者會把推送的主題字號加大,也可以加上五彩斑斕的顏色按脚,或者給內(nèi)容加一些 Emoji于毙,意圖制造出Duang~ Duang~ Duang~的效果,吸引用戶的注意力辅搬。

微信服務通知

客服消息

小程序內(nèi)置客服唯沮,點擊這里查看詳情
開發(fā)文檔:https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/customer-message/customer-message.html

用戶反饋

1堪遂、可用「騰訊吐個槽」小程序快速建立小程序用戶反饋平臺介蛉,對應技術(shù)是小程序跳轉(zhuǎn)。
官網(wǎng):https://tucao.qq.com/
2溶褪、也可使用小程序插件來建立币旧,請在「微信公眾號平臺-插件」里搜索「騰訊吐個槽」。

附近的小程序

在「微信公眾平臺」開啟附近的小程序后竿滨,用戶可以在「微信-發(fā)現(xiàn)-小程序-附近的小程序」里查找到佳恬。

小程序?qū)徍?br>

小程序?qū)徍艘话?4H內(nèi)會審核通過捏境,但是如果你的小程序涉及社交、提現(xiàn)毁葱、紅包等內(nèi)容時則需要當?shù)毓ば挪慷螌徍说嫜裕瑢徍藭r間7-14日,請開發(fā)者做好心理準備倾剿,避免在預計的上線時間時拉閘筷频。

圖片縮放和裁剪

https://developers.weixin.qq.com/miniprogram/dev/component/image.html

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市前痘,隨后出現(xiàn)的幾起案子凛捏,更是在濱河造成了極大的恐慌,老刑警劉巖芹缔,帶你破解...
    沈念sama閱讀 218,858評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件坯癣,死亡現(xiàn)場離奇詭異,居然都是意外死亡最欠,警方通過查閱死者的電腦和手機示罗,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,372評論 3 395
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來芝硬,“玉大人蚜点,你說我怎么就攤上這事“枰酰” “怎么了绍绘?”我有些...
    開封第一講書人閱讀 165,282評論 0 356
  • 文/不壞的土叔 我叫張陵,是天一觀的道長迟赃。 經(jīng)常有香客問我陪拘,道長,這世上最難降的妖魔是什么纤壁? 我笑而不...
    開封第一講書人閱讀 58,842評論 1 295
  • 正文 為了忘掉前任藻丢,我火速辦了婚禮,結(jié)果婚禮上摄乒,老公的妹妹穿的比我還像新娘悠反。我一直安慰自己,他們只是感情好馍佑,可當我...
    茶點故事閱讀 67,857評論 6 392
  • 文/花漫 我一把揭開白布斋否。 她就那樣靜靜地躺著,像睡著了一般拭荤。 火紅的嫁衣襯著肌膚如雪茵臭。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,679評論 1 305
  • 那天舅世,我揣著相機與錄音旦委,去河邊找鬼奇徒。 笑死,一個胖子當著我的面吹牛缨硝,可吹牛的內(nèi)容都是我干的摩钙。 我是一名探鬼主播,決...
    沈念sama閱讀 40,406評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼查辩,長吁一口氣:“原來是場噩夢啊……” “哼胖笛!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起宜岛,我...
    開封第一講書人閱讀 39,311評論 0 276
  • 序言:老撾萬榮一對情侶失蹤长踊,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后萍倡,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體身弊,經(jīng)...
    沈念sama閱讀 45,767評論 1 315
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,945評論 3 336
  • 正文 我和宋清朗相戀三年列敲,在試婚紗的時候發(fā)現(xiàn)自己被綠了佑刷。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 40,090評論 1 350
  • 序言:一個原本活蹦亂跳的男人離奇死亡酿炸,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出涨冀,到底是詐尸還是另有隱情填硕,我是刑警寧澤,帶...
    沈念sama閱讀 35,785評論 5 346
  • 正文 年R本政府宣布鹿鳖,位于F島的核電站扁眯,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏翅帜。R本人自食惡果不足惜姻檀,卻給世界環(huán)境...
    茶點故事閱讀 41,420評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望涝滴。 院中可真熱鬧绣版,春花似錦、人聲如沸歼疮。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,988評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽韩脏。三九已至缩麸,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間赡矢,已是汗流浹背杭朱。 一陣腳步聲響...
    開封第一講書人閱讀 33,101評論 1 271
  • 我被黑心中介騙來泰國打工阅仔, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人弧械。 一個月前我還...
    沈念sama閱讀 48,298評論 3 372
  • 正文 我出身青樓八酒,卻偏偏與公主長得像,于是被迫代替她去往敵國和親梦谜。 傳聞我的和親對象是個殘疾皇子丘跌,可洞房花燭夜當晚...
    茶點故事閱讀 45,033評論 2 355