首頁小程序開發正文

微信小程序開發有(yǒu)哪些坑（微信小程序開發有(yǒu)用嗎）

小程序開發 2023-02-27T14:18:08 2361

本篇文章(zhāng)給大家談談微信小程序開發有(yǒu)哪些坑，以及微信小程序開發有(yǒu)用嗎對應的(de)知識點，希望對各位有(yǒu)所幫助，不要忘了收藏本站喔。本文目錄一(yī)覽： 1、微信小程序藍牙入坑總結

本篇文章(zhāng)給大家談談微信小程序開發有(yǒu)哪些坑，以及微信小程序開發有(yǒu)用嗎對應的(de)知識點，希望對各位有(yǒu)所幫助，不要忘了收藏本站喔。

本文目錄一(yī)覽：

1、微信小程序藍牙入坑總結
2、小程序開發有(yǒu)哪些坑
3、微信小程序開發中遇到的(de)坑及解決辦法
4、開發微信小程序的(de)“雷區”有(yǒu)哪些？
5、微信小程序開發-服務端session值取不到；小程序res.header['Set-Cookie']隐藏的(de)坑

微信小程序藍牙入坑總結

微信小程序的(de)藍牙流程按着官網的(de)說明寫就可(kě)以了，具體參看文檔：小程序開發文檔

坑列表：

1.成對調用需要注意， wx.openBluetoothAdapter 與 wx.closeBluetoothAdapter

wx.startBluetoothDevicesDiscovery 與 wx.stopBluetoothDevicesDiscovery

2.安卓與IOS的(de)區别：安卓可(kě)以根據藍牙标識直接連接，IOS則必須先搜索才能進行(xíng)連接；

3.權限問題：IOS的(de)系統不能僅僅打開系統的(de)藍牙權限，因為(wèi)IOS新版本針對藍牙做(zuò)了應用及的(de)限制，因此需要給微信藍牙權限才可(kě)以使用；對于安卓系統，部分手機(jī)必須打開定位權限才能搜索到藍牙設備

4.創建連接API( wx.createBLEConnection )調用失敗:

超時報錯:{"errCode":10012,"errMsg":"createBLEConnection:fail:operate time out"}

連接超時:{"errCode":10003,"errMsg":"createBLEConnection:fail connect time out."}

連接失敗:{"errCode":10003,"errMsg":"createBLEConnection:fail:connection fail status:133"}

基本都是安卓手機(jī)出現以上問題，針對這些報錯，需編寫重試連接操作，很大概率能解決此問題；

5.搜索不到任何設備,安卓手機(jī)可(kě)能是定位權限的(de)問題造成，蘋果手機(jī)基本就是設備出問題了

6.網絡請求與藍牙請求盡量分開，因為(wèi)藍牙連接會受到影響，造成一(yī)些異常信息；

7.所有(yǒu)API調用針對fail函數最好都做(zuò)一(yī)次重試，因為(wèi)再次重試可(kě)能就會成功；、

8.API調用之間最好有(yǒu)一(yī)定毫秒數的(de)間隔，目前懷疑api部分機(jī)型會存在延時；

總之微信的(de)藍牙連接就那些已知的(de)接口，調用時多考慮異常的(de)情況下的(de)重試，簡單總結下，以便查閱。

小程序開發有(yǒu)哪些坑

1. JSON 配置文件小程序中，包含唯一(yī)的(de)全局配置文件 app.json，以及每個頁面的(de)配置文件 page.json。每單頁頁面相應的(de) JSON 文件會覆蓋與 app.json 相同的(de)配置項。如(rú)下，是一(yī)個包含了所有(yǒu)配置選項的(de)簡單配置 app.json。"pages": [ //設置頁面的(de)路徑"pages/index/index", //不需要寫index.wxml,index.js,index,wxss,框架會自(zì)動尋找并整合"pages/logs/logs"],"window": { //設置默認窗口的(de)表現形式

"navigationBarBackgroundColor": "#ffffff", //頂部導航欄背景色

"navigationBarTextStyle": "black", //頂部導航文字的(de)顔色 black/white

"navigationBarTitleText": "微信接口功能演示", //頂部導航的(de)顯示文字

"backgroundColor": "#eeeeee", //窗口的(de)背景色

"backgroundTextStyle": "light", //下拉背景字體、loading 圖的(de)樣式，僅支持 dark/light

"enablePullDownRefresh": "false"， //是否支持下拉刷新，不支持的(de)話就直接不寫！

"disableScroll": true, // 設置true不能上下滾動，true/false，注意！隻能在 page.json 中有(yǒu)效，無法在 app.json 中設置該項。},"tabBar": { //底部tab或者頂部tab的(de)表現，是個數組，最少配置2個，最多5個

"list": [{ //設置tab的(de)屬性，最少2個，最多5個

"pagePath": "pages/index/index", //點擊底部 tab 跳轉的(de)路徑

"text": "首頁", //tab 按鈕上的(de)文字

"iconPath": "../img/a.png", //tab圖片的(de)路徑

"selectedIconPath": "../img/a.png" //tab 在當前頁，也就是選中狀态的(de)路徑

}, { "pagePath": "pages/logs/logs", "text": "日志"

}], "color": "red", //tab 的(de)字體顔色

"selectedColor": "#673ab7", //當前頁 tab 的(de)顔色，也就是選中頁的(de)

"backgroundColor": "#2196f3", //tab 的(de)背景色

"borderStyle": "white", //邊框的(de)顔色 black/white

"position": "bottom" //tab處于窗口的(de)位置 top/bottom

},"networkTimeout": { //默認都是 60000 秒一(yī)分鍾

"request": 10000, //請求網絡超時時間 10000 秒

"downloadFile": 10000， //鏈接服務器超時時間 10000 秒

"uploadFile": "10000", //上傳圖片 10000 秒

"downloadFile": "10000" //下載圖片超時時間 10000 秒

},"debug": true //項目上線後，建議關閉此項，或者不寫此項

2. JS 邏輯層

小程序的(de)邏輯層由 JavaScript 語言完成。但因為(wèi)小程序不在浏覽器中運行(xíng)，所以 JS 在 web 浏覽器中的(de)一(yī)些函數不能用，如(rú) document、window 等。

app.js 有(yǒu)全局的(de)小程序生命周期，page.js 有(yǒu)自(zì)己本頁面的(de)生命周期。

2.1 注冊小程序 app.js

這一(yī)步驟，有(yǒu)這幾個需要注意的(de)地(dì)方：

必須在 app.js 中，使用 app() 函數注冊微信小程序。全局小程序中，隻能注冊一(yī)次；

不能在 app() 內(nèi)的(de)函數中調用 getApp()（小程序實例），使用 this 就可(kě)以拿到小程序的(de)實例；

不要在 onLaunch 的(de)時候 getCurrentPage()，因為(wèi)此時 page 還沒有(yǒu)生成；

通過其他子(zǐ)頁面調用 getApp() 獲取實例後，不要私自(zì)調用小程序全局的(de)生命周期方法；

可(kě)以通過 var app=getApp() 獲取小程序的(de)實例。

app ( { // 小程序生命周期的(de)各個階段

onLaunch: function(){},//當小程序初始化完成時，會觸發 onLaunch（全局隻觸發一(yī)次）

onShow: function(){},//當小程序啓動，或從後台進入前台顯示，會觸發 onShow

onHide: function(){},//當小程序從前台進入後台隐藏，會觸發 onHide

onError: function(){},//當小程序發生腳本錯誤，或者 api 調用失敗時，會觸發 onError 并帶上錯誤信息

// 自(zì)定義函數或者屬性，用 this可(kě)以訪問

...

})

2.2 注冊小程序的(de)頁面 page.js

Page() 用來注冊一(yī)個頁面，維護該頁面的(de)生命周期以及數據。

Page({ data: { //頁面的(de)初始數據//調用：{{text}} {{array[0].msg}}

text: 'init data', array: [{ msg: '1'

}, { msg: '2'

}]

}, // 頁面生命周期的(de)各個階段

onLoad: function () {}, //生命周期函數--監聽頁面加載

onShow: function () {}, //生命周期函數--監聽頁面初次渲染完成

onReady: function () {}, //生命周期函數--監聽頁面顯示

onHide: function () {}, //生命周期函數--監聽頁面隐藏

onUnload: function () {}, //生命周期函數--監聽頁面卸載

onPullDownRefresh: function () {}, //頁面相關事件處理(lǐ)函數。如(rú)果需要監聽用戶下拉動作，需要在app.json中配置 "enablePullDownRefresh":"true" 允許上拉刷新

onReachBottom: function () {}, //頁面上拉觸底事件的(de)處理(lǐ)函數

onShareAppMessage: function () { //用戶點擊右上角分享

return { title: '自(zì)定義分享标題', desc: '自(zì)定義分享描述', path: '/page/user?id=123'

}

}, // 自(zì)定義函數或者屬性如(rú)：

customData: { hi: 'MINA'

}...

})

2.3 公共模塊 util.js

公共模塊方法需要通過 module.exports 對外暴露接口，使用的(de)時候需要利用 require(path)，将文件引入。如(rú)：

function sayHello(name) {//公共方法util類

console.log(`Hello ${name} !`)

}module.exports.sayHello = sayHello//用module.exports 對外暴露接口

//先引入文件，是新建的(de)一(yī)個 utils 包，公共方法在 util.js 裏面var util = require('../../utils/util.js')

Page({//調用類

onLoad: function () {// 使用時，用 util 引用名調用，如(rú)：util.sayHello()

util.sayHello('我(wǒ)是傳的(de)值');

}

})

2.4 數據操作

setData() 不能直接操作數據，例如(rú) this.data.text="xxxxx" 就是錯誤的(de)。你需要在 this.setData () 之中，進行(xíng)數據的(de)操作。

同時，這裏有(yǒu)作用域的(de)問題。比如(rú)，需要在局部函數中使用，就需要 .bind(this)。

如(rú)果你需要操作全局的(de)數據，你需要在 app.js 中進行(xíng)相應設置，例如(rú)：

App({// app.js

globalData: 1})// 某 page.jsconsole.log(getApp().globalData)

3. 視(shì)圖層 WXML

視(shì)圖層的(de)數據綁定均來自(zì)于 Page 中的(de) data，想要修改相應值，你需要用到 this.setData。數據綁定使用兩對花括号，将變量名包起來。

3.1 條件渲染

你可(kě)以利用 if 和(hé) else，在視(shì)圖層上編寫在特定情況下，出現的(de)不同的(de)視(shì)圖結果。

view wx:if="{{zhenjiaa=='123'}}"123334/viewview wx:if="{{zhanjia}}"123334/viewview wx:if="{{len 5}}"大于5我(wǒ)就顯示了 /viewview wx:if="{{length 5}}" 1 /viewview wx:elif="{{length 2}}" 2 /viewview wx:else 3 /viewblock wx:if="{{true}}"view view1 /viewview view2 /view/block

很多人會将 CSS 中的(de) display: hidden 屬性，将其做(zuò)一(yī)個比較。

微信小程序中的(de) wx:if 是惰性的(de)。如(rú)果不符合渲染條件，它不會渲染相應部分；

使用 display: hidden 時，元素始終渲染，隻是視(shì)圖層上沒有(yǒu)顯示，用戶看不見。

如(rú)果你的(de)小程序有(yǒu)元素顯示頻繁切換的(de)需求，建議你使用 display: hidden，能夠為(wèi)用戶提供能順暢的(de)使用體驗。

3.2 列表渲染

相當于讓 WXML 處理(lǐ)一(yī)個循環。

在 WXML 中，你可(kě)以這樣來建立一(yī)個 for 循環：

view wx:for="{{array}}" {{index}}:{{item}} /view

然後在相應的(de) JS 中，新建一(yī)個數組：

page.jsPage({ data: {

array: [1, 2, 3, 4, 5]

}

})

需要注意的(de)是，如(rú)果列表中的(de)項需要動态添加到列表中，并希望項目保持原有(yǒu)的(de)特征和(hé)狀态，那麽你應該使用 wx:key。

wx:key 有(yǒu)兩種形式：

字符串：wx:key="unique"

保留關鍵字：wx:key="*this"

3.3 運算

WXML 可(kě)以執行(xíng)簡單的(de)運算任務。例如(rú)：

view {{a + b}} + {{c}} + d /view

也可(kě)以做(zuò)到字符串拼接：

view{{"hello" + name}}/view

甚至，你可(kě)以使用 ... 在 WXML 中展開對象。

3.4 模闆

name 定義組件模版的(de)名稱，引用模版的(de)時候使用 is 屬性指定模版的(de)名字，is 可(kě)以進行(xíng)簡單的(de)三目運算，需要傳入模版需要的(de) data 數據。

因為(wèi)模版擁有(yǒu)自(zì)己的(de)作用域，所以隻能使用 data 傳入數據，而不接受雙花括号的(de)寫法。

template name="msgItem"viewtext {{index}}: {{msg}} /texttext Time: {{time}} /text/view/template!-- 其他代碼 --template is="msgItem" data="{{...item}}"/

3.5 公共模塊的(de)引用

WXML 提供 import 和(hé) include 兩種文件引用方式。

import 有(yǒu)作用域的(de)概念，不能多重引用。

!-- B.wxml --import src="a.wxml"/!-- A.wxml --template name="A"

text A template /text/template

而 include 就可(kě)以多重引用了。

!--引用 header、其中 header.wxml 中也引用了 footer.wxml--include src="header.wxml"/view body /view!-- header.wxml --view header /viewinclude src="footer.wxml"/

3.6 事件

名稱以 bind 開頭的(de)事件不阻止冒泡，名稱以 catch 開頭的(de)事件冒泡是阻止的(de)。如(rú) bindTap 和(hé) catchTab。

在 WXML 中，可(kě)以使用 dataset 定義 data 中的(de)數據，會通過事件傳遞。它的(de)事件以 data- 開頭，多個單詞以 - 鏈接，如(rú) data-a-b。

需要注意的(de)是，使用這種方式定義的(de)變量不能有(yǒu)大寫。它會自(zì)動轉成駝峰命名，調取的(de)時候去(qù)駝峰命名的(de)名字。

4. WXSS

WXSS 的(de)用法類似于 CSS，并在 CSS 的(de)基礎上，擴展了 rpx 尺寸單位和(hé)樣式導入功能。

WXSS 可(kě)以使用內(nèi)聯樣式，但這樣會影響渲染速度。

每個頁面自(zì)己的(de) page.wxss 樣式表，會覆蓋全局樣式表 app.wxss。

微信小程序開發中遇到的(de)坑及解決辦法

taro單獨為(wèi)某個項目切換taro版本環境

單獨為(wèi)某一(yī)個項目升級#這樣做(zuò)的(de)好處是全局的(de) Taro 版本還是 1.x 的(de)，多個項目間的(de)依賴不沖突，其餘項目依然可(kě)以用舊(jiù)版本開發。如(rú)果你的(de)項目裏沒有(yǒu)安裝 Taro CLI，你需要先裝一(yī)個：

# 如(rú)果你使用 NPM

$ npm install --save-dev @tarojs/cli@2.x

# 如(rú)果你使用 Yarn

$ yarn add -D @tarojs/cli@2.x

echarts在小程序中滑動卡頓

由于微信小程序中，echarts的(de)層級最高(gāo)，無論設置多大層級也無法遮住echarts。而且小程序中好像隻能用echarts吧(ba)。所以為(wèi)了解決這個bug，我(wǒ)隻能委屈求全了。打開ec-canvas.wxml文件，将touchStart、touchMove和(hé)touchEnd去(qù)掉了，直接删除就好啦。這三個事件應該是做(zuò)縮放的(de)吧(ba)，我(wǒ)們(men)也沒有(yǒu)這個縮放的(de)需求。所以就去(qù)掉了。雖然暫時滿足的(de)需求，還是沒有(yǒu)真正的(de)解決問題。

原：

bindinit="init"

bindtouchstart="{{ ec.disableTouch ? '' : 'touchStart' }}"

bindtouchmove="{{ ec.disableTouch ? '' : 'touchMove' }}"

bindtouchend="{{ ec.disableTouch ? '' : 'touchEnd' }}"

現：

bindinit="init"

echarts在小程序中無法跟随頁面滑動

在卡頓問題中能與echarts交互少的(de)，可(kě)以直接使用圖片代替cannvas，即在echarts渲染完畢後将它替換為(wèi)一(yī)張圖片。

如(rú)果我(wǒ)更新了數據，那麽就重新放出echarts，等它渲染完畢後，再次替換為(wèi)一(yī)張圖片。

chart.on('finished', () = {

getCurrentInstance().page.selectComponent(id).canvasToTempFilePath({

success: res = {

console.log('res.tempFilePath====',res.tempFilePath)

this.setState({

echartImgSrc: res.tempFilePath

})

fail: res =console.log('轉換圖片失敗', res)

});

})

render:

this.state.echartImgSrc =='' ?

ref={this.refChart}

id={this.state.id}

canvas-id="mychart-area"

force-use-old-canvas="true"

ec={this.state.ec}

CoverImage src={this.state.echartImgSrc}/CoverImage

開發微信小程序的(de)“雷區”有(yǒu)哪些？

微信小程序的(de)優勢：無需下載，無需安裝注冊，即點即用，不主動推送廣告。微信小程序的(de)優勢直抵app用戶的(de)心扉，這不就是用戶想要的(de)體驗嗎？因此微信小程序的(de)用戶體驗是其必須要保證的(de)底線，一(yī)切傷害用戶體驗的(de)行(xíng)為(wèi)，是開發者都不能碰觸的(de)原則。

遊戲類小程序“濫用分享”行(xíng)為(wèi)

在4月份，群聊被小程序分享搞的(de)亂糟糟，群裏有(yǒu)三個人分享小遊戲就已經霸屏，看不到聊天信息了，用戶體驗一(yī)度被踐踏。很快，微信官方将一(yī)下兩種行(xíng)為(wèi)界定為(wèi)違規，第一(yī)種，強制用戶分享小遊戲到群包括分享到不同群，就是小遊戲結束時彈出分享小遊戲到群/不同群，可(kě)獲得第二次生命繼續遊戲。第二種，誘導用戶分享到群，可(kě)獲得免費道(dào)具，或得到雙倍積分等利益。

如(rú)過開發是出現如(rú)此違規行(xíng)為(wèi)，會對小遊戲的(de)搜索能力、分享能力、廣告及道(dào)具結算能力進行(xíng)限制，情節嚴重這将面臨下架處理(lǐ)。

因為(wèi)“營銷濫用”行(xíng)為(wèi)，關閉個人小程序“公關/推廣/市(shì)場調查”和(hé)“廣告/設計”類目。

微信小程序的(de)注冊門檻較低(dī)，無論是個人還是企業、商(shāng)鋪、政府、媒體，都可(kě)以申請。由于小程序是獲取新流量的(de)高(gāo)效手段，導緻營銷行(xíng)為(wèi)泛濫，狠狠的(de)傷害了用戶體驗。隻對個人小程序濫用“商(shāng)務服務”和(hé)“廣告/設計”兩大類目通過審核，來進行(xíng)無節制營銷行(xíng)為(wèi)的(de)情況，微信方面表示，個人小程序将無法通過“商(shāng)務服務-公關/推廣/市(shì)場調查”和(hé)“廣告/設計”的(de)類目審核，也将不再對個人小程序開放。

“授權濫用”行(xíng)為(wèi)

在挺早前就有(yǒu)針對“授權濫用”行(xíng)為(wèi)的(de)限制，當用戶初次使用小程序是，強制要求用戶授權昵稱、頭像、手機(jī)号、地(dì)理(lǐ)位置等信息，如(rú)果用戶不同意，繼續跳轉授權頁面，影響用戶正常使用小程序。對騰訊自(zì)己的(de)小程序“騰訊投票(piào)”也做(zuò)了違規處理(lǐ)，就看出騰訊的(de)決心。

現在微信已經對用戶授權流程進行(xíng)了優化，隻有(yǒu)特定場景才需要用戶授權指定信息。

問題：本地(dì)服務器存取session沒有(yǒu)問題。通過小程序，比如(rú)發驗證碼，服務器端将驗證碼存為(wèi)session。校驗驗證碼的(de)時候重新取session,提示session值不存在。

根源：微信小程序不能保存Cookie，導緻每次wx.request到服務端都會創建一(yī)個新的(de)會話，從而當前會話不再是之前存驗證碼的(de)那個會話，自(zì)然也就取不到session值了。

解決方法：（由于本人很懶，直接參考、引用大神的(de)文章(zhāng)，文末有(yǒu)原文鏈接，原文闆塊比較好看一(yī)點。我(wǒ)這裏重點在于記錄微信小程序的(de)另一(yī)個坑。）

普通的(de)Web開發，都是把sessionid保存在cookie中傳遞的(de)。

不管是java還是php，服務端的(de)會在response的(de)header中加上Set-Cookie

例如(rú)：

浏覽器的(de)請求也會在header中加上

例如(rú)：

通過這個sessionid就能使浏覽器端和(hé)服務端保持會話，使浏覽器端保持登錄狀态。但是，微信小程序不能保存Cookie，導緻每次wx.request到服務端都會創建一(yī)個新的(de)會話，小程序端就不能保持登錄狀态了。

一(yī)個比較簡單的(de)辦法就是在小程序端把cookie保存到storage裏，後續請求的(de)時候再讀storage，把cookie添加到請求頭裏，這樣做(zuò)的(de)好處就是，服務端不用做(zuò)任何改動

具體操作如(rú)下：

1.把服務端response的(de)Set-Cookie中的(de)值保存到Storage中

2.wx.request再從Storage中取出Cookie,封裝到header中

我(wǒ)在這裏還遇到了另外一(yī)個問題，當服務器響應多個Set-Cookie時，小程序通過wx.request 回調取res.header['Set-Cookie']所取到的(de)Set-Cookie值是把它們(men)用逗号拼接在一(yī)起，從而産生的(de)錯誤的(de)Cookie，這樣請求後台的(de)時候還是取不到相應的(de)session。而真正需要的(de)是用分号拼接多個Set-Cookie值。例如(rú)：

服務器響應：

小程序通過res.header['Set-Cookie']取到的(de)Set-Cookie值卻是：

而真正正确的(de)值應該是smallapp與session_name之間用分号隔開而不是逗号：

但坑終究是坑，寄人籬下，有(yǒu)坑也隻得我(wǒ)們(men)自(zì)己填。

填坑方法：在步驟2中的(de)if判斷中，自(zì)己重新拆分Storage中取出的(de)Cookie，整理(lǐ)成後端需要的(de)規範的(de)cookie。再賦值給header.Cookie。

這個問題暫時沒找到其他解決方案，也請知道(dào)的(de)朋(péng)友指點一(yī)下。

原文引用：微信小程序開發-保存服務端sessionid的(de)方法

鏈接：【點擊了解更多加盟項目】

微信小程序開發有(yǒu)哪些坑（微信小程序開發有(yǒu)用嗎）