1. <blockquote id="ancms"></blockquote>

        微信小程序開發有哪些坑(開發微信小程序難不難)

        小程序開發 526
        本篇文章給大家談談微信小程序開發有哪些坑,以及開發微信小程序難不難對應的知識點,希望對各位有所幫助,不要忘了收藏本站喔。 微信小程序開發中遇到的坑及解決辦法 taro單獨為某個項目切換taro版本環境 單獨為某一個項目升級#這樣做的好處是全局的 Taro 版本還是 1.x 的,多個項目間的依賴不沖突,其余項目依然可以用舊版本開發。 如果你的項目里沒有安裝 Taro CLI,你需要先裝一個:

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

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

        taro單獨為某個項目切換taro版本環境

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

        # 如果你使用 NPM

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

        # 如果你使用 Yarn

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

        echarts在小程序中滑動卡頓

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

        原:

        bindinit="init"

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

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

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

        現:

        bindinit="init"

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

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

        如果我更新了數據,那么就重新放出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('轉換圖片失敗', 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

        開發微信小程序的“雷區”有哪些?

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

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

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

        如過開發是出現如此違規行為,會對小游戲的搜索能力、分享能力、廣告及道具結算能力進行限制,情節嚴重這將面臨下架處理。

        因為“營銷濫用”行為,關閉個人小程序“公關/推廣/市場調查”和“廣告/設計”類目。

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

        “授權濫用”行為

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

        現在微信已經對用戶授權流程進行了優化,只有特定場景才需要用戶授權指定信息。

        小程序開發有哪些坑

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

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

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

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

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

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

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

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

        "list": [{ //設置tab的屬性,最少2個,最多5個

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

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

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

        "selectedIconPath": "../img/a.png" //tab 在當前頁,也就是選中狀態的路徑

        }, { ? ?"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, //請求網絡超時時間 10000 秒

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

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

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

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

        2. JS 邏輯層

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

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

        2.1 注冊小程序?app.js

        這一步驟,有這幾個需要注意的地方:

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

        不能在?app()?內的函數中調用?getApp()(小程序實例),使用?this?就可以拿到小程序的實例;

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

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

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

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

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

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

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

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

        ?// 自定義函數或者屬性,用 this可以訪問

        ?...

        })

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

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

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

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

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

        ? ?}]

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

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

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

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

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

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

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

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

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

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

        ? ?}

        ?}, ?// 自定義函數或者屬性如:

        ?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({//調用類

        ?onLoad: function () {// ?使用時,用 util 引用名調用,如:util.sayHello()

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

        ?}

        })

        2.4 數據操作

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

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

        如果你需要操作全局的數據,你需要在 app.js 中進行相應設置,例如:

        App({// app.js

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

        3. 視圖層 WXML

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

        3.1 條件渲染

        你可以利用?if?和?else,在視圖層上編寫在特定情況下,出現的不同的視圖結果。

        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 處理一個循環。

        在 WXML 中,你可以這樣來建立一個 for 循環:

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

        然后在相應的 JS 中,新建一個數組:

        page.jsPage({ ?data: {

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

        ?}

        })

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

        wx:key?有兩種形式:

        字符串:wx:key="unique"

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

        3.3 運算

        WXML 可以執行簡單的運算任務。例如:

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

        也可以做到字符串拼接:

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

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

        3.4 模板

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

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

        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?中的數據,會通過事件傳遞。它的事件以?data-?開頭,多個單詞以?-?鏈接,如?data-a-b。

        需要注意的是,使用這種方式定義的變量不能有大寫。它會自動轉成駝峰命名,調取的時候去駝峰命名的名字。

        4. WXSS

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

        WXSS 可以使用內聯樣式,但這樣會影響渲染速度。

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

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

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

        經過再三確定過文件編碼就是UTF8沒錯。而且在html的head中也加入了 meta charset="utf-8" 。最后無奈一點一點對比之前的項目的區別,發現之前的項目中的meta是通過http-equiv設置的瀏覽器編碼。

        設置后發現顯示正常,看來微信-iOS版本中的瀏覽器內核不是最新的,存在兼容問題,遇到坑的朋友們要注意了。

        微信小程序開發有哪些坑的介紹就聊到這里吧,感謝你花時間閱讀本站內容,更多關于開發微信小程序難不難、微信小程序開發有哪些坑的信息別忘了在本站進行查找喔。

        掃碼二維碼
        色色色网

        1. <blockquote id="ancms"></blockquote>