微信小程序開發初探
一、關於微信小程序
1.1 小程序誕生的背景
張小龍說道:
(1)一切以用戶價值為依歸→用戶是微信的核心,所以微信中沒有很多與客戶無關的功能,比如QQ中的亂七八糟一系列東西。
(2)讓創造發揮價值→所有圍繞微信的創造比如公眾號都應該發揮其應有的價值。
(3)用完即走的高效服務→這一點就厲害了word天,微信要打造一個以微信為中心的生態鏈,不以綁定用戶為目標。比如生活中有一些不太常用的app,我們可能一年也使用不了幾次,但是有時候就需要用到,微信就想要提供這樣一個平臺,讓你可以在微信中使用這中所謂的app的功能。或者說可以這樣理解,讓微信成為一個類似於Windows的操作系統,各種小程序就是操作系統上的應用軟件。
(4)無形存在的商業化→微信使得人與人之間的聯系變成了無形的商業化網,這個網可以創造很多無形的商業價值。
1.2 小程序是個什麽鬼?
張小龍在朋友圈裏這樣解釋道:小程序是一種不需要下載安裝即可使用的應用,它實現了應用「觸手可及」的夢想,用戶掃一掃或搜一下即可打開應用。也體現了「用完即走」的理念,用戶不用關心是否安裝太多應用的問題。應用將無處不在,隨時可用,但又無需安裝卸載。
1.3 技術層面的小程序
微信小程序 = XML + CSS + JS 的移動應用程序
1.4 為什麽要開發微信小程序?
(1)更好的給用戶提供用完即走的服務
(2)給用戶提供更好的使用體驗
(3)功能更加深入:https://mp.weixin.qq.com/debug/wxadoc/dev/
(4)設計更加統一:https://mp.weixin.qq.com/debug/wxadoc/design/index.html?t=20161109
(5)類似於微信錢包中的第三方服務
二、開發工具的安裝
2.1 下載微信開發者工具
Windows 64位:點我下載
Windows 32位:點我下載
Mac 版 :點我下載
2.2 安裝微信開發者工具
這裏我使用的是wechat_web_devtools_0.10.102800_x64版:
安裝完成後,第一次啟動時會出現一個二維碼,需要使用微信掃描該二維碼才可登錄開發者工具:
三、第一個微信小程序
3.1 添加微信小程序項目
Step1.選擇調試類型:本地小程序項目→添加項目
Step2.由於我們暫時沒有AppID,所以選擇無AppID(無AppID部分功能會受限)
Step3.進入開發者工具界面,默認是選中“調試”面板
可以看到,在調試面板中,左側是頁面效果預覽窗口,右側是類似於Chrome的開發者的工具。在預覽窗口可以選擇一些常見的手機型號和不同的分變率,大家可以看出這簡直就是Chrome開發者工具的翻版。
3.2 微信小程序結構一覽
新建了一個小程序之後,開發工具為我們默認生成了一些文件,下面我們來看看這些文件都是看些什麽用,以及程序結構又是什麽樣子的。
(1)項目結構
(2)應用程序級文件
① app.js
//app.js
App({
onLaunch: function () {
//調用API從本地緩存中獲取數據
var logs = wx.getStorageSync(‘logs‘) || []
logs.unshift(Date.now())
wx.setStorageSync(‘logs‘, logs)
},
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//調用登錄接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
globalData:{
userInfo:null
}
})
app.js定義了全局的一些重要事件,比如程序啟動時要做些什麽,如何獲取微信用戶信息等等。App函數是一個全局函數,它的作用就是用來創建一個應用程序實例,每個應用程序都會有它的生命周期,因此一些重要的生命周期事件都會在這裏定義。例如,onLaunch事件就是程序在啟動時需要幹什麽。
② app.json
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "Manulife WeChat Demo",
"navigationBarTextStyle":"black"
}
}
app.json 則定義了程序有哪些頁面,以及窗口標題及相關樣式等。例如,我們再這裏將navigationBarTitleText屬性值改為了Manulife WeChat Demo,來看看調試窗口會顯示什麽?
③ app.wxss
/**app.wxss**/
.container {
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
padding: 200rpx 0;
box-sizing: border-box;
}
app.wxss 則定義了全局樣式,你可以把它理解為一些所有頁面公用的css樣式。其實,它也就是一個披著wxss後綴名的css3樣式表而已。
(3)具體頁面級文件
① index.js
//index.js
//獲取應用實例
var app = getApp()
Page({
data: {
motto: ‘Hello World‘,
userInfo: {}
},
//事件處理函數
bindViewTap: function() {
wx.navigateTo({
url: ‘../logs/logs‘
})
},
onLoad: function () {
console.log(‘onLoad‘)
var that = this
//調用應用實例的方法獲取全局數據
app.getUserInfo(function(userInfo){
//更新數據
that.setData({
userInfo:userInfo
})
})
}
})
每個頁面的業務邏輯都會寫在各自的js文件中,可以看到index.js中所有的業務邏輯都會寫到Page中,而app.js中所有邏輯都寫在App中。
② index.wxml
<!--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="usermotto">
<text class="user-motto">{{motto}}</text>
</view>
</view>
index.wxml則類似於html為頁面定了一個具體的div區域,通過類似於AngularJS的模型綁定將具體的數據綁定到具體的位置。這裏再回到index.js中就可以看到原來在index.js中就是為了給這些模型賦值。另外,wxml=>weixin markup language.
wxml語法遵循XML語法,註意是XML語法,不是HTML語法,不是HTML語法,不是HTML語法
③ index.wxss
/**index.wxss**/
.userinfo {
display: flex;
flex-direction: column;
align-items: center;
}
.userinfo-avatar {
width: 128rpx;
height: 128rpx;
margin: 20rpx;
border-radius: 50%;
}
.userinfo-nickname {
color: #aaa;
}
.usermotto {
margin-top: 200px;
}
index.wxss則和app.wxss一樣,都是css樣式表,只是index.wxss主要針對於index.wxml這個頁面,它有明確的作用域。另外,wxss=>weixin style sheet.
(3)微信小程序總體結構
我們的微信小程序會啟動時會生成一個app應用實例,這個app實例會運行多個page,每個page之間又會有一些關聯。多個page都需要用到的一些功能則封裝到公共方法中,例如util.js,calc.js等等。
3.3 最小化編程體驗
(1)添加一個文件夾test,新建三個頁面級文件。
不要問我為什麽要這樣子命名,就像我們在ASP.NET MVC中Action與View的名字要保持一致一樣,這是一個約定俗稱的事兒。當然,你也可以新建一個文件夾,不叫pages,然後在那個文件夾裏邊定義這些頁面。只需要在app.json中配置成另外的文件夾即可。
(2)修改app.json,添加頁面設置
app.json中定義了一個pages數組,每一項代表對應頁面的【路徑+文件名】信息,數組的第一項代表小程序的初始頁面。小程序中新增/減少頁面,都需要對pages數組進行修改。因此,這裏我們將剛剛的test頁面假如pages數組,並放到首位。
"pages":[
"pages/test/test",
"pages/index/index",
"pages/logs/logs"
]
(3)編輯test.wxml,添加一句hello world!
按照國際慣例,每次學習一個新的語言我們都會輸出一句hello world!來代表我們的第一個程序,因此這裏也不能免俗。
<text>Hello WeChat Little App!</text>
(4)編輯test.wxss,添加一個樣式,為剛剛的hello world文本設置為紅色字體
.hello
{
font-size: 14pt;
color:red;
}
<text class="hello">Hello WeChat Little App!</text>
(5)編輯app.js,定義一個全局使用的函數getMessage,方法很簡單,就不再多說
App({
// 一些自定義的額外方法
getMessage(para){
var result = "Your name is " + para;
return result;
},
...
...
}
(6)編輯test.js,調用全局函數,輸出控制臺
//通過getApp方法獲取應用實例
const app = getApp()
Page({
onLoad(){
// 在test頁面加載時調用全局方法getMessage
const msg = app.getMessage("Edison");
// 在控制臺輸出msg結果
console.log(msg);
}
})
(7)編輯test.js,為頁面添加一個數據供頁面綁定
Page({
data:{
errorMessage: "User name can not be null!"
},
onLoad(){
...
...
}
})
<text>Hello WeChat Little App!</text>
<text class="hello">{{errorMessage}}</text>
四、調用服務加載數據
4.1 關於REST服務接口
這裏就可以把我們的REST服務弄出來調用啦,不過這裏我們采用已有的公開的API接口來調用,比如豆瓣的各種電影、讀書等就提供了一些API可以供調用。
這裏我們選擇豆瓣電影提供的一些API,對於下面的這個list頁面,使用的是“即將上映的電影”的接口:
4.2 添加必要文件
添加新文件夾:list,並添加三大頁面級文件
4.3 調用API發起小請求
首先我們可以通過查看微信小程序官方開發文檔,看到發起請求的示例代碼如下:
wx.request({
url: ‘test.php‘,
data: {
x: ‘‘ ,
y: ‘‘
},
header:{
"Content-Type":"application/json"
},
success: function(res) {
var data = res.data;
}
});
因此我們依樣畫葫蘆:
//通過getApp方法獲取應用實例
const app = getApp()
Page({
data:{
message:"Hello Edison",
list:[]
},
onLoad(){
const currentPage = this
// 在list頁面加載時調用api獲取數據
wx.request({
url : "https://api.douban.com/v2/movie/in_theaters",
data: {},
header:{
"Content-Type":"application/json"
},
success: function(res) {
var data = res.data;
currentPage.setData({
list : data.subjects
})
}
})
}
})
編輯list.wxml,添加一個列表:
<text>{{message}}</text>
<view>
<view class="item" wx:for="{{list}}">
<text>{{item.title}}</text>
</view>
</view>
再來給每個item項設置一下樣式:
.item
{
border: 1px solid #000;
font-size:12pt;
}
這時可以來看看效果,電影列表被加載了出來:
我們發現這個api還返回了電影的海報,因此我們還可以改造一下程序,在列表裏邊將海報也顯示出來:
<text>{{message}}</text>
<view>
<view class="item" wx:for="{{list}}">
<image src="{{item.images.large}}"></image>
<text>{{item.title}}</text>
</view>
</view>
這裏我們加了一個image標簽,註意不是html的img標簽。這時,再來看看界面效果:
4.4 預覽你的小程序
如果你有AppID,那麽你就可以開始預覽你的小程序了:
開發者工具左側菜單欄選擇”項目”,點擊”預覽”,掃碼後即可在微信客戶端中體驗。這裏我們是無AppID的體驗模式,因此沒法預覽,更沒法上傳。
五、豆瓣電影示例項目
5.1 項目地址
這個項目是我看的一個公開課的講師汪磊寫的一個demo,功能雖小但五臟俱全,是一個拿來學習練手的小項目。
GitHub倉庫地址:https://github.com/zce/weapp-demo
5.2 項目功能
前方流量預警,gif動圖,你懂得:
5.4 學習計劃
汪磊專門為這個demo設置了一些分支,每個分支循序漸進,實現了不同的功能。我們可以跟著這個計劃,一步一步得去完成這個demo。
六、小結
本篇了解微信小程序是個什麽鬼,最基本的小程序結構是什麽樣子的,還按照國際慣例做了一個hello world,並調用了一次api。雖然過程很簡單很low,但前端程序包括app不就是做的這些事兒嗎?後續我會跟著汪磊的demo一步一步得把那個豆瓣項目寫出來,或許會分享一篇新的文章跟各位見面。好了,很久沒有熬過夜了,今天就到此結束啦。
微信小程序開發初探