小程序開發總結（詳細）

這段時間一直在作小程序，總結下。後續可能會不斷更新，努力寫仔細點，爭取讓人看到就能會寫。

一，頁面結構。

 

這基本是小程序的標準目錄結構。咱們從上到下解釋下：pages文件夾放置咱們全部用到的頁面，基本是一個頁面一個文件夾，相似模塊。每一個頁面中，有四個文件（有的可能不會有.json文件）。分別是:js/json/wxml/wxss.

.js:是頁面的腳本文件，是必要的。在這個文件中咱們能夠監聽並處理頁面的生命週期函數、獲取小程序實例，聲明並處理數據，響應頁面交互事件等。

.json：是頁面的配置文件，頁面的配置文件是非必要的。當有頁面的配置文件時，配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。若是沒有指定的頁面配置文件，則在該頁面直接使用 app.json 中的默認配置。

.wxml：是頁面的結構文件。是必要的。至關於咱們經常使用的html。

.wxss：是頁面的樣式表，頁面的樣式表是非必要的。

---

 

接下來的目錄是個public文件夾，這是我本身新建的文件夾，用來存放圖片等。

下面是個tpl文件夾，template，就是存放頁面所用到的模板文件。都是本身新建的。

最下邊是個utils文件夾，裏面有一個utils.js，通常咱們會在其中放入一些公用類的方法，好比封裝好的一些通用的方法。可供咱們隨時調用。

最下邊是四個app.js/spp.json/app.wxss/project.config.json 其中的前三個，是整個項目的核心。

app.js是小程序的腳本代碼。咱們能夠在這個文件中監聽並處理小程序的生命週期函數、聲明全局變量。

app.json是對整個小程序的全局配置。咱們能夠在這個文件中配置小程序是由哪些頁面組成，配置小程序的窗口,背景色，配置導航條樣式，配置默認標題。注意該文件不可添加任何註釋!

app.wxss是整個小程序的公共樣式表。咱們能夠在頁面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規則。

project.config.json是項目的配置文件，裏面有咱們全部項目配置的信息，包括是否支持es6，appid等設置和信息。

---

……

二，wxhl語法

wxhl跟html同樣，都有本身標籤的語法規則。區別比較大的，div塊元素，都是用<view></view>這種雙標籤。並且，不存在有h5新標籤：header等。

img標籤：<image></image> 雙標籤

文字標籤:<text></text>雙標籤

a標籤:<navigator url="../navigator/navigator?title=我是navi">跳轉到新的頁面</navigator> （同時也是頁面跳轉的一個方法）

更多的不一樣，咱們不在標籤上詳細敘述。咱們來談一談，小程序最佳的佈局方式。flex佈局

什麼是flex佈局？

display：flex  是將元素做爲彈性伸縮盒顯示，早在css3就有。

舉個例子：定義一個容器，裏面包含幾個子元素。

<div style="width:400px; height: 120px; background: #ddd;  display: flex;flex-flow: row;">
    <div style="border: #fff solid 1px;  width: 100px;>jquery特效</div>
    <div style="border: #fff solid 1px;  width: 100px;><a href="">微信小程序開發</a></div>
    <div style="border: #fff solid 1px; width:100px;><a href="">web前端開發</a></div>
</div>

display flex容器的屬性

• flex-direction
• flex-wrap
• flex-flow
• justify-content
• align-items
• align-content

flex-direction屬性

flex-direction屬性決定主軸的方向（即項目的排列方向）。

1. .box {  
2.   flex-direction: row | row-reverse | column | column-reverse;  
3. }  

• row（默認值）：主軸爲水平方向，起點在左端。
• row-reverse：主軸爲水平方向，起點在右端。
• column：主軸爲垂直方向，起點在上沿。
• column-reverse：主軸爲垂直方向，起點在下沿。

 

 

flex-wrap屬性

默認狀況下，項目都排在一條線（又稱"軸線"）上。flex-wrap屬性定義，若是一條軸線排不下，如何換行。

1. .box{  
2.   flex-wrap: nowrap | wrap | wrap-reverse;  
3. }  

（1）nowrap（默認）：不換行。

（2）wrap：換行，第一行在上方。

（3）wrap-reverse：換行，第一行在下方。

 

flex-flow

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認值爲row nowrap。

 

1. .box {  
2.   flex-flow: <flex-direction> || <flex-wrap>;  
3. }  

justify-content屬性

justify-content屬性定義了項目在主軸上的對齊方式。

.box {  

1.   justify-content: flex-start | flex-end | center | space-between | space-around;  
2. }  

• flex-start（默認值）：左對齊
• flex-end：右對齊
• center： 居中
• space-between：兩端對齊，項目之間的間隔都相等。
• space-around：每一個項目兩側的間隔相等。因此，項目之間的間隔比項目與邊框的間隔大一倍。

align-items屬性

align-items屬性定義項目在交叉軸上如何對齊

1. .box {  
2.   align-items: flex-start | flex-end | center | baseline | stretch;  
3. }  

• flex-start：交叉軸的起點對齊。
• flex-end：交叉軸的終點對齊。
• center：交叉軸的中點對齊。
• baseline: 項目的第一行文字的基線對齊。
• stretch（默認值）：若是項目未設置高度或設爲auto，將佔滿整個容器的高度。

  

align-content屬性

align-content屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

.box {  

1.   align-content: flex-start | flex-end | center | space-between | space-around | stretch;  
2. }  

• flex-start：與交叉軸的起點對齊。
• flex-end：與交叉軸的終點對齊。
• center：與交叉軸的中點對齊。
• space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
• space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。
• stretch（默認值）：軸線佔滿整個交叉軸。

 

 項目的屬性

如下6個屬性設置在項目上。

• order
• flex-grow
• flex-shrink
• flex-basis
• flex
• align-self

order屬性

order屬性定義項目的排列順序。數值越小，排列越靠前，默認爲0。

1. .item {  
2.   order: <integer>;  
3. }  

 flex-grow屬性

flex-grow屬性定義項目的放大比例，默認爲0，即若是存在剩餘空間，也不放大。

1. .item {  
2.   flex-grow: <number>; /* default 0 */  
3. }  

若是全部項目的flex-grow屬性都爲1，則它們將等分剩餘空間（若是有的話）。若是一個項目的flex-grow屬性爲2，其餘項目都爲1，則前者佔據的剩餘空間將比其餘項多一倍。

flex-shrink屬性

flex-shrink屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。

1. .item {  
2.   flex-shrink: <number>; /* default 1 */  
3. }  

若是全部項目的flex-shrink屬性都爲1，當空間不足時，都將等比例縮小。若是一個項目的flex-shrink屬性爲0，其餘項目都爲1，則空間不足時，前者不縮小。
負值對該屬性無效。

flex-basis屬性

flex-basis屬性定義了在分配多餘空間以前，項目佔據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的默認值爲auto，即項目的原本大小。

1. .item {  
2.   flex-basis: <length> | auto; /* default auto */  
3. }  

它能夠設爲跟width或height屬性同樣的值（好比350px），則項目將佔據固定空間。

flex屬性

flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，默認值爲0 1 auto。後兩個屬性可選。

1. .item {  
2.   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]  
3. }  

該屬性有兩個快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建議優先使用這個屬性，而不是單獨寫三個分離的屬性，由於瀏覽器會推算相關值。

align-self屬性

align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

 

1. .item {  
2.   align-self: auto | flex-start | flex-end | center | baseline | stretch;  
3. }  

該屬性可能取6個值，除了auto，其餘都與align-items屬性徹底一致。

這就是基本的flex佈局，只能說，在小程序上，不要太好用。（注：flex佈局內容來自阮一峯 阮大大。原文地址：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html）

---

三，js 頁面腳本配置。小程序的生命週期。

 

app.js頁面

 

  我截了個圖，在app.js頁面，咱們看到，全部都是由一個app();包裹。而它在咱們官方文檔上，有着詳細記錄。

 

 

這是小程序頁面js腳本的初始配置。

Page({

  /**
   * 頁面的初始數據
   */
  data: {
    
  },

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

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

  /**
   * 生命週期函數--監聽頁面顯示
   */
  onShow: function () {
    
  },

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

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

  /**
   * 頁面相關事件處理函數--監聽用戶下拉動做
   */
  onPullDownRefresh: function () {
    
  },

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

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

 page()是在小程序上註冊一個頁面。詳情如官方文檔。

 

 

---

 

這部分再也不過多敘述，由於官網上寫的真的是很詳細。以後，會在這裏更新一些日常開發中遇到的一些問題。先到這裏吧，感謝阮大大的總結，能讓我拿來就給大家展現。

2017/10/23-am:10:30

 

 

 

 

 

 

---

 

2017年11月02日 上午  11：50

 

 

wx-gesture-lock  微信小程序的手勢密碼

WXCustomSwitch 微信小程序自定義 Switch 組件模板

WeixinAppBdNovel 微信小程序demo：百度小說搜索

shitoujiandaobu 小程序：石頭剪刀布（附代碼說明）

audiodemo 微信小程序開發之視頻播放器 Video 彈幕 彈幕顏色自定義

star 微信小程序開發之五星評分

switchCity 微信小程序開發之城市選擇器 城市切換

huadong_del  微信小程序滑動刪除效果

jianhang_menu 微信小程序開發之圓形菜單 仿建行圓形菜單

xiaoxiaoxiao_lazyload  實現微信小程序圖片懶加載特效

kangaiduowei  微信小程序：康愛多微商城：學習界面設計

tianmao_dazhuanpan  小程序實現大轉盤 仿天貓抽獎 跑馬燈效果（有圖有源碼）

weapp-meirong  微信小程序學習用demo推薦：美容商城；列表，預定

baisi  微信小程序仿百思不得姐

weapp-one 仿 「ONE · 一個」 的微信小程序

netmusic-app  仿網易雲音樂APP的微信小程序

a_takeaway  微信小程序的外賣demo

sideslip  微信小程序『側邊欄滑動』特效

wx_plo  微信小程序之仿微信漂流瓶

kwonWhere 微信小程序-知亦行

audiodemo  微信小程序開發之視頻播放 彈幕 彈幕顏色自定義

wxChart  微信小程序圖標插件

guoku  微信小程序-果庫

snake  微信小程序-貪吃蛇小程序

douban_movie  微信小程序-仿豆瓣電影

RecordDemo  麥克風動畫

shishanggou  實現了包括經常使用組件，ajax獲取數據，模板使用，路由等的使用，下拉刷新數據；

jiajuzaixian  傢俱在線-演示如何使用下拉選項

wechat-app-ipinbb  愛拼寶寶-功能很是全的電商應用

TodayNews-wx  微信小程序-今日頭條

WXNative-bpgg  奔跑果果-微信小程序

wechatapp-demo   是目前我發現的，實現實用功能較多的demo，推薦你們學習研究

weapp-MatterAssistant  微信小程序－事項助手

weapp-wymusic  微信小程序 仿網易雲音樂

weapp-wechat-nearby  微信小程序-仿找事吧app附近三千米

bs  精簡版百思不得姐

WXBaiSi  微信小程序版 百思不得姐

weapp-demo-breadtrip  基於麪包旅行 API 製做的微信小程序示例

html-to-wxml  小程序中將html內容轉化成wxml能夠顯示的內容，方便用於小程序中顯示

kachezhijia  自卡車之家，有豐富的卡車司機和物流園區的資源，因此這個小程序能夠說也是他們將來工做上的一個必將實施的項目。

WxEmojiView   微信小程序Emoji展現輸入組件alpha 0.1

GankCamp-WechatAPP gank.io (乾貨集中營) 微信小程序 版本

wechat-JD  微信小程序仿京東首頁

wechat-turntalbe-canvas  用微信小程序開發的Canvas繪製可配置的轉盤抽獎。

mangguoTv  微信小應用-小程序-demo-仿芒果TV

wxreading  微信小程序跟讀

WeChatMeiZhi  微信小程序版妹紙圖 API from gank.io

CountDown  微信小程序倒計時組件

weapp-github  微信小程序--github

wechat-weapp-mapdemo  微信小程序開發demo-地圖定位，很是簡單的demo，只爲了解一下微信小程序

wechat-cnode  微信小程序 cnode社區版

weapp-newsapp  微信小程序-公衆號熱門文章信息流

wechat-weapp-taobao  微信小程序demo 仿手機淘寶

timer  番茄時鐘微信小程序版

wechat-app-music  微信小程序：音樂播放器 技術棧: redux + es7 +labrador

fenda-mock  使用微信小程序實現「分答」這款APP的基礎功能

Wa-UI  針對微信小程序整合的一套UI庫

wx-query  微信小程序 仿jQuery插件

weapp-artand  微信小程序 Artand

WeiXin-SmallApps-Information  微信小程序-仿今日頭條

weapp-wechat-zhihu  微信中的知乎--微信小程序

WeApp  基於微信小程序開發的仿微信demo

SmallApp  微信小程序

wechat-v2ex 微信小程序-v2ex

weipiao 微信小程序-微票

DouBanBookApp   微信小程序之小豆瓣圖書

wxapp-calc 一個簡單的微信小程序-簡易計算器

weapp-wechat-zhihu   模仿知乎的小程序

wx-movies-demo   小程序--影訊

caiquan  微信小應用，猜拳小遊戲

hayeah-wxapp-Breakfast  小林早廚微信小程序

AppleMusic  微信小程序，仿Apple Music

cnode_wechat-webapp 用cnode社區api作的微信小應用

shoppingcar 一個點餐、購物的購物車效果

wechat-weapp-mall 微信小程序實現移動端商城

SmallAppForQQ  高仿手機QQ應用程序

zhihudaily  微信小程序-知乎日報

wechat-weapp-gank 微信小程序-乾貨投稿應用

TeamToy  調用TeamToy API 的微信小程序 Demo

douban 微信小程序（應用號）示例教程（豆瓣電影）