2007 年 1 月 9 日，喬布斯在舊金山莫斯科尼會展中心發布了首款 iPhone，而在十年后的 1 月 9 日，微信小程序正式上線。張小龍以這樣的形式，向喬布斯致敬。
小程序在哪里？
小程序功能模塊在“發現”頻道最下方的位置。
如果沒有，請先將微信升級到最新版本，然后在通訊錄搜索‘小程序示例’，點擊之后返回“發現頻道”即可。
Tip：小程序搜索目前不支持模糊查詢
小程序會帶來什么
無處不在，隨時訪問
移動互聯網的下一站是“唾手可得”
——張小龍
切入正題：怎么開發？
1. 獲取微信小程序的 AppID
登錄 https://mp.weixin.qq.com，就可以在網站的“設置”-“開發者設置”中，查看到微信小程序的 AppID 了，注意不可直接使用服務號或訂閱號的 AppID 。
2. 下載開發者工具
下載地址：https://mp.weixin.qq.com/debug/wxadoc/dev/devtools/download.html?t=201715
新建項目
只是嘗試一把，可以選擇游客模式，無需填寫AppId
小程序 IDE-編輯
小程序 IDE-調試
界面類似於chrome瀏覽器調試界面
項目結構
App.js 是全局腳本文件
App.json 是全局配置文件
App.wxss 是全局樣式
Pages 中為頁面
創建頁面
在小程序IDE中，配置文件保存的同時，pages中會自動創建頁面文件夾，文件夾中包含以下四種文件：
order.js order.json order.wxml order.wxss
邏輯層(App Service)
1.小程序開發框架的邏輯層是由JavaScript編寫。
2.邏輯層將數據進行處理后發送給視圖層，同時接受視圖層的事件反饋（數據單向綁定，vue是雙向綁定，小程序沒有vm層）。
每個頁面有獨立的作用域，並提供模塊化能力。
3.由於框架並非運行在瀏覽器中，所以 JavaScript 在 web 中一些能力都無法使用，如 document，window 等。
4.開發者寫的所有代碼最終將會打包成一份 JavaScript，並在小程序啟動的時候運行，直到小程序銷毀。類似 ServiceWorker，所以邏輯層也稱之為 App Service。
App( )
App( ) 函數接受的 object 參數
getApp( )
全局的getApp( )函數，可以獲取到小程序實例。
Page()
Page()函數用來注冊一個頁面。接受一個 object 參數，其指定頁面的初始數據、生命周期函數、事件處理函數等。
setData()
setData()函數用於將數據從邏輯層發送到視圖層，同時改變對應的this.data
坑：直接修改 this.data 無效，無法改變頁面的狀態，還會造成數據不一致
模塊化
|
1
2
3
4
5
|
var
common = require(
'common.js'
)
Page({
helloMINA:
function
() {
common.sayHello(
'MINA'
)
},})
|
WXSS（WeiXin Style Sheets）
就是微信小程序的css，新增了尺寸單位rpx：
rpx（responsive pixel）: 可以根據屏幕寬度進行自適應。規定屏幕寬為750rpx。如在 iPhone6 上，屏幕寬度為375px，共有750個物理像素，則750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素
組件
小程序中沒有a標簽，頁面跳轉需要用navigator組件
Navigator 頁面鏈接 <navigator url="url">跳轉</navigator>
其他組件
媒體組件，地圖，畫布，在此不一一贅述，請大家查看小程序API
https://mp.weixin.qq.com/debug/wxadoc/dev/api/?t=201715
最后附上快遞查詢功能代碼，調用快遞100物流查詢公共接口
index.wxml
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
<!--index.wxml-->
<view
class
=
"container"
>
<view bindtap=
"bindViewTap"
class
=
"userinfo"
>
<image
class
=
"userinfo-avatar"
src=
"{{userInfo.avatarUrl}}"
background-size=
"cover"
></image>
<text
class
=
"userinfo-nickname"
>歡迎您，{{userInfo.nickName}}</text>
</view>
<view
class
=
"section"
>
<input placeholder-style=
"color:white"
class
=
"order-input"
placeholder=
"請輸入訂單號"
bindchange=
"bindChange"
id=
"orderId"
/>
<input placeholder-style=
"color:white"
class
=
"order-input"
placeholder=
"請輸入快遞公司"
bindchange=
"bindChange"
id=
"company"
/>
</view>
<text>{{errTip}}</text>
<button
class
=
"query-btn"
type=
"default"
size=
"{{primarySize}}"
loading=
""
plain=
"true"
disabled=
"{{disabled}}"
bindtap=
"query"
> 查詢 </button>
</view>
|
index.js
小程序只支持https的請求
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
|
var
app = getApp()
// var inputCon = {}
Page({
data: {
motto:
'Hello World'
,
userInfo: {},
inputCon: {},
errTip:
''
},
//事件處理函數
bindViewTap:
function
() {
wx.navigateTo({
url:
'../logs/logs'
})
},
bindChange:
function
(e) {
var
id;
var
value;
id = e.target.id;
value = e.detail.value +
''
;
this
.data.inputCon[id] = value;
},
// query
query:
function
() {
// 測試用例
// 417941822755 zhongtong
// 884044987614211278 yuantong
var
that =
this
;
var
type = that.data.inputCon.company;
var
postid = that.data.inputCon.orderId;
var
data = {
'type'
:type,
'postid'
:postid
}
app.globalData.queryInfo.push(data);
console.log(app)
wx.request({
url:
'https://www.kuaidi100.com/query'
,
data: data,
header: {
'content-type'
:
'application/json'
},
success:
function
(res) {
var
errTip = res.data.message;
var
orderInfo = res.data.data;
if
(orderInfo.length == 0) {
console.log(errTip)
that.setData({
errTip:errTip
})
return
}
that.setData({
errTip:
''
})
app.globalData.orderInfo = orderInfo;
wx.navigateTo({
url:
'../order/order'
})
}
})
},
onLoad:
function
() {
console.log(
'onLoad'
)
var
that =
this
//調用應用實例的方法獲取全局數據
app.getUserInfo(
function
(userInfo) {
//更新數據
that.setData({
userInfo: userInfo
})
})
}
})
|
訂單物流頁面
order.wxml
|
1
2
3
4
5
6
7
|
<!--pages/order/order.wxml-->
<view
class
=
"order-list"
>
<block wx:
for
=
"{{orders}}"
>
<view
class
=
"order-time"
> {{item.ftime}}: </view>
<view
class
=
"order-txt"
> {{item.context}} </view>
</block>
</view>
|
order.js
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
// pages/order/order.js
var
app = getApp();
Page({
data:{
orders:[]
},
onLoad:
function
(options){
// 頁面初始化 options為頁面跳轉所帶來的參數
var
orderInfo = app.globalData.orderInfo;
this
.setData({
orders: orderInfo
})
},
onReady:
function
(){
// 頁面渲染完成
},
onShow:
function
(){
// 頁面顯示
},
onHide:
function
(){
// 頁面隱藏
},
onUnload:
function
(){
// 頁面關閉
}
})
|