【小程式】—- 基礎知識匯總

  • 2020 年 3 月 14 日
  • 筆記

一、基本問題

1、生命周期
(1)全局
  • onLaunch:初始化完成時
  • onShow:小程式啟動或從後台進入前台顯示時
  • onHide:小程式隱藏,從前台進入後台時
  • onError:小程式發生腳本錯誤,或api調用失敗時觸發,會帶上錯誤資訊
  • onPageNotFound:小程式要打開的頁面不存在時觸發,會帶上頁面資訊回調函數
(2)頁面
  • onLoad:監聽頁面載入
  • onReady:監聽頁面初次渲染完成
  • onShow:監聽頁面顯示
  • onHide:監聽頁面隱藏
  • onUnload:監聽頁面卸載
  • onPullDownRefresh:監聽用戶下拉動作
  • onReachBottom:頁面上拉觸底事件的處理函數
  • onShareAppMessage:用戶點擊右上角分享
  • onPageScroll:頁面滾動觸發事件的處理函數
  • onTabItemTap:當前是tab頁時,點擊tab時觸發
  • onResize:監聽當頁面尺寸發生改變的時候
 
2、基礎使用
小程式尺寸單位:rpx
常用標籤:<view><test><block><image><scroll-view><swiper>
常用屬性:wx:for,wx:if,wx:else,wx:key
事件綁定:bindtap,catchtap  
動態設置當前頁面標題:wx.setNavigationBarTitle()

 
3、路由跳轉方式
a.組件 
 <navigator></navigator>
b.方法
 wx.switchTab:只跳轉到 tabBar 頁面,並關閉其他所有非 tabBar 頁面。【Tab切換】
 wx.reLaunch: 關閉所有頁面,打開到應用內的某個頁面。【重啟動】
 wx.redirectTo:關閉當前頁面,打開任意非tabBar頁面。【頁面重定向】
 wx.navigateTo:保留當前頁面,打開任意非tabBar頁面,使用 wx.navigateBack 可以返回到原頁面,最多十層。【打開新頁面】
 wx.navigateBack:關閉當前頁面,返回上一頁面或多級頁面。【頁面返回】

 
4、路由傳參/頁面傳值
a. 給<navigator>添加 ‘data-xxx’ 屬性來傳遞我們需要的值,然後通過綁定事件的 e.currentTarget.dataset 或 onLoad 的 param 參數獲取
b. 設置 id 的方法標識來傳值,即標籤添加’data-id’ 屬性通過 e.currentTarget.id 獲取設置的id值,然後通過設置全局對象的方式傳遞到 app.globalData,在onLoad中使用option參數接收
c. 在 navigator 路由跳轉的路徑中添加參數傳值,可以進行拼接或傳對象,在onLoad中使用option參數接收

 
5、組件和頁面之間傳值
a. 組件傳給頁面 – 通過事件觸發
* 組件的點擊事件中:this.triggerEvent(‘eventName’, ‘傳給頁面的值’);
* 頁面wxml中:<myComponent bind:eventName=”change”></myComponent>
* 頁面js中: change(e){console.log(e.detail)} //接收值
 
b. 頁面傳給組件 – 通過properties
* 頁面wxml中:<myComponent xxx=”哈哈”></myComponent>
* 組件js中:
properties: {
    xxx:{
        type:String,
        value: ‘默認值’,
        observer:function(newVal,oldVal){ // 可檢驗傳遞的值
            console.log(newVal, oldVal)
        }
    }
}

 
6、數據雙向綁定
小程式直接修改this.data的屬性是不可以同步到視圖的,必須調用this.setData。
 
7、事件
a、冒泡事件
bindtap事件綁定不會阻止冒泡事件向上冒泡。
b、非冒泡事件
catchtap事件綁定可以阻止冒泡事件向上冒泡。

 
8、快取,存儲
a、非同步 
// 存儲數據
wx.setStorage({ 
    key:快取數據的名稱,
    data:需要快取的數據, 
    success:成功回調 
}) 
// 獲取數據
wx.getStorage({ 
    key:”需要獲取數據的名稱”, 
    success:成功的回調 
})
// 清除數據
 wx.removeStorage(key) 
 
b、同步 
wx.setStorageSync(key,val)
wx.getStorageSync(key) 
wx.removeStorageSync(key)

 
9、授權 (點擊button)
目前不推薦使用wx.getUserInfo(),建議通過button按鈕發起用戶授權。
<button open-type=”getUserInfo” bindgetuserinfo=”onGotUserInfo”>

 
10、封裝請求
– 具體需要根據實際項目需求進行封裝
– 參考:https://www.jianshu.com/p/2e80c96ce712
– 小程式默認請求:wx.request()

 
11、封裝api
– 將所有介面放在統一的js文件並導出
– 在app.js中創建封裝請求數據的方法
– 在子頁面中調用封裝的方法請求數據

 
12、自定義組件
1、通過Component({})來創建一個組件,注意組件中的事件需要寫在methods中,最好以下劃線開頭
2、在使用組件的時候,在頁面的配置項中配置usingComponents, key值為組件名稱,val值為組件路徑 
3、頁面與組件進行傳值的時候,在組件內部通過properties進行接收
4、詳細了解:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/
4、封裝組件步驟:
  • 在components中創建組件
  • 組件json中添加:{ “component”: true}
  • 頁面json中添加:{ “usingComponents”: { “組件名”: “組件路徑” } }
  • 頁面wxml中添加:<myComponent></myComponent>

 
二、功能問題
1、登錄
前端邏輯:
– 調用 wx:login(),獲取code
– 調用後端登錄介面,並將code傳遞過去,後端返回token
– 將token保存到本地
– 在app.js的onLaunch生命周期中,使用 checkSession 驗證登錄狀態,若失效,則清除本地token,引導用戶重新登錄(也可以在封裝的請求里)
 
後端邏輯:
– 獲取code
– 結合appid,appsecret,code, 換取openid,session_key(不能給前端)
– 將wx的openid和本項目的用戶系統進行關聯
– 根據openid找到uid,將uid變成token返回前端

 
2、支付
– 前端調用下單介面,後端存儲數據,處於未支付狀態
– 後端請求微信的伺服器,微信伺服器驗證身份,驗證成功後返回prepay_id預訂單id
– 後端接收到預訂單id後進行加密操作,並將五個參數返回給前端
– 前端調用wx.requestPayment()方法,用戶完成支付後將資訊發送給微信伺服器
– 微信伺服器告知前端支付結果,前端進行展示
– 微信伺服器再告知後端,後端將未付款的訂單更新成已支付

 
3、地圖
– <map> 配置項:
   marker 標記點用於在地圖上顯示標記的位置
   control 在地圖上顯示控制項,控制項不隨著地圖移動。即將廢棄,請使用 cover-view
– 獲取用戶地理位置:wx.getLocation({})
– 獲取用戶的收貨地址 wx.chooseLocation({})
– 如何調用地圖控制項 wx.createMapContext({})
– 獲取系統資訊 例如螢幕寬度高度 wx.getSystemInfo({})

 
4、音樂
a. 如何調用音頻控制項 
wx.createInnerAudioContext() 
 
b. 如何播放音樂 
let audio = wx.createInnerAudioContext() 
audio.play() 
 
c. 如何監聽是否播放 
let audio = wx.createInnerAudioContext() 
audio.onPlay(()=>{}) 
 
d. 如何獲取音樂時間的總長度 let audio = wx.createInnerAudioContext() 
//一定要在開始播放後獲取 
audio.onTimeUpdate((res)=>{ audio.duration })
 
e. 如何獲取音樂實時播放的時間 let audio = wx.createInnerAudioContext() 
//一定要在開始播放後獲取 
audio.onTimeUpdate((res)=>{ audio.currentTime }) 
 
f. 如何將音樂時間 跳轉到指定位置 
let audio = wx.createInnerAudioContext() audio.seek(number) 
 
g. 如何檢測音樂的播放狀態 
let audio = wx.createInnerAudioContext() 
audio.paused: true 的話我們可以調用 audio.play()方法進行播放;false的化我們可以調用 audio.paused()方法暫停播放。

 
5、下拉刷新
在json文件配置:{“enablePullDownRefresh”: true}
 
– 設置onPullDownRefresh函數實現【主要用這個方式】
– 監聽scroll-view,bindscrolltolower滑動到底部的監聽
– 停止下拉刷新 wx.stopPullDownRefresh()

 
6、上拉載入
上拉載入時使用數組拼接:showList: […this.data.showList, …data.data.data.list],思路就是將新獲取的數據追加到data的原始數據中。
 
具體實現:https://www.jianshu.com/p/ab4b366b147f

 
7、轉發分享
– onShareAppMessage():點擊右上角菜單中的“轉發”按鈕
– <button open-type=’share’>:點擊頁面按鈕分享轉發
– wx.hideShareMenu():隱藏轉發按鈕,關閉轉發功能
– 獲取更多轉發資訊:如轉發到群獲取群的標識
     a. 通過在 onLoad 和 onShow 中調用 wx.showShareMenu 並且設置 withShareTicket 為 true ;
     b. 當用戶將小程式轉發到任一群聊之後被其他用戶打開時,可以在 App.onLaunch 或 App.onShow 獲取到一個 shareTicket ;
     c. 通過調用 wx.getShareInfo() 介面傳入此 shareTicket 可以獲取到轉發資訊。

 
8、動態修改樣式
a. 利用三目運算控制樣式有無   <button class=”{{aaa === true ? ‘buttonActive’ : ”}}”>
b. JS動態修改樣式   <view style="background:{{background}};"> 通過setData動態修改數據

 
9、背景圖的引用 
微信小程式中不允許引入本地路徑背景圖 
 
解決方案: 
1、base64:引入圖片 http://imgbase64.duoshitong.com/ 
2、伺服器地址引入圖片 background:url(‘http://192.168.31.163:8020/pr/source/img/searchLeft.png’)

 
10、點擊圖片進行預覽、長按轉發、保存、識別圖中二維碼
當預覽的是本地的圖片時,圖片不能載入,只有來自於網上或者是通過手機相冊選擇、拍照獲取的圖片才可以成功顯示,並且只能掃描小程式碼。
a. 小程式中的圖片不能識別除小程式碼以外的二維碼
b. 並且僅在 wx.previewImage 中支援長按識別
     wx.previewImage({
         current: this.data.imgalist,  // 當前顯示圖片的http鏈接
          urls: this.data.imgalist  // 需要預覽的圖片http鏈接列表
     })  

 
11、在小程式中如何打開另一個小程式
第一種:<navigator target=”miniProgram”>
第二種:
wx.navigateToMiniProgram({   
    appId: ”,  // 要打開小程式的appId 
    path: ‘page/index/index?id=123’,  // 要打開的頁面路徑,如果為空則打開首頁 
     extraData: {   // 需要傳遞給目標小程式的數據,目標小程式可在 App.onLaunch,App.onShow 中獲取到這份數據
        foo: ‘bar’
     },
     envVersion: ‘develop’, 
     success(res) { 
        // 打開成功 
     } 
})
 
註:當小程式需要使用 wx.navigateToMiniProgram 介面跳轉到其他小程式時,需要先在app.json配置文件中聲明需要跳轉的小程式 appId 列表,最多允許填寫 10 個。
“navigateToMiniProgramAppIdList”: [
    “要跳轉小程式的appId”
]

 
12、webview中的頁面怎麼跳回小程式中 
– 首先要引入最新版的jweixin-1.3.2.js
– 調用  wx.miniProgram.navigateTo({ url: ‘/pages/login/login’+’$params’ }) //小程式鏈接
– 小程式頁面中  <web-view :src=”link”></web-view>  // link為要打開的h5鏈接

 
13、小程式打開APP
<button open-type=”launchApp” app-parameter=”wechat” binderror=”launchAppError”>打開APP</button>
  • open-type=“launchApp” 開放能力
  • app-parameter=“wechat” 傳參
  • binderror=“launchAppError” 失敗回調
註:Android和 ios 端需要進行相應的配置。

 
14、解析富文本編輯器
<rich-text>
其他方式參考:https://www.cnblogs.com/mcll/p/11699405.html

 
15、如何分包載入?分包載入的優勢在哪?
– 開發者需要將小程式劃分成不同的子包,在構建時打包成不同的分包,用戶在使用時按需進行載入。主包,即放置默認啟動頁面/TabBar 頁面,以及所有分包都需用到的公共資源/JS 腳本;而分包則是根據開發者的配置進行劃分。
– 目前小程式分包大小有以下限制:
  • 整個小程式所有分包大小不超過 12M
  • 單個分包/主包大小不能超過 2M
– 優勢:對小程式進行分包,可以優化小程式首次啟動的下載時間,以及在多團隊共同開發時可以更好的解耦協作。
 

三、綜合問題

1、小程式和原生app對比
小程式除了擁有公眾號的低開發成本、低獲客成本低以及無需下載等優勢,在服務請求延時與用戶使用體驗是都得到了較大幅度的提升,使得其能夠承載跟複雜的服務功能以及使用戶獲得更好的用戶體驗。同時解決了App長期以來多平台適配、多應用市場分發、開發成本居高不下等諸多方面的問題。
 
2、小程式優劣勢
優勢:
1)容易上手,只要之前有HTML+CSS+JS基礎知識,寫小程式基本上沒有大問題;當然如果了解ES6+CSS3則完全可以編寫出即精簡又動感的小程式;
2)基本上不需要考慮兼容性問題,只要微信可以正常運行的機器,就可以運行小程式;
3)基本組件庫已經比較齊全:Toast,Loading框,Picker,定位及地圖,Image,Input,Checkbox,Text,TextArea,ScrollView等常用的組件都有,而且使用也挺簡單、方便;
4)發布、審核高效,基本上上午發布審核,下午就審核通過,升級簡單,而且支援灰度發布;
5 ) 微信官方提供使用人數、頻率等數據統計,小程式js腳本執行錯誤日誌;
6)開發文檔比較完善,開發社區比較活躍;
7)最近剛開放的牛x功能,新增webview組件,可以展示網頁啦,這個比較爽;
8)支援插件式開發,一些基本功能可以開發成插件,供多個小程式調用;
 
劣勢:
1)後台調試麻煩,因為API介面必須https請求,且公網地址,也就是說後台程式碼必須發布到遠程伺服器上;當然我們可以修改host進行dns映射把遠程伺服器轉到本地,或者開啟tomcat遠程調試;不管怎麼說終歸調試比較麻煩;
2)前台測試有諸多坑,最頭疼莫過於模擬器與真機顯示不一致(之前碰到一個案例,後續單獨講解);
3)真機測試,個別功能Android和蘋果表現迥異,我們的小程式里有很多頁面有定位功能,模擬器和iphone定位瞬間完成,然而Android手機就蛋疼了,老顯示“定位中…”要很久才能定位好。後來沒辦法只能優化,減少定位次數;
4)native組件,展示很不好,比如textarea,不能在滾動頁面出現,而且至於頂層,經常其它組件會被它遮擋,點擊其它組件時,就進入textarea輸入框;畫布組件也是如此;
5)頁面跳轉深度不能超過5個頁面,這個比較麻煩,有些複雜的頁面跳轉沒法實現,不過太複雜的話也有悖小程式簡單易用的原則啦;
6)小程式升級問題,官方文檔說會自動更新,實際情況往往是要先把原來的小程式刪除掉,重新搜索添加,才能載入最新版本;
7)頁面渲染穩定性有待提高,已經好幾次出現部分用戶的頁面顯示異常,整個頁面被放大了好幾倍,先刪除原來小程式再添加回來,如此重複好幾次,才能顯示正常;
8)js引用只能使用絕對路徑,很蛋疼;基於安全性及MINA框架實現原理,小程式中對js使用做了很多限制,不能使用:new Function,eval,Generator,不能操作cookie,不能操作DOM;
9)開發工具bug比較多且效率比較低,三天兩頭升級,解決老問題的同時又出現問題;文件查找、資源定位、程式碼編輯較eclipse有一定差距。經常出現把a.js當做b.js來修改。
 
3、原生/wepy/mpvue 框架對比
– 個人認為,如果是新項目,且沒有舊的 h5 項目遷移,則考慮用小程式原生開發,好處是相比於第三方框架,坑少。
– 而如果有 老的 h5 項目是 vue 開發 或者 也有 h5 項目也需要小程式開發,則比較適合 wepy 或者 mpvue 來做遷移或者開發,近期看wepy幾乎不更新了,所以推薦美團的mpvue。
– 而如果如果團隊前端強大,自己做一套框架也沒問題。

 
4、如何提高小程式應用速度
– 提高頁面載入速度:點擊後跨頁面預載入功能(但容易使邏輯混亂)
– 用戶行為預測:不用點擊直接預載入下個頁面數據
– 減少默認data大小:打開一個新頁面時微信會深拷貝一個Page對象
– 盡量組件化

 
5、開發小程式流程
– 微信公眾平台:註冊小程式,配置
– 微信開發者工具:微信掃碼登錄
– 前期:小程式需要公司管理員進行企業認證
– 生成體驗版:
     微信公眾平台 》 用戶身份 》成員管理 》 編輯  》 添加成員 [微訊號,體驗許可權打鉤]
     微信開發者工具 》 上傳
     微信公眾平台 》 開發管理 》 開發版本 》 箭頭 》將剛剛上傳的小程式設置為體驗版本 》 生成二維碼
– 測試:使用真機調試,否則調介面容易出問題
– 上傳發布審核上線:點擊上傳,輸入相關版本號確定之後可在微信小程式後台管理處看到提交的版本。提交之後進入審核中,通過審核之後發布上線。

 

四、項目問題 

1、調用後端介面遇到什麼問題
– 數據的大小有限制,超過範圍會直接導致整個小程式崩潰,除非重啟小程式;
– 小程式不可以直接渲染文章內容頁這類型的html文本內容,若需顯示要借住插件,但插件渲染會導致頁面 載入變慢,所以最好在後台對文章內容的html進行過濾,後台直接處理批量替換p標籤div標籤為view標籤,然後其它的標籤讓插件來做,減輕前端的時間。

 
2、開發過程中遇到什麼坑
1、app.json配置文件中不能寫注釋;
2、在json文件中沒有寫內容的時候也要加一對大括弧{ },不然的話也會報錯;
3、模擬訪問本地介面時,需要在詳情=》項目設置=》里勾選:不校驗合法域名、web-view(業務域名)、TLS 版本以及 HTTPS 證書,否則報錯;
4、解決 text 設置行高 line-height 無效的問題:在父級設置行高;
5、text套text,然後第二個text綁定點擊事件會失效;
6、input組件獲得焦點時placeholder內容有重影BUG:這是小程式input組件自身bug,可以在input組件上添加其他標籤定位上去,用來顯示placeholder內容,獲得焦點時消失,失去焦點時顯示;
7、待補充…

 

3、項目中涉及的小技能案例
日後整理到部落格中…  
部落格地址:https://www.cnblogs.com/pinkpinkc/

 

 

綜上,一些答案參考了各路大神,忘記出處見諒…

另,錯誤地方歡迎指出~