uni-app小程序開發(fā)踩坑記錄
最近要從零開發(fā)一個(gè)跟后臺(tái)管理系統(tǒng)對(duì)接的小程序，因?yàn)楣δ鼙容^復(fù)雜，時(shí)間短，選擇了比較火的uni-app，因?yàn)樾〕绦虺霈F(xiàn)的時(shí)間較短，各方面并不完善，開發(fā)過程中就是不斷踩坑的過程，特此記錄一小下。uni-app雖然功能還不完善，但是插件市場(chǎng)里東西還是不少的，在搭建框架中因?yàn)樾枨笠蠼梃b了之前開發(fā)的PC端，所以有一些跟之前開發(fā)VUE相關(guān)的插件 ，可以提高開發(fā)效率，1.覆蓋原生組件，需要用cover-view容器，但是cover-view里可包含的標(biāo)簽有限，類似view等在真機(jī)調(diào)試時(shí)不顯示，需全部替換成cover-view，且icon無法顯示，可以用cover-imaga代替。2.小程序和小程序之間的跳轉(zhuǎn)（如騰訊云的人機(jī)滑動(dòng)驗(yàn)證），跳轉(zhuǎn)回來時(shí)需要進(jìn)行操作，此時(shí)可以判斷app.vue中的options，如果按小程序文檔中來說當(dāng)options.scene === 1038時(shí)是小程序跳回來的場(chǎng)景，但是部分手機(jī)跳回來是options.scene為1001，只能將這2種都作為跳轉(zhuǎn)判斷的條件。3.小程序跳轉(zhuǎn)回來app中的onshow有時(shí)不執(zhí)行，這個(gè)原因暫未找到4.在uniapp的H5版本 ，接入 騰訊云滑動(dòng)驗(yàn)證 ，示例的點(diǎn)擊滑動(dòng)驗(yàn)證元素是通過dom操作的，但是無效，可能跟uniAPP不支持dom操作有關(guān)系，采用定制接入方法一，手動(dòng)調(diào)用。
小程序開發(fā)有哪些坑
1.JSON配置文件小程序中，包含唯一的全局配置文件app.json，以及每個(gè)頁(yè)面的配置文件page.json。每單頁(yè)頁(yè)面相應(yīng)的JSON文件會(huì)覆蓋與app.json相同的配置項(xiàng)。如下，是一個(gè)包含了所有配置選項(xiàng)的簡(jiǎn)單配置app.json。"pages":[//設(shè)置頁(yè)面的路徑"pages/index/index",//不需要寫index.wxml,index.js,index,wxss,框架會(huì)自動(dòng)尋找并整合"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不能上下滾動(dòng)，true/false，注意！只能在page.json中有效，無法在app.json中設(shè)置該項(xiàng)。},"tabBar":{//底部tab或者頂部tab的表現(xiàn)，是個(gè)數(shù)組，最少配置2個(gè)，最多5個(gè)
"list":[{//設(shè)置tab的屬性，最少2個(gè)，最多5個(gè)
"pagePath":"pages/index/index",//點(diǎn)擊底部tab跳轉(zhuǎn)的路徑
"text":"首頁(yè)",//tab按鈕上的文字
"iconPath":"../img/a.png",//tab圖片的路徑
"selectedIconPath":"../img/a.png"http://tab在當(dāng)前頁(yè)，也就是選中狀態(tài)的路徑
},{"pagePath":"pages/logs/logs","text":"日志"
}],"color":"red",//tab的字體顏色
"selectedColor":"#673ab7",//當(dāng)前頁(yè)tab的顏色，也就是選中頁(yè)的
"backgroundColor":"#2196f3",//tab的背景色
"borderStyle":"white",//邊框的顏色black/white
"position":"bottom"http://tab處于窗口的位置top/bottom
},"networkTimeout":{//默認(rèn)都是60000秒一分鐘
"request":10000,//請(qǐng)求網(wǎng)絡(luò)超時(shí)時(shí)間10000秒
"downloadFile":10000，//鏈接服務(wù)器超時(shí)時(shí)間10000秒
"uploadFile":"10000",//上傳圖片10000秒
"downloadFile":"10000"http://下載圖片超時(shí)時(shí)間10000秒
},"debug":true//項(xiàng)目上線后，建議關(guān)閉此項(xiàng)，或者不寫此項(xiàng)
2.JS邏輯層
小程序的邏輯層由JavaScript語(yǔ)言完成。但因?yàn)樾〕绦虿辉跒g覽器中運(yùn)行，所以JS在web瀏覽器中的一些函數(shù)不能用，如document、window等。
app.js有全局的小程序生命周期，page.js有自己本頁(yè)面的生命周期。
2.1注冊(cè)小程序app.js
這一步驟，有這幾個(gè)需要注意的地方：
必須在app.js中，使用app()函數(shù)注冊(cè)微信小程序。全局小程序中，只能注冊(cè)一次；
不能在app()內(nèi)的函數(shù)中調(diào)用getApp()（小程序?qū)嵗褂胻his就可以拿到小程序的實(shí)例；
不要在onLaunch的時(shí)候getCurrentPage()，因?yàn)榇藭r(shí)page還沒有生成；
通過其他子頁(yè)面調(diào)用getApp()獲取實(shí)例后，不要私自調(diào)用小程序全局的生命周期方法；
可以通過varapp=getApp()獲取小程序的實(shí)例。
app({//小程序生命周期的各個(gè)階段
onLaunch:function(){},//當(dāng)小程序初始化完成時(shí)，會(huì)觸發(fā)onLaunch（全局只觸發(fā)一次）
onShow:function(){},//當(dāng)小程序啟動(dòng)，或從后臺(tái)進(jìn)入前臺(tái)顯示，會(huì)觸發(fā)onShow
onHide:function(){},//當(dāng)小程序從前臺(tái)進(jìn)入后臺(tái)隱藏，會(huì)觸發(fā)onHide
onError:function(){},//當(dāng)小程序發(fā)生腳本錯(cuò)誤，或者api調(diào)用失敗時(shí)，會(huì)觸發(fā)onError并帶上錯(cuò)誤信息
//自定義函數(shù)或者屬性，用this可以訪問
2.2注冊(cè)小程序的頁(yè)面page.js
Page()用來注冊(cè)一個(gè)頁(yè)面，維護(hù)該頁(yè)面的生命周期以及數(shù)據(jù)。
Page({data:{//頁(yè)面的初始數(shù)據(jù)//調(diào)用：{{text}}{{array[0].msg}}
text:'initdata',array:[{msg:'1'
},{msg:'2'
},//頁(yè)面生命周期的各個(gè)階段
onLoad:function(){},//生命周期函數(shù)--監(jiān)聽頁(yè)面加載
onShow:function(){},//生命周期函數(shù)--監(jiān)聽頁(yè)面初次渲染完成
onReady:function(){},//生命周期函數(shù)--監(jiān)聽頁(yè)面顯示
onHide:function(){},//生命周期函數(shù)--監(jiān)聽頁(yè)面隱藏
onUnload:function(){},//生命周期函數(shù)--監(jiān)聽頁(yè)面卸載
onPullDownRefresh:function(){},//頁(yè)面相關(guān)事件處理函數(shù)。如果需要監(jiān)聽用戶下拉動(dòng)作，需要在app.json中配置"enablePullDownRefresh":"true"允許上拉刷新
onReachBottom:function(){},//頁(yè)面上拉觸底事件的處理函數(shù)
onShareAppMessage:function(){//用戶點(diǎn)擊右上角分享
return{title:'自定義分享標(biāo)題',desc:'自定義分享描述',path:'/page/user?id=123'
},//自定義函數(shù)或者屬性如：
customData:{hi:'MINA'
2.3公共模塊util.js
公共模塊方法需要通過module.exports對(duì)外暴露接口，使用的時(shí)候需要利用require(path)，將文件引入。如：
functionsayHello(name){//公共方法util類
console.log(`Hello${name}!`)
}module.exports.sayHello=sayHello//用module.exports對(duì)外暴露接口
//先引入文件，是新建的一個(gè)utils包，公共方法在util.js里面varutil=require('../../utils/util.js')
Page({//調(diào)用類
onLoad:function(){//使用時(shí)，用util引用名調(diào)用，如：util.sayHello()
util.sayHello('我是傳的值');
2.4數(shù)據(jù)操作
setData()不能直接操作數(shù)據(jù)，例如this.data.text="xxxxx"就是錯(cuò)誤的。你需要在this.setData()之中，進(jìn)行數(shù)據(jù)的操作。
同時(shí)，這里有作用域的問題。比如，需要在局部函數(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ù)綁定使用兩對(duì)花括號(hào)，將變量名包起來。
3.1條件渲染
你可以利用if和else，在視圖層上編寫在特定情況下，出現(xiàn)的不同的視圖結(jié)果。
很多人會(huì)將CSS中的display:hidden屬性，將其做一個(gè)比較。
微信小程序中的wx:if是惰性的。如果不符合渲染條件，它不會(huì)渲染相應(yīng)部分；
使用display:hidden時(shí)，元素始終渲染，只是視圖層上沒有顯示，用戶看不見。
如果你的小程序有元素顯示頻繁切換的需求，建議你使用display:hidden，能夠?yàn)橛脩籼峁┠茼槙车氖褂皿w驗(yàn)。
3.2列表渲染
相當(dāng)于讓W(xué)XML處理一個(gè)循環(huán)。
在WXML中，你可以這樣來建立一個(gè)for循環(huán)：
然后在相應(yīng)的JS中，新建一個(gè)數(shù)組：
page.jsPage({data:{
array:[1,2,3,4,5]
需要注意的是，如果列表中的項(xiàng)需要?jiǎng)討B(tài)添加到列表中，并希望項(xiàng)目保持原有的特征和狀態(tài)，那么你應(yīng)該使用wx:key。
wx:key有兩種形式：
字符串：wx:key="unique"
保留關(guān)鍵字：wx:key="*this"
3.3運(yùn)算
WXML可以執(zhí)行簡(jiǎn)單的運(yùn)算任務(wù)。例如：
也可以做到字符串拼接：
甚至，你可以使用...在WXML中展開對(duì)象。
3.4模板
name定義組件模版的名稱，引用模版的時(shí)候使用is屬性指定模版的名字，is可以進(jìn)行簡(jiǎn)單的三目運(yùn)算，需要傳入模版需要的data數(shù)據(jù)。
因?yàn)槟０鎿碛凶约旱淖饔糜?，所以只能使用data傳入數(shù)據(jù)，而不接受雙花括號(hào)的寫法。
3.5公共模塊的引用
WXML提供import和include兩種文件引用方式。
import有作用域的概念，不能多重引用。
而include就可以多重引用了。
3.6事件
名稱以bind開頭的事件不阻止冒泡，名稱以catch開頭的事件冒泡是阻止的。如bindTap和catchTab。
在WXML中，可以使用dataset定義data中的數(shù)據(jù)，會(huì)通過事件傳遞。它的事件以data-開頭，多個(gè)單詞以-鏈接，如data-a-b。
需要注意的是，使用這種方式定義的變量不能有大寫。它會(huì)自動(dòng)轉(zhuǎn)成駝峰命名，調(diào)取的時(shí)候去駝峰命名的名字。
4.WXSS
WXSS的用法類似于CSS，并在CSS的基礎(chǔ)上，擴(kuò)展了rpx尺寸單位和樣式導(dǎo)入功能。
WXSS可以使用內(nèi)聯(lián)樣式，但這樣會(huì)影響渲染速度。
每個(gè)頁(yè)面自己的page.wxss樣式表，會(huì)覆蓋全局樣式表app.wxss。
企業(yè)如何避開微信小程序開發(fā)那些坑
現(xiàn)在小程序玩法那么多，商家們也是斥巨資投入小程序的開發(fā)應(yīng)用，怎么感覺看不到效果呢？
你好，現(xiàn)在小程序的開發(fā)者和使用者越來越多，小程序的營(yíng)銷工具也越來越豐富，小程序的走紅，使得互聯(lián)網(wǎng)產(chǎn)品在商城、獲客、裂變分享等功能上的玩法層出不窮。商家們甚至不惜巨資投入小程序的開發(fā)應(yīng)用，但效果卻不盡如人意。那么，為什么商城拓客的效果差強(qiáng)人意？推廣小程序，獲取的只是線索，而線索與客戶存在機(jī)會(huì)、關(guān)鍵聯(lián)系人這兩座大山。而如何使流量變現(xiàn)最大化，讓客戶扎實(shí)沉墊，就必須要解決以下幾個(gè)問題，超智名片針對(duì)這些問題設(shè)計(jì)了具體可執(zhí)行的功能。1、小程序推廣問題小程序如何曝光在用戶面前，用戶的關(guān)注點(diǎn)到底在哪里，推廣方式又有多少人？酷掌柜打造的智能化營(yíng)銷系統(tǒng)，打通了整個(gè)銷售閉環(huán)。通過活動(dòng)分發(fā)，將小程序推廣渠道大大拓寬。2、線索跟進(jìn)問題如何通過線索跟進(jìn)找到合作機(jī)會(huì)？線索需求在哪里，無效的線索怎樣甄別？天眼系統(tǒng)的行為軌跡跟蹤功能與在線自動(dòng)溝通功能，將小程序推廣渠道獲取進(jìn)來的線索，自動(dòng)分配給對(duì)應(yīng)人員進(jìn)行跟進(jìn)。3、成交問題成交的關(guān)鍵點(diǎn)在于，知道誰(shuí)需要我的產(chǎn)品，需要什么產(chǎn)品，什么時(shí)候需要，以及在我知道他需要的時(shí)候及時(shí)能聯(lián)系上他。只有掌握這些關(guān)鍵節(jié)點(diǎn)，才能實(shí)現(xiàn)精準(zhǔn)成交。銷售人員結(jié)合客戶所處的銷售階段，給潛在客戶進(jìn)行標(biāo)簽管理，并推動(dòng)銷售流程，最終達(dá)成成交。 4、客戶留存問題客戶的二次觸達(dá)，是目前客戶留存最大的難點(diǎn)。包括如何吸引二次消費(fèi)及持續(xù)消費(fèi)，如何保障客戶的高黏性。超智名片優(yōu)化了客戶詳情頁(yè)整體頁(yè)面展示效果，創(chuàng)建任務(wù)快捷入口，更快捷方便有效的管理客戶?？蛻糍Y料展示更直觀，方便的查看客戶信息情況。通過對(duì)客戶的運(yùn)營(yíng)，真正實(shí)現(xiàn)讓客戶沉淀，真正解決了從獲客到服務(wù)、到成交的完整營(yíng)銷閉環(huán)。希望通過人工智能名片的賦能，為企業(yè)品牌營(yíng)銷及獲客提供更高的價(jià)值。
以上就是【墻裂推薦！小程序能開發(fā)視頻網(wǎng)站的坑(小程序開發(fā)起步視頻)】的全部?jī)?nèi)容。
評(píng)論