1.下載微信小程序編輯器：下載微信小程序編輯器
2.創(chuàng)建小程序應(yīng)用：打開剛才下載的dmg芙沥，用微信掃面二維碼登陸薄嫡。點(diǎn)擊本地小程序項(xiàng)目失仁，就可以開始開發(fā)了胳泉。
3.先介紹下目錄結(jié)構(gòu)：
F6B51227-E9DB-433B-86E3-336916B6E88B.png
pages文件夾中放的都是頁面拐叉，app.js相當(dāng)于iOS的appdelegate,app.json就是app的配置,app.wxss就是css樣式文件。
每一個(gè)頁面都單獨(dú)有一個(gè)js扇商，json凤瘦，wxss文件。
4.app.json文件分析
{//所有的頁面都在這里列出來
"pages":[
"pages/index/index",
"pages/logs/logs",
"pages/button/button"
],
"window":{ //app的樣式
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
5.先做一個(gè)小demo(js案铺，json蔬芥，wxml，wxss都是新建的)
代碼：
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data:{
count:0,
text: '加載了了0次',
loadingstatus: false,
},
onLoad:function(options){
// 頁面初始化 options為頁面跳轉(zhuǎn)所帶來的參數(shù)
console.log("onLoad");
},
onReady:function(){
// 頁面渲染完成
console.log("onReady");
},
onShow:function(){
// 頁面顯示
console.log("onShow");
},
onHide:function(){
// 頁面隱藏
console.log("onHide");
},
onUnload:function(){
// 頁面關(guān)閉
console.log("onUnload");
},
button1click: function(){
var that = this;
that.data.count++;
that.setData({ //更改屬性的值
text:'加載了'+that.data.count+'次',
loadingstatus:that.data.count%2 == 0 ? true:false,
})
},
})
//這里的data就是頁面的數(shù)據(jù)和函數(shù)控汉，
onShow,onHide,onReady,onUnload都是生命周期函數(shù)笔诵，
button1Click是button的click函數(shù)
這框架是data和頁面的綁定起來的，只要改變data的值姑子，頁面就會(huì)隨著變化乎婿，這點(diǎn)和iOS有點(diǎn)不同。
button.json 文件
{
"navigationBarTitleText": "ButtonDemo" 這是頁面的title
}
button.wxml文件
<view class="container">
<view class="button-wrapper">
<button type="default" bindtap="button1click" size="default"
loading="{{loadingstatus}}" > 點(diǎn)我
</button>
</view>
<text class="countClick" id="text1">{{text}}
</text>
</view>
button.wxss
.countClick{
margin-top: 100rpx;
width: 200rpx;
height: 50rpx;
text-align: center;
font-size: 1em;
background-color: cadetblue;
}
bindtap="button1click" 綁定點(diǎn)擊事件到buttonclick函數(shù)
{{text}} {{data中的屬性}}
今天還看到一段比較好玩的代碼：
for (var i = 0; i < types.length; ++i) {
(function(type) {
pageObject[type] = function(e) {
var key = type + 'Size'
var changedData = {}
changedData[key] =
this.data[key] === 'default' ? 'mini' : 'default'
this.setData(changedData)
}
})(types[i])
可能做iOS的沒看過js的人這點(diǎn)看不太懂街佑，我也是新手谢翎，哪里說的不對，歡迎前端大神指正舆乔。
大概意思是：
for (var i = 0; i < types.length; ++i) { 循環(huán)數(shù)組
(function(type) { //寫法js(function)(item)
pageObject[type] = function(e) { //添加屬性函數(shù) 就是增加了幾個(gè)函數(shù)岳服。
var key = type + 'Size' //拼接字符串
var changedData = {} //字典
changedData[key] = //字典賦值
this.data[key] === 'default' ? 'mini' : 'default'
this.setData(changedData) //相當(dāng)于iOS的kvo用hash值的方式給自己的屬性賦值
}
})(types[i]) //執(zhí)行函數(shù)
這一個(gè)系列的Demo都會(huì)在這個(gè)倉庫哦剂公，歡迎大神吐槽希俩。
demo地址
