微信小程序開發體驗

時間 2020-05-10

標籤微信程序開發體驗简体版

原文原文鏈接

最近公司準備將產品部分功能遷移到微信小程序，爲此從微信小程序官網教程學習了小程序開發，用了一個下午的時間開發了一個簡單的體質指數計算器的小程序，這裏聊聊小程序的開發體驗。本博文不會注重講解開發的技術過程。html

一、開發工具vue

微信爲了幫助開發者簡單和高效地開發微信小程序，開發了微信web開發工具，下載地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/devtools.htmlreact

開發工具裏面有編輯功能，也有調試功能，簡單來講，就是集合了sublime這種富文本編輯器 + 自帶調試功能和運行環境的類chrome。編輯功能經過有代碼自動提示和一些簡單的快捷鍵，調試功能有界面的展現，UI調試以及邏輯代碼的端點調試，只要熟悉web調試功能的開發者，能夠作到立刻上手，無縫對接。git

二、一鍵式框架搭建github

經過添加項目操做，開發工具會自動化生成整個小程序的開發目錄結構，後續的開發只要按照對應的目錄結構擴展以及修改就OK了。用戶無需本身組織整個程序的目錄結構，多人協做也能夠按照這種約定俗成的目錄結構進行開發，規範了開發流程。web

| img --圖片文件chrome

| page -- 頁面文件json

| |index -- 單個頁面文件小程序

| | |index.js -- index頁面js微信小程序

| | |index.json -- index頁面配置

| | |index.wxml -- index頁面結構

| | |index.wxss -- index頁面樣式

|app.js --小程序入口

|app.json --小程序總體配置

|app.wxss --小程序總體樣式

這些都是小程序的基本文件，頁面會將頁面文件夾路徑做爲頁面標誌，程序或默認的讀取頁面路徑下的wxml文件做爲結構，解析wxss和js文件，以及讀取文件夾下面的json配置文件。一個基本的頁面都是要按照這些規則去添加的。

三、配置式的界面展現

小程序裏面每一部分都有一個json文件，這個json文件不是一個數據文件，而是一個配置文件。這個配置文件既能夠配置程序的展現，好比菜單欄，整個顏色佈局，頭部的bar等，也能夠配置窗口的狀態，好比是否容許下拉，還能夠配置一些網絡狀態，好比規定超時時間。

好比咱們簡單配置app.json的

"tabBar": {

    "selectedColor": "#ff0000",

    "list": [{

      "pagePath": "pages/recommend/recommend",

      "text": "讀創首創",

      "iconPath": "img/icon_tab_shouye_normal@3x.png",

      "selectedIconPath": "img/icon_tab_shouye_pressed@3x.png"

    },

    {

      "pagePath": "pages/video/video",

      "text": "原創視頻",

      "iconPath": "img/icon_tab_shipin_normal@3x.png",

      "selectedIconPath": "img/icon_tab_shipin_pressed@3x.png"

    }

    ]

  }