年前的時候,由於公司開發小程序的人員不夠,臨時參與了一個項目中幾個小模塊的開發,這裏作個簡單的小記錄,眼過千篇不若手過一遍,但願未來若是要用到時不至於大腦空白!html
開發工具:wechat_devtoolsgit
1.申請帳號。json
2.安裝開發工具。小程序
1.json配置:app.json 是對當前小程序的全局配置,包括了小程序的全部頁面路徑、界面表現、網絡超時時間、底部 tab 等。這裏說pages,window,tabBar三個項目中使用到的主要配置項,其他配置可參考小程序配置app.json微信小程序
先貼一個配置代碼:api
{ "pages": [ "pages/index/index", "pages/info/info", "pages/detail/detail", "pages/unpay/unpay", "pages/history/history", "pages/mall/mall", "pages/discover/discover" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "紫微斗數", "navigationBarTextStyle": "black" }, "tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "測算", "iconPath": "images/index_icon1.png", "selectedIconPath": "images/index_icon2.png" }, { "pagePath": "pages/history/history", "text": "個人", "iconPath": "images/history_icon1.png", "selectedIconPath": "images/history_icon2.png" }, { "pagePath": "pages/discover/discover", "text": "發現", "iconPath": "images/discover_icon1.png", "selectedIconPath": "images/discover_icon2.png" }, { "pagePath": "pages/mall/mall", "text": "商城", "iconPath": "images/mall_icon1.png", "selectedIconPath": "images/mall_icon2.png" } ], "color": "#7C7C7C", "selectedColor": "#BA3E3E", "borderStyle": "white", "backgroundColor": "#fff", "position": "bottom" } }
接受一個數組,每一項都是字符串,來指定小程序由哪些頁面組成。每一項表明對應頁面的【路徑+文件名】信息,數組的第一項表明小程序的初始頁面。小程序中新增/減小頁面,都須要對 pages 數組進行修改。數組
文件名不須要寫文件後綴,由於框架會自動去尋找路徑下 .json
, .js
, .wxml
, .wxss
四個文件進行整合。微信
例如:「pages/detail/detail」。將對應detail文件夾中的js,json,wxml,wxss四個文件。網絡
"window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "紫微斗數", "navigationBarTextStyle": "black" },
若是小程序是一個多 tab 應用(客戶端窗口的底部或頂部有 tab 欄能夠切換頁面),能夠經過 tabBar 配置項指定 tab 欄的表現,以及 tab 切換時顯示的對應頁面。app
Tip:
"tabBar": { "list": [ { "pagePath": "pages/index/index", "text": "測算", "iconPath": "images/index_icon1.png", "selectedIconPath": "images/index_icon2.png" }, { "pagePath": "pages/history/history", "text": "個人", "iconPath": "images/history_icon1.png", "selectedIconPath": "images/history_icon2.png" }, { "pagePath": "pages/discover/discover", "text": "發現", "iconPath": "images/discover_icon1.png", "selectedIconPath": "images/discover_icon2.png" }, { "pagePath": "pages/mall/mall", "text": "商城", "iconPath": "images/mall_icon1.png", "selectedIconPath": "images/mall_icon2.png" } ], "color": "#7C7C7C", "selectedColor": "#BA3E3E", "borderStyle": "white", "backgroundColor": "#fff", "position": "bottom" }
2.WXML 模板:這就相似於咱們的html標記語言,不過規則略微不一樣,詳情可參考官方文檔 小程序WXML。
<!--pages/detail/detail.wxml--> <view class="body" style="width:{{width}}px;height:{{height}}px;"> <scroll-view class="main" scroll-y style="width:{{width}}px;height:{{height}}px;"> <view class="bg-box"> <image src="../../images/banner.jpg" mode="widthFix"></image> <view class="user-message clear"> <view class="box"> <image src="{{userInfo.avatarUrl}}" mode="widthFix" style="border-radius:50%;"></image> <view class="name">姓名:{{orderList.name}}</view> <view class="p-box">陽曆 :{{orderList.year}}年{{orderList.month}}月{{orderList.day}}日 {{hours[orderList.hour]}}時</view> </view> </view> <view class="info-box"> <view style="margin-bottom:1rem;color:#7F453A;font-size:0.875rem;font-weight:bold;">您已解鎖下列測算內容,點擊可查看詳情。</view> <view class="m-body"> <view class="ul"> <block wx:for="{{list}}"> <view class="li ispay" catchtap='changePage' data-index="{{index+1}}"> <view class="tit-box"> <view class="tit_s">{{item.title}}</view> <view class="sanjiao">></view> </view> </view> </block> <view style="width:100%;height:20px;"></view> </view> </view> </view> </view> <view style="height:2.4rem;"></view> </scroll-view> </view>
3.WXSS :WXSS 具備 CSS 大部分的特性,小程序在 WXSS 也作了一些擴充和修改。
更詳細的文檔能夠參考 WXSS 。
app.wxss中能夠設置全部頁面的樣式,每一個具體樣式文件中,只能設置它對應的文件的樣式。
4.JS交互:微信小程序中,咱們不能直接操做dom,只能在wxml對應的js文件中定義好函數,而後使用某種綁定方式(好比bindtap)綁定到dom元素上,來觸發。
<view>{{ msg }}</view> <button bindtap="clickMe">點擊我</button>
點擊 button 按鈕的時候,咱們但願把界面上 msg 顯示成 "Hello World",因而咱們在 button 上聲明一個屬性: bindtap ,在 JS 文件裏邊聲明瞭 clickMe 方法來響應此次點擊操做:
Page({ clickMe: function() { this.setData({ msg: "Hello World" }) } })
1.小程序啓動:
微信客戶端在打開小程序以前,會把整個小程序的代碼包下載到本地。緊接着經過 app.json 的 pages 字段就能夠知道你當前小程序的全部頁面路徑,寫在 pages 字段的第一個頁面就是這個小程序的首頁(打開小程序看到的第一個頁面)。
因而微信客戶端就把首頁的代碼裝載進來,經過小程序底層的一些機制,就能夠渲染出這個首頁。
小程序啓動以後,在 app.js 定義的 App 實例的 onLaunch 回調會被執行:
App({ onLaunch: function () { // 小程序啓動以後 觸發 } })
整個小程序只有一個 App 實例,是所有頁面共享的,更多的事件回調參考文檔 註冊程序 App 。
2.小程序的頁面:
看看detail.js文件的內容
// pages/detail/detail.js var app = getApp(); Page({ /** * 頁面的初始數據 */ data: { data1: 0, }, onLoad: function (options) { }, getInfo:function(sn){ }, changePage: function (res) { var index = res.currentTarget.dataset.index; var sn = this.data.sn wx.navigateTo({ url: '../info/info?index=' + index + "&sn="+sn }) }, onShareAppMessage: function () { return { } } })
Page 是一個頁面構造器,這個構造器就生成了一個頁面。在生成頁面的時候,小程序框架會把 data 數據和 index.wxml 一塊兒渲染出最終的結構,因而就獲得了你看到的小程序的樣子。
在渲染完界面以後,頁面實例就會收到一個 onLoad 的回調,你能夠在這個回調處理你的邏輯。全部頁面中須要用到的函數等都要寫在page構造器的內部,而後在合適的時機被調用。
有關於 Page 構造器更多詳細的文檔參考 註冊頁面 Page 。
備註:在傳統的html開發的頁面中,若是沒有作特殊處理,只有當頁面中引用了對應的樣式文件和邏輯交互代碼文件,它們纔會起做用。前面提到過,微信小程序會自動匹配文件,全部只要你的文件名命名規範,全部頁面的樣式及交互文件會自動被引用。
3.組件:小程序提供了豐富的組件能夠供咱們使用,同時咱們也能夠本身自定義符合本身要求的組件。
組件的引用和html中的標籤相似,咱們還可也給組件傳值,例如咱們要顯示地圖,而且在用戶單擊地圖時作出響應代碼能夠以下來書寫:
<map bindmarkertap="markertap" longitude="廣州經度" latitude="廣州緯度"></map>
這個地圖組件的中心將是廣州的經緯度,同時單擊地圖時會觸發綁定的markertap事件。咱們也能夠經過class類名或者style來控制組件的樣式。
更多的組件能夠參考 小程序的組件 。
4.API:爲了讓開發者能夠很方便的調起微信提供的能力,例如獲取用戶信息、微信支付等等,小程序提供了不少 API 給開發者去使用。
須要注意的是:多數 API 的回調都是異步,須要處理好代碼邏輯的異步問題。
API 能力見 小程序的API 。
四五兩點須要有相應的身份纔可使用,這個具體須要用到時能夠去官網查閱。^_^