微信小程序開發(fā)步驟詳解

2018-05-22|HiShop

導讀：列表渲染當同一個View中需要放多個格式相同的控件時，盡量使用列表渲染的方式，代碼容易維護，樣式也美觀。圖片格式 1 微信小程序中使用的圖片si...

列表渲染

當同一個View中需要放多個格式相同的控件時，盡量使用列表渲染的方式，代碼容易維護，樣式也美觀。

圖片格式

1 微信小程序中使用的圖片size盡量要小，格式為.png.

可以在網上找在線格式轉換工具或者圖片縮小工具修改圖片。

圖片過大會影響代碼審核和小程序工作效率，尤其是加載。

背景圖設置

背景圖即某個VIEW的背景圖片，比如滾動圖，目前僅支持url方式的圖片。

當然，你在開發(fā)工具中調試時，本地圖片做背景圖也是可以的，但是手機上預覽會看不到圖片。

提供圖片存儲的服務器有很多，自己找個地方存好，獲取URL就可以了

布局控件自適應

自適應就是你的布局不管在什么手機上都能顯示，布局隨手機屏幕大小進行縮小和放大。

只要把所有的尺寸相關單位修改為rpx即可，有時候你下載的Demo可能有其他尺寸單位，比如px,rem.

轉換公式：

1px=2rpx

1rem約等于35rpx

標題欄、導航欄、狀態(tài)欄、窗口

它們的格式在app.json的windows里設置，比如：

"window":{ "backgroundColor":"#f4f4f4", "backgroundTextStyle":"light", "navigationBarBackgroundColor":"#FF5722", "navigationBarTitleText": "智能生活寶", "navigationBarTextStyle":"#FFFFFF" },

詳細說明見：

https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

除了windows里定義的屬性，其他的格式是不可以修改的。

比如，標題欄中有無回退鍵，關閉鍵等。

----------導航欄可以通過tabBar設置多個導航，但僅可以指定頁面、圖標，字體等。位置什么的就不要考慮了。最少配置2個，最多配置五個。

比如下面配置了頁面和幫助兩個導航欄：

"tabBar":{ "color": "#959394", "selectedColor":"#959394", "backgroundColor":"#f0f0f0", "borderStyle": "white", "list": [ { "pagePath":"pages/index/index", "iconPath":"pages/images/home_b.png", "selectedIconPath":"pages/images/home.png", "text": "首頁" }, { "pagePath":"pages/components/mine/mine", "iconPath":"pages/images/mine_b.png", "selectedIconPath":"pages/images/mine.png", "text": "幫助" } ] },

圖片導航到頁面

可以給圖片或者圖片所在的View設置事件，比如bindtap,然后在事件處理函數(shù)里調用設置導航的API函數(shù)：

wx.navigateTo({

url:"../components/general/general?code=menu"

})

“?”后面是提供給頁面的參數(shù)名稱和值。

詳細介紹見：https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui.html

多個頁面功能相似時的處理

當多個頁面的布局相同，處理方式也相同，只是要處理的數(shù)據不同時，就可以僅寫一個公共頁面，其他控件導入頁面時，通過傳入不同的參數(shù)進行區(qū)分。

wx.navigateTo({

url:"../components/general/general?code=menu"

})

比如，上面在導航時，傳入的參數(shù)code指明是menu 類型。

里面提供的代碼中general頁面就是一個公共頁面。

圖片和文字等多個空間同時觸發(fā)一個事件

如果你希望再同一個View中的圖片和文字或者其他控件觸摸時都觸發(fā)同一個事件，直接把這個事件放在view的配置里。

Text/textarea 焦點控制

Text/textarea控件僅用來顯示數(shù)據時，要關掉自動聚焦，否則你所在頁面時，點擊控件就會自動彈出鍵盤。

屬性auto-focus不設置或者值為 false即可。

文本滾動

若需要顯示的文本內容大于文本框，能夠自動出現(xiàn)滾動條，而不是放大文本框。

5 模板下載和使用

剛開始可以去網上找一些免費的Demo學習一下，事半功倍。

6 發(fā)布

當你確定你的小程序沒有什么問題了，至少功能完善，沒有嚴重bug.

可以開始發(fā)布。

上傳代碼

發(fā)布之前必須先上傳代碼，上傳方式請參考第2節(jié)。

提交審核

登錄微信公眾平臺->開發(fā)管理

圖中開發(fā)版本即你最后一次上傳的版本，點擊“提交審核”之后，就會在審核版本中看到。一般個人審核需要1到3天吧，反正我的最長是3天，且中間有周末。最短的不到兩小時。

提交審核后，若還沒有進入審核系統(tǒng)，可以撤回審核。

審核通過后你會在管理員微信收到審核通過通知，當然微信公眾號也可以查詢。

審核通過后，需要你登錄微信公眾號手動點擊發(fā)布，才會再線上版本中顯示，這時用戶就可以使用了。

7 推廣

登錄微信公眾號->推廣->修改關鍵詞

每個人可以寫10個關鍵詞，以便用戶在搜索公眾號時可以搜到你的小程序

二維碼

分享你的二維碼圖給用戶

登錄微信公眾號->設置,下載二維碼

通過公眾號關聯(lián)

如果你有其他公眾號，也可以在其他公眾號里關聯(lián)你的小程序。

8 數(shù)據查看

登錄微信公眾號->數(shù)據分析，可以看到小程序各頁面的訪問情況和人數(shù)，轉載等信息。

第 1 頁【小程序開發(fā)】微信小程序怎么開發(fā)
第 2 頁【小程序開發(fā)教程】微信小程序開發(fā)步驟詳解