小程序開發注意點(持續更新)

分類:小喵學堂     發布時間:2018-09-04 14:17:44
分享到 :

1、小程序開發界面時候需要,界面上接下來需要對接接口數據的地方,盡可能在js那定義好data數據,然后在頁面進行綁定,好處自然就是后期對接后臺接口數據時候不用大改頁面,只用把原先在js頁面定義的data數據直接替換即可,不需要更改wxml文件

2、如有頁面上有元素是觸發跳轉的,這時候就要考慮在js頁面定義的data數據時候要加上id,作為跳轉頁面的參數,因為當對接上接口后,通常我們頁面跳轉都是傳參id,然后再通過接口查詢詳細信息

以上兩點主要是說我們在開發頁面的盡可能模擬對接上后臺的情景,小程序的data數據定義是非常方便我們模擬的,盡可能避免對接口后需要大改頁面,這樣是十分浪費時間的。

/**   * 頁面的初始數據   */data: {modules:[{title: "塞爾維斯·多功能房",hobbyTitle: "life+興趣定制 | 時光畫廊",id: 1,{id:2,title: "塞爾維斯·多功能房",hobbyTitle: "life+興趣定制 | 時光畫廊",}],},

3、會在多個頁面使用到js方法,我們盡量在app.js上封裝好,然后在別的頁面直接引用即可,這樣能減少代碼冗余,方便修改,而且多人開發的時候也有效減少重復工作

4、開發過小程序的人都知道小程序官方提供的icon庫少得可憐,所以我們是有必要引用第三方icon庫的,小程序中icon引用第巴里巴巴圖標庫的圖標,我們在app.wxss粘貼下面代碼即可

@font-face {font-family: 'iconfont';  /* project id 518032 */src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot');src: url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.eot?#iefix') format('embedded-opentype'),url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.woff') format('woff'),url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.ttf') format('truetype'),url('//at.alicdn.com/t/font_518032_t2q88z3jok8iwwmi.svg#iconfont') format('svg');}.iconfont {font-family:"iconfont" !important;font-size:60rpx;font-style:normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}/*本項目使用的18個圖標  */.icon-zhiding:before{content: '\e739';}.icon-zuojiantou:before{content: '\e736';}.icon-youjiantou:before{content: '\e735';}.icon-shangjiantou:before{content: '\e734';}.icon-xiajiantou1:before{content: '\e733';}.icon-xiajiantou:before{content: '\e6cc';}.icon-gengduotianchong:before{content: '\e67f';}.icon-erweima:before{content: '\e65f';}.icon-fenleiorguangchangorqita:before{content: '\e64f';}.icon-dibiao:before{content: '\e64d';}.icon-bangzhu:before{content: '\e64a';}.icon-xinfeng:before{content: '\e640';}.icon-duihuaxinxi:before{content: '\e639';}.icon-sousuo:before{content: '\e62f';}.icon-shouye:before{content: '\e62d';}.icon-shezhi:before{content: '\e62a';}.icon-shanchu:before{content: '\e629';}.icon-dianhua:before{content: '\e61b';}

頁面上使用我們直接使用小程序的icon組件然后在class 上寫iconfont 和你想使用的圖標的類即可 

 <icon class="iconfont icon-youjiantou"></icon>  //右箭頭

5、Now you can provide attr "wx:key" for a "wx:for" to improve performance.這個警告我相信有不少人應該都會碰到過,這個主要是我們在使用wx:for的時候缺少了wx:key這個屬性,這個屬性我們一般使用一個數組的唯一標識

key的作用:數據改變觸發渲染層重新渲染的時候,會校正帶有 key 的組件,框架會確保他們被重新排序,而不是重新創建,以確保使組件保持自身的狀態,并且提高列表渲染時的效率。

6、關于ajax的post請求后臺接受不到數據的問題,主要把請求表頭修改為application/x-www-form-urlencoded就行了,這時候請求的數據被編碼為名稱/值對,當然如果后臺支持application/json的參數接受的就不用看這點了

7、小程序要求請求接口必須是https的

8、小程序不能直接進行dom節點操作,ajax請求返回數據之后,賦值data中,之后從data中取數據,進行頁面渲染

9、小程序設置分享時候副標題的方法,https://blog.csdn.net/sqlquan/article/details/81701598

以上均為小喵科技技術曾大神見解,如果說錯的,請留意指出,歡迎各位大神指導補充,謝謝