小程式開發特輯—小程式申請及開發環境搭建

??互聯網巨頭們都熱衷于搭建平臺，希望能夠打造自己的生態，依靠生態公司開發各種各樣的應用來滿足用戶的需求，這其中涉及到兩個比較大的問題：一方面巨頭的腿需要足夠粗，這樣生態公司才愿意花時間和精力在這些平臺上；另一方面如何管控這些生態公司，保證它們能夠提供相對一致的用戶體驗，這樣不至于出現“生態繁榮了，但體驗下降了”的局面，小程式應運而生，
??2017微信發布小程式，之后各大互聯網巨頭都推出了自己的小程式，但只有微信小程式支持個人開發者，其他小程式均需要企業認證，顧本特輯只能以微信小程式為例，結合小編自己開發的小程式具體講講如何進行小程式開發，

小程式申請

??小程式的申請比較的簡單，只需要準備一個手機號和一個郵箱即可，注意郵箱必須沒有系結過其他小程式或者公眾號，手機號之前系結的小程式和公眾號的數量不超過5個，需要提醒的是：小程式服務型別不同，審核的標準也會不一樣，工具類的小程式比較容易過審，也不需要提交額外的材料，注冊成功之后記下小程式的appKey和appSecret，后續的開發中會經常用到，

環境搭建

??小程式開發需要專門的開發工具，可以前往官網進行下載安裝，打開開發工具，填入申請的小程式appId，開發環境就搭建完成了，

目錄結構介紹

??小程式包含一個描述整體程式的 app 和多個描述各自頁面的 page，一個小程式主體部分由三個檔案組成，必須放在專案的根目錄，如下：

一個小程式頁面由四個檔案組成，分別是：

開發實戰

??接下來介紹之前做的一款小程式：《工具百寶箱》，我會分多期介紹里面的每一個工具，先介紹一個首頁是如何實作的，
??工具百寶箱這個小程式底部有兩個tab，一個是工具的串列，一個是我的，這個只需要在app.json里面進行配置即可：

{
 "useExtendedLib": {
    "kbone": true,
    "weui": true
  },
  "entryPagePath": "pages/index/index",
  "tabBar": {
    "selectedColor": "#f47920",
    "backgroundColor": "#f2f2f2",
    "list": [{
        "pagePath": "pages/index/index",
        "text": "工具",
        "iconPath": "/resources/icons/tools-not-selected.png",
        "selectedIconPath": "/resources/icons/tools-selected.png"
      },
      {
        "pagePath": "pages/my-profile/my-profile",
        "text": "我的",
        "iconPath": "/resources/icons/my-profile-ori.png",
        "selectedIconPath": "/resources/icons/my-profile-selected.png"
      }
    ]
  }
}

上面配置中的"entryPagePath": "pages/index/index"表示應用啟動之后打開的頁面為index，即工具串列頁面，工具串列頁比較的簡單，只用到了常用的串列渲染，代碼如下：

<view class="page" data-weui-theme="light">
  <view class="page__bd linui-mt-16 linui-mlr-5">
    <view class="weui-grids">
      <navigator class="weui-grid" wx:for="{{toolList}}" url="{{item.url}}" wx:key="text">
        <view class="weui-grid__icon">
          <image src="{{item.icon}}" alt></image>
        </view>
        <view class="weui-grid__label">{{item.text}}</view>
      </navigator>
    </view>
  </view>
</view>

// index.js
// 獲取應用實體
const app = getApp()

Page({
  data: {
    toolList: [
      {
        text: "轉盤做決定", icon: "../../resources/icons/wheel.png",
        url: "../wheel-config/wheel-config"
      },
      {
        text: "手持滾動彈幕", icon: "../../resources/icons/subtitles.png"
        , url: "../subtitle-config/subtitle-config"
      }, {
        text: "手機閃屏", icon: "../../resources/icons/rainbow.png",
        url: "../rainbow/rainbow"
      }, {
        text: "情侶昵稱",
        icon: "../../resources/icons/love.png"
        , url: "../love-nickname/love-nickname"
      },
      {
        text: "金額轉大寫", icon: "../../resources/icons/money.png",
        url: "../money-upper/money-upper"
      },
      {
        text: "二維碼生成"
        , icon: "../../resources/icons/qr-code.png"
        , url: "../qrcode/arcode"
      }, {
        text: "本機IP"
        , icon: "../../resources/icons/ip.png"
        , url: '../ip/ip'
      }, {
        text: "IP查詢"
        , icon: "../../resources/icons/internet.png"
        , url: "../search-ip/search-ip"
      }, {
        text: "md5加密"
        , icon: "../../resources/icons/md5.png"
        , url: "../md5-tool/md5-tool"
      }
    ]
  }
})

保存一下檔案，開發工具會自動的進行編譯，即可看到首頁了，

結語

??接下來將介紹每一個工具具體是如何開發的，喜歡的朋友記得關注哦~