澳门永利皇宫官网|首页

新聞§資訊NEWS

2016新鮮出爐微信小程式開發入門,有哪些學習資料?

作者:永利网上游戏 來源:澳门永利皇宫官网 瀏覽數:4518 釋出時間:2016-11-5 23:48:21

微信小程式開發前準備:

註冊小程式帳號 繫結開發者

登入微信公眾平臺小程式,進入使用者身份- 開發者,新增繫結開發者。

已認證的小程式可以繫結不多於20個開發者。未認證的小程式可以繫結不多於10個開發者。

獲取AppID下載並安裝開發者工具

下載完成後,使用管理員或者繫結的開發者微訊號掃碼登入。

一個微信小程式

建立專案

我們需要通過開發者工具,來完成小程式建立和程式碼編輯。

開發者工具安裝完成後,開啟並使用微信掃碼登入。選擇建立“專案”,填入上文獲取到的 AppID ,設定一個本地專案的名稱(非小程式名稱),比如“我的第一個專案”,並選擇一個本地的資料夾作為程式碼儲存的目錄,點選“新建專案”就可以了。

為方便初學者瞭解微信小程式的基本程式碼結構,在建立過程中,如果選擇的本地資料夾是個空資料夾,開發者工具會提示,是否需要建立一個 quick start 專案。選擇“是”,開發者工具會幫助我們在開發目錄裡生成一個簡單的 demo。

專案建立成功後,我們就可以點選該專案,進入並看到完整的開發者工具介面,點選左側導航,在“編輯”裡可以檢視和編輯我們的程式碼,在“除錯”裡可以測試程式碼並模擬小程式在微信客戶端效果,在“專案”裡可以傳送到手機裡預覽實際效果。

編寫程式碼建立小程式例項

點選開發者工具左側導航的“編輯”,我們可以看到這個專案,已經初始化幷包含了一些簡單的程式碼檔案。最關鍵也是必不可少的,是 app.js、app.json、app.wxss 這三個。其中,.js字尾的是指令碼檔案,.json字尾的檔案是配置檔案,.wxss字尾的是樣式表文件。微信小程式會讀取這些檔案,並生成小程式例項。

//App() 函式用來註冊一個小程式。接受一個 object 引數,其指定小程式的生命週期函式等。

App({

onLaunch: function() {

// Do something initial when launch.

},

onShow: function() {

// Do something when show.

},

onHide: function() {

// Do something when hide.

},

globalData: 'I am global data'

})

app.js是小程式的指令碼程式碼。我們可以在這個檔案中監聽並處理小程式的生命週期函式、宣告全域性變數。呼叫框架提供的豐富的 API。

//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.json 是對整個小程式的全域性配置。我們可以在這個檔案中配置小程式是由哪些頁面組成,配置小程式的視窗背景色,配置導航條樣式,配置預設標題。注意該檔案不可新增任何註釋。

{

"pages": [

"pages/index/index",

"pages/logs/logs"

],

"window": {

"backgroundTextStyle": "light",

"navigationBarBackgroundColor": "#fff",

"navigationBarTitleText": "WeChat",

"navigationBarTextStyle": "black"

}

}

app.wxss 是整個小程式的公共樣式表。我們可以在頁面元件的 class 屬性上直接使用 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;

}

建立一個人品計算器小頁面

在這個教程裡,我們有1個頁面,即歡迎頁,他們都在 pages 目錄下。微信小程式中的每一個頁面的【路徑+頁面名】都需要寫在 app.json 的 pages 中,且 pages 中的第一個頁面是小程式的首頁。

每一個小程式頁面是由同路徑下同名的四個不同字尾檔案的組成,如:index.js、index.wxml、index.wxss、index.json。.js字尾的檔案是指令碼檔案,.json字尾的檔案是配置檔案,.wxss字尾的是樣式表文件,.wxml字尾的檔案是頁面結構檔案。

index.wxml 是頁面的結構檔案:

人品檢視器

為您計算當下人品

{{userInfo.nickName}}

{{score}}

{{info}}

本例中使用了來搭建頁面結構,繫結資料和互動處理函式。

index.js 是頁面的指令碼檔案,在這個檔案中我們可以監聽並處理頁面的生命週期函式、獲取小程式例項,宣告並處理資料,響應頁面互動事件等。

//index.js

//獲取應用例項

var app = getApp()

Page({

data: {

score: 0,

userInfo: {}

},

//事件處理函式

setScore: function() {

var score = 60+parseInt(Math.random()*40);

var infos = [

'哇,你當下神仙附體,快去勾搭妹子',

'太陽天空照,花兒對我笑',

'喂,你是豬嗎?離我遠點'

];

var info;

if(score>90){

info=infos[0];

}else if(score>75){

info=infos[1];

}else{

info=infos[2];

}

this.setData({

score:score,

info:info

})

},

onLoad: function () {

console.log('onLoad')

var that = this

//呼叫應用例項的方法獲取全域性資料

app.getUserInfo(function(userInfo){

//更新資料

that.setData({

userInfo:userInfo

})

})

}

})

index.wxss 是頁面的樣式表:

/**index.wxss**/

.title{

font-size: 30px;

display: block;

padding: 10px;

font-weight: bold;

text-align: center;

}

.hint{

display: block;

padding: 10px 20px;

color:#999;

text-align: center;

}

.check{

width: 100px;

}

.userinfo {

display: flex;

flex-direction: column;

align-items: center;

}

.userinfo-avatar {

width: 128rpx;

height: 128rpx;

margin: 20rpx;

border-radius: 50%;

}

.userinfo-nickname {

color: #aaa;

text-align: center;

display: block

}

頁面的樣式表是非必要的。當有頁面樣式表時,頁面的樣式表中的樣式規則會層疊覆蓋 app.wxss 中的樣式規則。如果不指定頁面的樣式表,也可以在頁面的結構檔案中直接使用 app.wxss 中指定的樣式規則。

index.json 是頁面的配置檔案:

頁面的配置檔案是非必要的。當有頁面的配置檔案時,配置項在該頁面會覆蓋 app.json 的 window 中相同的配置項。如果沒有指定的頁面配置檔案,則在該頁面直接使用 app.json 中的預設配置。

執行結果如下:

手機預覽

開發者工具左側選單欄選擇"專案",點選"預覽",掃碼後即可在微信客戶端中體驗。

手機端效果

本文作者:澳门永利皇宫官网

本文地址:/news/819.html

版權所有 轉載時必須以連線形式註明作者和原始出處

已有0條評論,點擊發表評論最新評論

發表評論

驗證碼: 點選切換驗證碼 看不清楚?

我們為您提供

高品質網站建設

服務包含營銷推廣、網站建設、企業郵箱、域名空間、CRM系統開發

現在諮詢 0755-23000632