商城系統(tǒng) 注冊(cè)

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

2018-05-22|HiShop
導(dǎo)讀：列表渲染 當(dāng)同一個(gè)View中需要放多個(gè)格式相同的控件時(shí)，盡量使用列表渲染的方式，代碼容易維護(hù)，樣式也美觀。 圖片格式 1 微信小程序中使用的圖片si...
當(dāng)同一個(gè)View中需要放多個(gè)格式相同的控件時(shí)，盡量使用列表渲染的方式，代碼容易維護(hù)，樣式也美觀。
1 微信小程序中使用的圖片size盡量要小，格式為.png.
可以在網(wǎng)上找在線格式轉(zhuǎn)換工具或者圖片縮小工具修改圖片。
圖片過(guò)大會(huì)影響代碼審核和小程序工作效率，尤其是加載。
   背景圖即某個(gè)VIEW的背景圖片，比如滾動(dòng)圖，目前僅支持url方式的圖片。
 
   當(dāng)然，你在開發(fā)工具中調(diào)試時(shí)，本地圖片做背景圖也是可以的，但是手機(jī)上預(yù)覽會(huì)看不到圖片。
   提供圖片存儲(chǔ)的服務(wù)器有很多，自己找個(gè)地方存好，獲取URL就可以了
自適應(yīng)就是你的布局不管在什么手機(jī)上都能顯示，布局隨手機(jī)屏幕大小進(jìn)行縮小和放大。
只要把所有的尺寸相關(guān)單位修改為rpx即可，有時(shí)候你下載的Demo可能有其他尺寸單位，比如px,rem.
  轉(zhuǎn)換公式：
  1px=2rpx
  1rem約等于35rpx
它們的格式在app.json的windows里設(shè)置，比如：

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

詳細(xì)說(shuō)明見(jiàn)：
https://mp.weixin.qq.com/debug/wxadoc/dev/framework/config.html

除了windows里定義的屬性，其他的格式是不可以修改的。
比如，標(biāo)題欄中有無(wú)回退鍵，關(guān)閉鍵等。

----------導(dǎo)航欄可以通過(guò)tabBar設(shè)置多個(gè)導(dǎo)航，但僅可以指定頁(yè)面、圖標(biāo)，字體等。位置什么的就不要考慮了。最少配置2個(gè)，最多配置五個(gè)。
比如下面配置了頁(yè)面和幫助兩個(gè)導(dǎo)航欄：

"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": "首頁(yè)"      },      {        "pagePath":"pages/components/mine/mine",        "iconPath":"pages/images/mine_b.png",        "selectedIconPath":"pages/images/mine.png",        "text": "幫助"      }    ]  },
       可以給圖片或者圖片所在的View設(shè)置事件，比如bindtap,然后在事件處理函數(shù)里調(diào)用設(shè)置導(dǎo)航的API函數(shù)：
wx.navigateTo({
      url:"../components/general/general?code=menu"
})
“?”后面是提供給頁(yè)面的參數(shù)名稱和值。
詳細(xì)介紹見(jiàn)：https://mp.weixin.qq.com/debug/wxadoc/dev/api/ui.html
當(dāng)多個(gè)頁(yè)面的布局相同，處理方式也相同，只是要處理的數(shù)據(jù)不同時(shí)，就可以僅寫一個(gè)公共頁(yè)面，其他控件導(dǎo)入頁(yè)面時(shí)，通過(guò)傳入不同的參數(shù)進(jìn)行區(qū)分。
wx.navigateTo({
      url:"../components/general/general?code=menu"
})
比如，上面在導(dǎo)航時(shí)，傳入的參數(shù)code指明是menu 類型。

里面提供的代碼中g(shù)eneral頁(yè)面就是一個(gè)公共頁(yè)面。
如果你希望再同一個(gè)View中的圖片和文字或者其他控件觸摸時(shí)都觸發(fā)同一個(gè)事件，直接把這個(gè)事件放在view的配置里。
Text/textarea控件僅用來(lái)顯示數(shù)據(jù)時(shí)，要關(guān)掉自動(dòng)聚焦，否則你所在頁(yè)面時(shí)，點(diǎn)擊控件就會(huì)自動(dòng)彈出鍵盤。
屬性auto-focus不設(shè)置或者值為 false即可。
      若需要顯示的文本內(nèi)容大于文本框，能夠自動(dòng)出現(xiàn)滾動(dòng)條，而不是放大文本框。

5   模板下載和使用
剛開始可以去網(wǎng)上找一些免費(fèi)的Demo學(xué)習(xí)一下，事半功倍。

6   發(fā)布
當(dāng)你確定你的小程序沒(méi)有什么問(wèn)題了，至少功能完善，沒(méi)有嚴(yán)重bug.
可以開始發(fā)布。
發(fā)布之前必須先上傳代碼，上傳方式請(qǐng)參考第2節(jié)。
登錄微信公眾平臺(tái)->開發(fā)管理

 

圖中開發(fā)版本即你最后一次上傳的版本，點(diǎn)擊“提交審核”之后，就會(huì)在審核版本中看到。一般個(gè)人審核需要1到3天吧，反正我的最長(zhǎng)是3天，且中間有周末。最短的不到兩小時(shí)。
提交審核后，若還沒(méi)有進(jìn)入審核系統(tǒng)，可以撤回審核。
審核通過(guò)后你會(huì)在管理員微信收到審核通過(guò)通知，當(dāng)然微信公眾號(hào)也可以查詢。
審核通過(guò)后，需要你登錄微信公眾號(hào)手動(dòng)點(diǎn)擊發(fā)布，才會(huì)再線上版本中顯示，這時(shí)用戶就可以使用了。
7   推廣
每個(gè)人可以寫10個(gè)關(guān)鍵詞，以便用戶在搜索公眾號(hào)時(shí)可以搜到你的小程序
分享你的二維碼圖給用戶
登錄微信公眾號(hào)->設(shè)置,下載二維碼
如果你有其他公眾號(hào)，也可以在其他公眾號(hào)里關(guān)聯(lián)你的小程序。

8   數(shù)據(jù)查看   
登錄微信公眾號(hào)->數(shù)據(jù)分析，可以看到小程序各頁(yè)面的訪問(wèn)情況和人數(shù)，轉(zhuǎn)載等信息。
電話咨詢 預(yù)約演示 0元開店