小程序最近太火，不過相比較剛發(fā)布時，已經(jīng)有點熱度散去的感覺，不過這不影響我們對小程序的熱情，開發(fā)之前建議通讀下官網(wǎng)文檔，附鏈接：
大家好，我是架構(gòu)君，一個會寫代碼吟詩的架構(gòu)師。今天說一說微信小程序初體驗[通俗易懂],希望能夠幫助大家進(jìn)步!!!
小程序最近太火，不過相比較剛發(fā)布時，已經(jīng)有點熱度散去的感覺，不過這不影響我們對小程序的熱情，開發(fā)之前建議通讀下官網(wǎng)文檔，附鏈接：
接下來，我們要實現(xiàn)的小程序效果如下，源碼地址：：
1、注冊
打開微信公眾平臺，單擊“小程序”，按步驟開始注冊即可，附地址：
這里要注意的就是，小程序目前個人開發(fā)者無法單獨注冊，需要進(jìn)行企業(yè)等資格認(rèn)證，不過認(rèn)證那里我們隨意填寫，認(rèn)證通不通過并不影響我們開發(fā)，只是不能正式發(fā)布而已。
2、初始化項目
注冊成功后，進(jìn)入后臺，有個appid、密鑰，這兩個添加到這里，最后點擊確定即可：
3、項目結(jié)構(gòu)
來看下wx自動生成的項目結(jié)構(gòu)：
其中，pages用來放小程序中的各個頁面，這些頁面必須在app.json文件的pages參數(shù)中進(jìn)行配置，是我們自定義的用來存放靜態(tài)文件的目錄，比如一些image、style等，utils是工具文件夾，放置一些公共類方法，比如請求封裝、時間處理等，下面來主要介紹一下幾個文件：
//app.js
const utils = require('./utils/util.js')
App({
onLaunch: function () {
},
getUserInfo(cb) {
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//調(diào)用登錄接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
getNewsInfo(typeId) {
var that = this;
return new utils.Promise((resolve, reject) => {
if (that.globalData.newsInfo && that.globalData.newsInfo["" + typeId]) {
resolve(that.globalData.newsInfo["" + typeId])
}
return utils.get({ "type": typeId }).then(res => {
if (!that.globalData.newsInfo) that.globalData.newsInfo = {};
that.globalData.newsInfo["" + typeId] = res.result.data;
resolve(res.result.data);
})
});
},
globalData: {
newsInfo: null,
userInfo: null
}
})
只聽到從架構(gòu)師辦公室傳來架構(gòu)君的聲音:
度金針、漫牽方寸。有誰來對上聯(lián)或下聯(lián)?
此代碼由Java架構(gòu)師必看網(wǎng)-架構(gòu)君整理
{ "pages": [ "pages/hot/index", "pages/my/index", "pages/my/feedback/index", "pages/my/information/index", "pages/dynamic/index", "pages/dynamic/detail" ], "window": { "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#4BC1D2", "navigationBarTitleText": "業(yè)務(wù)GO", "navigationBarTextStyle": "white"}, "tabBar": { "color": "#353535", "selectedColor": "#4BC1D2", "borderStyle": "black", "backgroundColor": "#FFF", "list": [ { "pagePath": "pages/hot/index", "text": "熱點", "iconPath": "static/images/icon@hot.png", "selectedIconPath": "static/images/icon@hot-hover.png" }, { "pagePath": "pages/circle/index", "text": "圈子", "iconPath": "static/images/icon@coterie.png", "selectedIconPath": "static/images/icon@coterie-hover.png" }, { "pagePath": "pages/tool/index", "text": "工具", "iconPath": "static/images/icon@tool.png", "selectedIconPath": "static/images/icon@tool-hover.png" }, { "pagePath": "pages/my/index", "text": "我的", "iconPath": "static/images/icon@my.png", "selectedIconPath": "static/images/icon@my-hover.png" } ] }, "networkTimeout": { "request": 60000, "downloadFile": 60000 } }
4、關(guān)于wx.請求
小程序下面暫不支持es6語法，但是我們可以使用一些工具函數(shù)實現(xiàn)調(diào)用，比如可以自己封裝版本的請求如下：
const DOMAIN = 'https://v.juhe.cn/toutiao/index';
const KEY = 'c419699e576519892ebf87bbd3c8158c';
// 小程序上線需要https
function request(method, data = {}) {
data.key = KEY;
// wx.showNavigationBarLoading()
wx.showToast({
title: '加載中',
icon: 'loading',
duration: 10000
})
return new Promise((resolve, reject) => {
wx.request({
url: DOMAIN,
method: method,
data: data,
header: { 'content-type': 'application/json' },
method: method.toUpperCase(), // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
success: function (res) {
// wx.hideNavigationBarLoading()
wx.hideToast();
resolve(res.data)
},
fail: function (msg) {
console.log('reqest error', msg)
// wx.hideNavigationBarLoading()
wx.hideToast();
reject('fail')
}
})
})
}
然后導(dǎo)出即可外部使用：
此代碼由Java架構(gòu)師必看網(wǎng)-架構(gòu)君整理
module.exports = { categories, Promise, get: requestGet, post: requestPost, request,showLoading,requestDynamic }
這里我們可以為每次請求添加“加載中”效果，很簡單在每次請求前面添加如下代碼：
wx.showToast({
title: '加載中',
icon: 'loading',
duration: 10000
})
請求結(jié)束后再次隱藏toast即可：
wx.hideToast();
5、關(guān)于免費api調(diào)用
小程序開發(fā)時我們難免會進(jìn)行服務(wù)調(diào)用，首先必須在這里設(shè)置請求的域名地址（wx規(guī)定域名必須是https的才行）：
當(dāng)然，免費的api還是有很多，不過大多數(shù)都是要進(jìn)行認(rèn)證的，不認(rèn)證的話使用會有部分限制，不過短期不影響。
6、關(guān)于項目上傳、審核
項目上傳需要使用wx的開發(fā)工具：
掃碼上傳之后在這里我們就能看到上傳的版本信息：
當(dāng)然微信小程序顯示外鏈，上傳之后是“開發(fā)版”，可以直接在此基礎(chǔ)上進(jìn)行提交審核或者選為體驗版，體驗版的話管理員賬戶可以自行指定體驗者的微信賬號，這樣的話，即使小程序不發(fā)布，體驗者也可以和開發(fā)者一樣掃碼預(yù)覽項目效果，體驗者的設(shè)置在這里進(jìn)行：
7、關(guān)于數(shù)據(jù)渲染及頁面?zhèn)鲄?/p>
首先是數(shù)據(jù)渲染，每個頁面的數(shù)據(jù)來源是page對象下的data屬性，然后在頁面里通過雙大括號的方式進(jìn)行數(shù)據(jù)渲染，了解模板引擎的一看就知道了，覺得小程序這種做法類似于一些mvvm框架，數(shù)據(jù)層修改數(shù)據(jù)會直接同步到視圖層。當(dāng)然渲染時支持條件判斷、循環(huán)處理等，這些基本的功能沒有少。
其次是頁面跳轉(zhuǎn)及傳參，這里主要有2種方式，分別介紹如下：
一是使用組件，該組件里面可包含一系列的view組件，組件必須指定url屬性，代表單擊跳轉(zhuǎn)地址（微信小程序不支持外鏈跳轉(zhuǎn)，有點失望），使用如下：
這里即為某頁面名稱，參數(shù)傳遞類似get請求時參數(shù)拼接傳遞的方式，當(dāng)然在js中進(jìn)行數(shù)據(jù)獲取也比較簡單：
onLoad:function(options){
data_id = options.id;
//頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
this.refreshNewData();
}
事件默認(rèn)有個參數(shù)，該參數(shù)組件傳過來的參數(shù)，然后進(jìn)行處理即可。
二是頁面跳轉(zhuǎn)，小程序支持如下4種導(dǎo)航跳轉(zhuǎn)：
參數(shù)傳遞的話直接寫在其url屬性上，類似如下：
wx.navigateTo({
url: 'test?id=1'
})
8、關(guān)于事件處理及分類
小程序中的事件總得分為2種，一種是冒泡、一種是非冒泡事件，使用bind開頭綁定的事件為冒泡事件，意思是說如果同一個事件名稱，上下兩個頁面層組件均綁定了該事件的話，那么底下組件的事件處理會先執(zhí)行，然后再繼續(xù)執(zhí)行上層組件的相應(yīng)代碼；使用catch開頭綁定的事件不冒泡，事件只會被處理一次。然后是事件對象，事件處理到達(dá)page下的js后，會默認(rèn)傳一個event對象，該對象類似如下：
比如如下代碼：
{{ item.name }}
?
我們使用了事件處理view單擊，參數(shù)傳遞使用data-xxx='yyyy'的形式，其中xxx為key，相應(yīng)的yyyy為傳入的參數(shù)值，在事件處理中我們可以這樣獲取參數(shù)：
changeCategory: function (ev) {
var that = this;
var id = ev.currentTarget.dataset.id;
this.setData({
currentTopItem: ev.currentTarget.dataset.index
});
}
通過ev事件對象的..xxx的形式獲取xxx參數(shù)值即可微信小程序顯示外鏈，順便說下，頁面的參數(shù)設(shè)置一般使用方法進(jìn)行，而的設(shè)置可以直接通過().=xxx的形式即可。
9、關(guān)于模板使用
小程序提供模板功能，個人感覺類似于vue中的組件概念，模板可以被各個需要的頁面進(jìn)行引入調(diào)用，模板的定義使用如下方式：
{{index}}: {{msg}} Time: {{time}}
在需要調(diào)用模板的頁面通過以下代碼片段使用：
其中為模板定義時指定的name，item為傳入的參數(shù)對象，該對象下有idnex、msg、time三個鍵值對。注意如果模板文件與調(diào)用不在同一個文件的話必須先進(jìn)行模板文件的導(dǎo)入，直接在頁面中使用導(dǎo)入模板頁面即可。
10、關(guān)于小程序調(diào)試
wx開發(fā)者工具自帶調(diào)試功能，可直接對代碼、樣式文件、緩存等進(jìn)行編輯查看，還支持控制臺打印：
總結(jié)：
1、流暢性：比H5的應(yīng)用流暢性好，個人覺得相比原生還差一點，介乎兩者之間
2、開發(fā)者工具：自動提示功能有限，大部分情況下要開發(fā)者自己手碼
3、開發(fā)者工具里面看到的效果偶爾和微信里面看到的不同：比如圖片預(yù)覽、-image圖片顯示等
4、登錄方式各異：很多小程序都直接使用微信登錄，也有自己做登錄的，不是很統(tǒng)一
5、布局：小程序使用css3的flex布局，靈活性較高
6、巧用工具：小程序開發(fā)有些工具可以方便實用，比如wept，可以支持在瀏覽器中實時預(yù)覽小程序頁面布局效果，這樣開發(fā)和設(shè)計可以分工開來了；又如，這個覺得比較強大，可以用來處理一些復(fù)雜詳情頁的數(shù)據(jù)顯示等。