本篇文章給大家談?wù)勎⑿判〕绦蜷_發(fā)有哪些坑，以及小程序開發(fā)的坑有哪些對應(yīng)的知識點，希望對各位有所幫助，不要忘了收藏本站喔。

微信小程序/微信公眾號中文亂碼的坑

微信小程序可以通過webview嵌入H5頁面可以說是給開發(fā)者很大的福音，手頭的項目中有幾個頁面是使用H5開發(fā)的嵌入到了webview中，在小程序開發(fā)者工具的模擬器中測試完全沒問題，放到Android真機(jī)上測也沒問題，但是在iOS上打開后中文顯示全部亂碼，無論是在小程序還是直接通過微信點開鏈接都是亂碼。但是奇怪的是在iOS的Safari瀏覽器中卻是正常。

經(jīng)過再三確定過文件編碼就是UTF8沒錯。而且在html的head中也加入了 meta charset="utf-8" 。最后無奈一點一點對比之前的項目的區(qū)別，發(fā)現(xiàn)之前的項目中的meta是通過http-equiv設(shè)置的瀏覽器編碼。

設(shè)置后發(fā)現(xiàn)顯示正常，看來微信-iOS版本中的瀏覽器內(nèi)核不是最新的，存在兼容問題，遇到坑的朋友們要注意了。

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

taro單獨為某個項目切換taro版本環(huán)境

單獨為某一個項目升級#這樣做的好處是全局的 Taro 版本還是 1.x 的，多個項目間的依賴不沖突，其余項目依然可以用舊版本開發(fā)。 如果你的項目里沒有安裝 Taro CLI，你需要先裝一個：

# 如果你使用 NPM

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

# 如果你使用 Yarn

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

echarts在小程序中滑動卡頓

由于微信小程序中，echarts的層級最高，無論設(shè)置多大層級也無法遮住echarts。而且小程序中好像只能用echarts吧。所以為了解決這個bug，我只能委屈求全了。打開ec-canvas.wxml文件，將touchStart、touchMove和touchEnd去掉了，直接刪除就好啦。這三個事件應(yīng)該是做縮放的吧，我們也沒有這個縮放的需求。所以就去掉了。雖然暫時滿足的需求，還是沒有真正的解決問題。

原：

bindinit="init"

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

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

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

現(xiàn)：

bindinit="init"

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

在卡頓問題中能與echarts交互少的，可以直接使用圖片代替cannvas，即在echarts渲染完畢后將它替換為一張圖片。

如果我更新了數(shù)據(jù)，那么就重新放出echarts，等它渲染完畢后，再次替換為一張圖片。

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('轉(zhuǎn)換圖片失敗', 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

開發(fā)微信小程序的“雷區(qū)”有哪些？

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

游戲類小程序“濫用分享”行為

在4月份，群聊被小程序分享搞的亂糟糟，群里有三個人分享小游戲就已經(jīng)霸屏，看不到聊天信息了，用戶體驗一度被踐踏。很快，微信官方將一下兩種行為界定為違規(guī)，第一種，強(qiáng)制用戶分享小游戲到群包括分享到不同群，就是小游戲結(jié)束時彈出分享小游戲到群/不同群，可獲得第二次生命繼續(xù)游戲。第二種，誘導(dǎo)用戶分享到群，可獲得免費道具，或得到雙倍積分等利益。

如過開發(fā)是出現(xiàn)如此違規(guī)行為，會對小游戲的搜索能力、分享能力、廣告及道具結(jié)算能力進(jìn)行限制，情節(jié)嚴(yán)重這將面臨下架處理。

因為“營銷濫用”行為，關(guān)閉個人小程序“公關(guān)/推廣/市場調(diào)查”和“廣告/設(shè)計”類目。

微信小程序的注冊門檻較低，無論是個人還是企業(yè)、商鋪、政府、媒體，都可以申請。由于小程序是獲取新流量的高效手段，導(dǎo)致營銷行為泛濫，狠狠的傷害了用戶體驗。只對個人小程序濫用“商務(wù)服務(wù)”和“廣告/設(shè)計”兩大類目通過審核，來進(jìn)行無節(jié)制營銷行為的情況，微信方面表示，個人小程序?qū)o法通過“商務(wù)服務(wù)-公關(guān)/推廣/市場調(diào)查”和“廣告/設(shè)計”的類目審核，也將不再對個人小程序開放。

“授權(quán)濫用”行為

在挺早前就有針對“授權(quán)濫用”行為的限制，當(dāng)用戶初次使用小程序是，強(qiáng)制要求用戶授權(quán)昵稱、頭像、手機(jī)號、地理位置等信息，如果用戶不同意，繼續(xù)跳轉(zhuǎn)授權(quán)頁面，影響用戶正常使用小程序。對騰訊自己的小程序“騰訊投票”也做了違規(guī)處理，就看出騰訊的決心。

現(xiàn)在微信已經(jīng)對用戶授權(quán)流程進(jìn)行了優(yōu)化，只有特定場景才需要用戶授權(quán)指定信息。

小程序開發(fā)有哪些坑

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

"navigationBarBackgroundColor": "#ffffff", //頂部導(dǎo)航欄背景色

"navigationBarTextStyle": "black", //頂部導(dǎo)航文字的顏色 black/white

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

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

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

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

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

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

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

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

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

"selectedIconPath": "../img/a.png" //tab 在當(dāng)前頁，也就是選中狀態(tài)的路徑

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

}], ?"color": "red", //tab 的字體顏色

"selectedColor": "#673ab7", //當(dāng)前頁 tab 的顏色，也就是選中頁的

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

"borderStyle": "white", //邊框的顏色 black/white

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

},"networkTimeout": { //默認(rèn)都是 60000 秒一分鐘

"request": 10000, //請求網(wǎng)絡(luò)超時時間 10000 秒

"downloadFile": 10000， //鏈接服務(wù)器超時時間 10000 秒

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

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

},"debug": true //項目上線后，建議關(guān)閉此項，或者不寫此項

2. JS 邏輯層

小程序的邏輯層由 JavaScript 語言完成。但因為小程序不在瀏覽器中運行，所以 JS 在 web 瀏覽器中的一些函數(shù)不能用，如?document、window?等。

app.js?有全局的小程序生命周期，page.js?有自己本頁面的生命周期。

2.1 注冊小程序?app.js

這一步驟，有這幾個需要注意的地方：

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

不能在?app()?內(nèi)的函數(shù)中調(diào)用?getApp()（小程序?qū)嵗?，使?this?就可以拿到小程序的實例；

不要在?onLaunch?的時候?getCurrentPage()，因為此時?page?還沒有生成；

通過其他子頁面調(diào)用?getApp()?獲取實例后，不要私自調(diào)用小程序全局的生命周期方法；

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

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

?onLaunch: function(){},//當(dāng)小程序初始化完成時，會觸發(fā) onLaunch（全局只觸發(fā)一次）

?onShow: function(){},//當(dāng)小程序啟動，或從后臺進(jìn)入前臺顯示，會觸發(fā) onShow

?onHide: function(){},//當(dāng)小程序從前臺進(jìn)入后臺隱藏，會觸發(fā) onHide

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

?// 自定義函數(shù)或者屬性，用 this可以訪問

?...

})

2.2 注冊小程序的頁面?page.js

Page()?用來注冊一個頁面，維護(hù)該頁面的生命周期以及數(shù)據(jù)。

Page({ ?data: { //頁面的初始數(shù)據(jù)//調(diào)用：{{text}} {{array[0].msg}}

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

? ?}, { ? ? ?msg: '2'

? ?}]

?}, ?// 頁面生命周期的各個階段

?onLoad: function () {}, //生命周期函數(shù)--監(jiān)聽頁面加載

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

?onReady: function () {}, //生命周期函數(shù)--監(jiān)聽頁面顯示

?onHide: function () {}, //生命周期函數(shù)--監(jiān)聽頁面隱藏

?onUnload: function () {}, //生命周期函數(shù)--監(jiān)聽頁面卸載

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

?onReachBottom: function () {}, //頁面上拉觸底事件的處理函數(shù)

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

? ?return { ? ? ?title: '自定義分享標(biāo)題', ? ? ?desc: '自定義分享描述', ? ? ?path: '/page/user?id=123'

? ?}

?}, ?// 自定義函數(shù)或者屬性如：

?customData: { ? ?hi: 'MINA'

?}...

})

2.3 公共模塊?util.js

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

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

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

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

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

Page({//調(diào)用類

?onLoad: function () {// ?使用時，用 util 引用名調(diào)用，如：util.sayHello()

? ?util.sayHello('我是傳的值');

?}

})

2.4 數(shù)據(jù)操作

setData()?不能直接操作數(shù)據(jù)，例如?this.data.text="xxxxx"?就是錯誤的。你需要在?this.setData ()?之中，進(jìn)行數(shù)據(jù)的操作。

同時，這里有作用域的問題。比如，需要在局部函數(shù)中使用，就需要?.bind(this)。

如果你需要操作全局的數(shù)據(jù)，你需要在 app.js 中進(jìn)行相應(yīng)設(shè)置，例如：

App({// app.js

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

3. 視圖層 WXML

視圖層的數(shù)據(jù)綁定均來自于?Page?中的?data，想要修改相應(yīng)值，你需要用到?this.setData。數(shù)據(jù)綁定使用兩對花括號，將變量名包起來。

3.1 條件渲染

你可以利用?if?和?else，在視圖層上編寫在特定情況下，出現(xiàn)的不同的視圖結(jié)果。

view wx:if="{{zhenjiaa=='123'}}"123334/viewview wx:if="{{zhanjia}}"123334/viewview wx:if="{{len 5}}"大于5我就顯示了 /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 中的?display: hidden?屬性，將其做一個比較。

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

使用?display: hidden?時，元素始終渲染，只是視圖層上沒有顯示，用戶看不見。

如果你的小程序有元素顯示頻繁切換的需求，建議你使用?display: hidden，能夠為用戶提供能順暢的使用體驗。

3.2 列表渲染

相當(dāng)于讓 WXML 處理一個循環(huán)。

在 WXML 中，你可以這樣來建立一個 for 循環(huán)：

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

然后在相應(yīng)的 JS 中，新建一個數(shù)組：

page.jsPage({ ?data: {

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

?}

})

需要注意的是，如果列表中的項需要動態(tài)添加到列表中，并希望項目保持原有的特征和狀態(tài)，那么你應(yīng)該使用?wx:key。

wx:key?有兩種形式：

字符串：wx:key="unique"

保留關(guān)鍵字：wx:key="*this"

3.3 運算

WXML 可以執(zhí)行簡單的運算任務(wù)。例如：

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

也可以做到字符串拼接：

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

甚至，你可以使用?...?在 WXML 中展開對象。

3.4 模板

name?定義組件模版的名稱，引用模版的時候使用?is?屬性指定模版的名字，is?可以進(jìn)行簡單的三目運算，需要傳入模版需要的?data?數(shù)據(jù)。

因為模版擁有自己的作用域，所以只能使用 data 傳入數(shù)據(jù)，而不接受雙花括號的寫法。

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

3.5 公共模塊的引用

WXML 提供?import?和?include?兩種文件引用方式。

import?有作用域的概念，不能多重引用。

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

text A template /text/template

而?include?就可以多重引用了。

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

3.6 事件

名稱以?bind?開頭的事件不阻止冒泡，名稱以?catch?開頭的事件冒泡是阻止的。如?bindTap?和?catchTab。

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

需要注意的是，使用這種方式定義的變量不能有大寫。它會自動轉(zhuǎn)成駝峰命名，調(diào)取的時候去駝峰命名的名字。

4. WXSS

WXSS 的用法類似于 CSS，并在 CSS 的基礎(chǔ)上，擴(kuò)展了 rpx 尺寸單位和樣式導(dǎo)入功能。

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

每個頁面自己的?page.wxss?樣式表，會覆蓋全局樣式表?app.wxss。

微信小程序藍(lán)牙入坑總結(jié)

?? 微信小程序的藍(lán)牙流程按著官網(wǎng)的說明寫就可以了，具體參看文檔： 小程序開發(fā)文檔

坑列表：

??? 1.成對調(diào)用需要注意， wx.openBluetoothAdapter 與 wx.closeBluetoothAdapter

??????????????????????????????????????? wx.startBluetoothDevicesDiscovery 與 wx.stopBluetoothDevicesDiscovery

???? 2.安卓與IOS的區(qū)別：安卓可以根據(jù)藍(lán)牙標(biāo)識直接連接，IOS則必須先搜索才能進(jìn)行連接；

???? 3.權(quán)限問題：IOS的系統(tǒng)不能僅僅打開系統(tǒng)的藍(lán)牙權(quán)限，因為IOS新版本針對藍(lán)牙做了應(yīng)用及的限制，因此需要給微信藍(lán)牙權(quán)限才可以使用；對于安卓系統(tǒng)，部分手機(jī)必須打開定位權(quán)限才能搜索到藍(lán)牙設(shè)備

???? 4.創(chuàng)建連接API( wx.createBLEConnection )調(diào)用失敗:

??????????? 超時報錯:{"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ī)出現(xiàn)以上問題，針對這些報錯，需編寫重試連接操作，很大概率能解決此問題；

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

???? 6.網(wǎng)絡(luò)請求與藍(lán)牙請求盡量分開，因為藍(lán)牙連接會受到影響，造成一些異常信息；

???? 7.所有API調(diào)用針對fail函數(shù)最好都做一次重試，因為再次重試可能就會成功；、

???? 8.API調(diào)用之間最好有一定毫秒數(shù)的間隔，目前懷疑api部分機(jī)型會存在延時；

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

???????????

????

現(xiàn)在開發(fā)微信小程序有哪些雷區(qū)？

1、文字

一般對于微信小程序的名稱命名是一個比較重要的問題，但是這里需要強(qiáng)調(diào)的是，通常情況下我們都是采用中文數(shù)字或者是英文來命名的。而且一般他的名稱長度都是控制到三至20個字符中間，一個中文字那就相當(dāng)于是兩個字符。

2、重復(fù)命名

既然是微信小程序，那么它的名稱就千萬不能夠跟公眾平臺已經(jīng)產(chǎn)生的服務(wù)號或者是訂閱號重復(fù)，如果是產(chǎn)生了命名重復(fù)的話，那么就會有提示，所以要進(jìn)行名稱的更換設(shè)置。

3、賬號信息謹(jǐn)慎設(shè)置

需要強(qiáng)調(diào)的一點的是，微信小程序的各種賬號信息，不像其他的軟件一樣可以根據(jù)自己的興趣愛好來進(jìn)行隨意的更換。也就是說在微信小程序里面，一旦將自己的各種賬號信息全部都設(shè)置完畢的時候一定要進(jìn)行謹(jǐn)慎的操作，因為一旦設(shè)置完就不會再支持修改了。

4、功能與服務(wù)一致

微信小程序雖然種類非常繁多，他們也能夠提供出各式各樣的服務(wù)，但是這些功能的提供一定是能夠在實際當(dāng)中給到用戶的服務(wù)是一致的。所以在小程序設(shè)置的頁面，它所能夠提供的所有內(nèi)幕，一定是放在頁面的首頁第一欄那里，最深最深也只能退到放置在二級頁面當(dāng)中。

5、注冊

一般情況來講，如果是個人開發(fā)的，那么就沒有辦法對微信小程序進(jìn)行申請。就目前來講，他僅僅只支持政府，企業(yè)，還有媒體或者是其他的一些組織來進(jìn)行申請。而一個主體總共能夠注冊的微信小程序有30個，一個綁定身份的開發(fā)人士最多也只能夠創(chuàng)建出來五個微信小程序。另外，假設(shè)要進(jìn)行開發(fā)的不是屬于特殊組織，那就需要另外花費300元來進(jìn)行認(rèn)證。

6、不支持

微信小程序，雖然功能非常的多，但是同樣跟一如既往的不支持很多東西，比方說他不支持，誘導(dǎo)關(guān)注，也不支持誘導(dǎo)分享，更不支持虛假，欺詐等等內(nèi)容的存在。再有就是像廣告類的展示，一般都是企業(yè)的小程序會存在的，但是這個播放的展示比例也不能夠超過一半的頁面內(nèi)容。

7、修改內(nèi)容

一般來講，給微信小程序所配置的服務(wù)器，他每個月僅僅只有三次的修改機(jī)會，所以一定要珍惜這些機(jī)會，小心后面不夠機(jī)會來使用，所以沒事的話千萬不要對下面的配置進(jìn)行亂動，如果是一旦確定了的話，那么就一定要將所有的內(nèi)容一次性全部整理完畢，就算是改一個小標(biāo)點符號都屬于浪費一次機(jī)會。

8、模板和關(guān)鍵詞

電影用戶來講在進(jìn)行模版消息選用的時候，通常情況下我們可以采取跟模版可以搭配的關(guān)鍵詞來進(jìn)行使用，那么配置之后再提交的過程當(dāng)中，他的順序還有用到的詞語種類都是不能夠進(jìn)行修改的，如果這個時候我們找不到跟模版可以相搭配的關(guān)鍵詞，那么就可以對它進(jìn)行申請?zhí)砑印＿@里強(qiáng)調(diào)一下，就是每個月都擁有五次可以提交新關(guān)鍵詞的機(jī)會，那么一旦被審核通過之后就可以達(dá)到共享的目的。

微信小程序開發(fā)有哪些坑的介紹就聊到這里吧，感謝你花時間閱讀本站內(nèi)容，更多關(guān)于小程序開發(fā)的坑有哪些、微信小程序開發(fā)有哪些坑的信息別忘了在本站進(jìn)行查找喔。