小程序其實就是一個工具,爲人提供便捷服務的;隨時可用,用完即走,減小桌面上面的app數量;html
B2C(人與商品) 淘寶 JD
P2P(人與人)微信 QQ
C2P(人與服務)微信小程序 支付寶小程序
對於一些性能要求不高,使用頻度不高,業務邏輯簡單的應用適合作成一個小程序的應用;好比購票,繳費,手機充值等json
一個小程序首先有四個應用入口文件:小程序
app.js
:設置一些項目的全局變量app.json
:每個新頁面都必須在這個地方註冊,項目的導航欄和窗口界面設置有關的app.wxss
:項目全局樣式project.config.json
:項目配置文件一個頁面主要是包含如下四個文件,這四個文件的名字應該都是同樣的,最好以頁面所在的文件夾名字爲標準:微信小程序
xxx.wxml
:頁面的結構xxx.wxss
:頁面的樣式xxx.json
:頁面的配置文件xxx.js
:頁面的腳本文件頁面能夠嵌套頁面,可是建議不要超過5個層級。api
小程序推薦使用
rpx
爲單位,這樣就能夠在任意屏幕下面實現自適應
小程序是移動端的開發,因此要注意像素的使用。
數組
pt
:視覺單位(長度單位),與設備的屏幕物理尺寸有關係,也叫作邏輯分辨率(邏輯單位),與移動端的柵格渲染有關px
:一般說的像素點,物理分辨率,隨着屏幕的變化不會變化;通常設計師給的設計稿是以物理分辨率爲單位的,也就是說,iPhone6下的分辨率是375,可是設計圖倒是750;由於rpx
:px
== 2:1,小程序的設計稿就要以iPhone6爲參照。pt
與px
之間的關係:1個pt
下面包含多個px
;也就是說一個邏輯分辨率包含多個物理像素點。ppI(DPI)
:計算的是屏幕顯示1個邏輯分辨率包含多個物理像素點,值越大,顯示的圖像越細膩,清晰。計算的方法是:320*320+480*480的和開根號再處於屏幕尺寸最後乘以reader值
。reader值
:視網膜屏,表示一個邏輯像素點包含多個(reader值)物理像素點,通常reader值爲2就達到了眼睛的所能觀察到細膩的極限,再大幾乎不怎麼起做用,對於眼睛感受到的色彩來講。服務器
也就是說,當須要的元素大小適應屏幕尺寸,就選擇rpx
做爲單位,否者使用px
做爲單位。微信
AppID
,保存
咱們能夠直接在項目的app.json
中的pages
屬性下面按照此方式建立頁面,保存,就能夠在左邊看到一個以welcom
名字的文件夾,包含了頁面所須要的四種文件,省略手動在app.js
裏面註冊,而且裏面都已經自動配置好了一些設置,防止出現下面的錯誤:
app
解決辦法就是在相對應的頁面js
空文件中調用一下page({...})方法
,至關於註冊一下,註冊的時候只須要寫頁面的名字,不須要區別是那種頁面類型。全部該頁面的方法都在page({...})
方法裏面執行xss
在app.json
中pages
這個屬性裏面的數組元素,誰出如今第一個位置,就是小程序的啓動頁面。json
類型的文件裏面不能寫註釋,否者會報文件解析錯誤。
小程序裏面使用view標籤
做爲容器,分割文檔的做用,相似於在html
中使用的div
。
text標籤
是一個文本標籤,只有當文字被這個標籤包裹起來的時候,才能在手機上面長按選中,這個標籤支持轉義字符的解析。
編寫wxml
代碼
<view class='container'> <image class='user-avatar' src='/images/1.png'></image> <text class='user-name'>icessun</text> <view class='moto-container' bindtap='tapName'> <text class='moto'>開啓小程序大門</text> </view> </view>
其實在wxml
中編寫頁面骨架的時候,注意小程序默認在咱們編寫的骨架外面包裹了一個page標籤
,能夠經過這個標籤來設置整屏的顏色。
在小程序裏面呢,通常都使用flex
佈局,彈性盒子模型
display: flex; flex-direction: column; align-items: center;
這樣第一個小程序頁面咱們就編寫好了,保存運行一下,就能夠看到效果,前提是把這個頁面設置爲啓動頁,由於咱們尚未寫頁面跳轉。
在上面新建頁面的時候,咱們發如今js
文件裏面會自動在page()
方法中生成一些方法,以下:
通常頁面啓動,會首先調用這三個函數:onLoad(頁面加載,一個頁面只會調用一次)----->onShow(頁面顯示,頁面每次打開都會調用)----->onReady(頁面完成初次渲染)
page()
函數中的data:{ }
屬性,一般是保存頁面須要綁定的數據,通常在裏面設置一個變量,用來接收從服務器加載來的JSON
數據,而後在經過數據綁定的方式綁定到頁面上面。
app.js
的生命週期app.js
是關於整個小程序項目的方法和屬性,相似頁面Page({...})
函數,也須要一個外層函數包裹App({ ...})
App({ //當小程序初始化完成時,會觸發 onLaunch(全局只觸發一次) onLaunch: function () { }, // 當小程序啓動,或從後臺進入前臺顯示,會觸發 onShow onShow: function (options) { }, //當小程序從前臺進入後臺,會觸發 onHide onHide: function () { }, // 當小程序發生腳本錯誤,或者 api 調用失敗時,會觸發 onError 並帶上錯誤信息 onError: function (msg) { } }) // 應用程序的全局變量 globalData: { g_isPlaying: false, // 記錄當前頁面是否播放 g_currentMusicPost: null, // 電影api地址 doubanBase: 'https://api.douban.com' }
固然也能夠在裏面設置一些全局的變量,而後在其餘頁面對應的js
文件中經過下面的方式來獲取到裏面定義的全局變量。
var app = getApp(); var globalData = app.globalData