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

微信小程序開發(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去掉了，直接刪除就好啦。這三個事件應該是做縮放的吧，我們也沒有這個縮放的需求。所以就去掉了。雖然暫時滿足的需求，還是沒有真正的解決問題。

原：

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ī)，第一種，強制用戶分享小游戲到群包括分享到不同群，就是小游戲結(jié)束時彈出分享小游戲到群/不同群，可獲得第二次生命繼續(xù)游戲。第二種，誘導用戶分享到群，可獲得免費道具，或得到雙倍積分等利益。

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

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

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

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

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

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

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

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

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

"navigationBarTextStyle": "black", //頂部導航文字的顏色 black/white

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

"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 在當前頁，也就是選中狀態(tài)的路徑

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

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

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

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

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

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

},"networkTimeout": { //默認都是 60000 秒一分鐘

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

"downloadFile": 10000， //鏈接服務器超時時間 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(){},//當小程序初始化完成時，會觸發(fā) onLaunch（全局只觸發(fā)一次）

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

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

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

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

?...

})

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

Page()?用來注冊一個頁面，維護該頁面的生命周期以及數(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: '自定義分享標題', ? ? ?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 ()?之中，進行數(shù)據(jù)的操作。

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

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

App({// app.js

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

3. 視圖層 WXML

視圖層的數(shù)據(jù)綁定均來自于?Page?中的?data，想要修改相應值，你需要用到?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?是惰性的。如果不符合渲染條件，它不會渲染相應部分；

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

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

3.2 列表渲染

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

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

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

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

page.jsPage({ ?data: {

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

?}

})

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

wx:key?有兩種形式：

字符串：wx:key="unique"

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

3.3 運算

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

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

也可以做到字符串拼接：

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

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

3.4 模板

name?定義組件模版的名稱，引用模版的時候使用?is?屬性指定模版的名字，is?可以進行簡單的三目運算，需要傳入模版需要的?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ǔ)上，擴展了 rpx 尺寸單位和樣式導入功能。

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

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

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

微信小程序可以通過webview嵌入H5頁面可以說是給開發(fā)者很大的福音，手頭的項目中有幾個頁面是使用H5開發(fā)的嵌入到了webview中，在小程序開發(fā)者工具的模擬器中測試完全沒問題，放到Android真機上測也沒問題，但是在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ā)有哪些坑的介紹就聊到這里吧，感謝你花時間閱讀本站內(nèi)容，更多關(guān)于開發(fā)微信小程序難不難、微信小程序開發(fā)有哪些坑的信息別忘了在本站進行查找喔。